* {
  box-sizing: border-box;
}

:focus {
 /* TODO */
}


body {
  /* TODO */
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-top: 15vh;
  background-image: url('https://cdn.pixabay.com/photo/2017/08/06/03/24/pineapple-2588302_1280.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

input {
 /* TODO */
 
}

.search-container {
 /* TODO */
width: 50%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;

}
.search-container input,
.search-container .suggestions {
  /* TODO */
  /* background-image: linear-gradient( to right, rgb(117, 93, 236), rgb(92, 60, 211)); */
  /* background-image: linear-gradient( to right, rgb(51, 4, 220), rgb(73, 41, 234)); */
}
.search-container input {
 /* TODO */
 width: 50%;
 height: auto;
 padding: 8px;
 margin-top: 8px;
 font-size: 20px;
 border-radius: 5px;
 color:rgb(48, 31, 239);
 border: none;
 background-color: transparent;
 border: 1px solid white;
}



.search-container .suggestions {
   width: 50%;
   height: auto;

}

::placeholder{
  padding: 0px 15px 0px;
  color: rgb(127, 58, 231);
  opacity: 0.7; 
}

ul {
  list-style: none;
  padding: 0;
  border-top: white;
  background-color: rgb(178, 175, 182);
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin-top: 5px;
 
}
ul.has-suggestions {
  /* TODO */
}
ul li {
  text-align: left;
  padding: 5px 0; 
  font-weight: bold;
  color:rgb(64, 58, 239);
  padding: 10px 20px;

}
ul li:hover {
  border-radius: 5px;
  padding: 10px;
  opacity: 1;
  cursor: pointer;
  background-color: aliceblue;
  color:rgb(110,12,241);
}

input {
   /* TODO */
}


@media only screen and (max-width: 600px) {
  body{
    margin-top: 10vh;
  }
  .search-container {
    width: 90%;

    }
    .search-container .suggestions {
      width: 100%;
   }
   ul li:hover {
    cursor: pointer;
    background-color: rgb(133, 182, 225);
    color:rgb(249, 247, 251);
    padding: 0px 10px;
  }
  .search-container input {
    width: 100%;
    background-color: transparent;
    border: 1px solid white;
   }

   ul li {
    font-weight:200;
  }
   

}