@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');

/* Basis */

.margin{
  margin-top: -20px;
  color: #4c57bc;
  font-size: 1px;
}

body {
  margin:0;
}

.background {
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);

}

/* Logo */

img{
  width: 65%;
  margin-bottom: 1%;
margin-top: 10%;
display: grid;
margin-left: auto;
margin-right: auto;






   }
@media only screen and (min-width: 1100px) {
 img {
  width: 45%;

  
 }
}





@media only screen and (max-width: 700px) {
 img {
margin-top: 35%;
width: 86%;
margin-bottom: 3%;


 }
}



/* SB */


.input{
font-size:25px;
width: 75%;
border-radius: 12px;
padding: 15px;
font-family: lato;
border-color: white;
color: #525252;
outline: none;
border: none;
margin-top: -5px;
}

.suggestion{
font-size:22px;
background-color: #e3e3e3;
text-align: left;
padding: 5px;
width: 100%;
color: #525252;
font-family: lato;
border: solid;
border-color:#d1d1d1 ;
}

.suggestion:hover{
background-color:#2596be;
color: white;
transition: 0.1s;
border: solid;
border-color: white;
}


.container{
width:63%;
margin: 100px auto;
margin-top: 3%;
margin-bottom: 15%;
justify-content: center;
align-items: center;
text-align: center;
}






@media only screen and (max-width: 1100px) {
.container{
margin-bottom: 30%;
width:77%;


 }
}


@media only screen and (max-width: 700px) {
.container{
width: 98%;
margin-bottom: 55%;




 }
}



@media only screen and (max-width: 700px) {
.suggestion{
width: 100%;
border: solid;
border-color: white;



 }
}


@media only screen and (max-width: 700px) {
.input{
font-size: 20px;



 }
}




/* Waves */






.waves {
  position:relative;
  width: 100%;
  height:5vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}



.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  
}




.arrow {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}




footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
}


.footer-left {
padding-top: 15px;
padding-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr;
  font-family: lato;
}

@media (min-width: 700px) {
.footer-left {  
       display: grid;
    grid-template-columns: 1fr 1fr;
    justify-self: left;
   }
}


.footer-right {
    justify-self: right;
}


.footer-link 
{
    padding-left: 20px;
    color: #3c5bac;
  text-decoration: none;
  margin-bottom: 10px;
}


@media (min-width: 700px) {
.footer-link {  
   }
}



.footer-text 
{
    color: #c7c9c8;
font-size: 17px;
margin-right: 20px;
  

}