@keyframes fade-in {
     from { opacity: 0; }
   }

   @keyframes fade-out {
     to { opacity: 0; }
   }

   @keyframes slide-from-bottom {
     from { transform: translateY(40px); }
   }

   @keyframes slide-to-top {
     to { transform: translateY(-40px); }
   }

   .slide-it {
     view-transition-name: slide-it;
   }

   ::view-transition-old(slide-it) {
     animation: 1000ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
     1000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
   }
   ::view-transition-new(slide-it) {
     animation: 1000ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
     1000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }







.row {
    display: flex;
    color: antiquewhite;
    width: 50%;
    height: 40px;
    margin: 1.5rem auto;  
    border-bottom: 1px solid antiquewhite;
}

#results{
    position: relative;
    margin: auto;
    top: 5%;
    width: 100%;
}

.form-container{
      width: 100%;
    top: 10%;
    position: relative;
    margin: auto;
    display: flex;

}

form{
      margin: auto;

    input{
      background: none;
      width: 20rem;
      height: 2.8rem;
      border: solid white 1px;
      border-radius: 5rem;
      padding: 10px;
      color: antiquewhite;
  }
    ::placeholder {
  color: antiquewhite;
  opacity: 1; /* Firefox */
}
}


@media only screen and (min-width: 800px){
    .form-container{
      top: 30% 
    }



    .form-container.submitted{
    top: 2%;

    transition: 0.3s ease;
    transition-property: top;
    }
    

}

body{
  margin: 0;

}

.background{

    height: 100%;
    width: 100%;
    position:fixed;
    background: rgb(66, 103, 157);
    background: linear-gradient(131deg, rgba(66, 103, 157, 1) 10%, rgba(140, 166, 177, 1) 50%, rgba(131, 77, 141, 1) 100%);
    background-repeat: no-repeat;
    background-size: cover;

}



/* Clean up buttons*/

button {
    display: inline-block;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 2rem;
    margin: 0;
    text-decoration: none;
    background: #C53062;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, 
                transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button:hover,
button:focus {
    background: #0053ba;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}