app.css

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   overflow-x: hidden;
   /* scroll-behavior: smooth; */
   font-family: 'Poppins', sans-serif;
}
body {
   background-color: rgb(230, 224, 62);
   min-height: 1000px;
}
/* .container {
   height: 100vh;
} */
header {
   display: flex;
   align-items: center;
   justify-content: center;
   transition-duration: 1s;
   animation: picture 2s linear 0.5s 1 normal forwards;
   overflow-y: hidden;
}
header.sticky {
   height: 600px;
   overflow-y: hidden;
   transition-duration: 1s;
}
body img {
   mix-blend-mode: darken;
}
.img {
   width: 100%;
   height: 100vh;
   background-size: cover;
   overflow-y: hidden;
}
.navigation {
   position: relative;
   left: 40%;
   height: 50px;
   width: 250px;
   margin-top: 50px;
   transition: 0.5s;
   border-radius: 5px;
   overflow: hidden;
}
input {
   position: relative;
   border-style: none;
   width: 100%;
   height: 30px;
   background-color: rgba(178, 184, 189, 0.631);
   padding-left: 30px;
   color: #000;
}
.fa-bacteria {
   position: absolute;
   z-index: 5;
   padding-top: 15px;
   padding-left: 10px;
   font-size: 20px;
}
.fa-viruses {
   position: absolute;
   display: flex;
   z-index: 5;
   padding-top: 15px;
   font-size: 20px;
}
.fa-search {
   position: absolute;
   padding: 7px;
}
.navigation .toggle {
   position: relative;
   width: 100%;
   height: 50px;
   background: #CC120F;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 20px;
   font-size: 20px;
   cursor: pointer; 
}
.navigation.active {
   height: 275px;
   overflow-y: visible;
}
.navigation.active::-webkit-scrollbar {
   width: 0.001px;
}
.navigation .toggle:before {
   content: 'Where is the COVID';
   padding-left: 20px;
   font-size: 17px;
}
.navigation .toggle span {
   position: relative;
   width: 20px;
   height: 50px;
}
.navigation ul {
   position: relative;
   background: #111;
}
.navigation ul li a {
   position: relative;
   text-decoration: none;
   display: block;
   padding: 12px 20px;
   height: 50px;
   color: #fff;
   font-size: 18px;
   transition: 1s;
   overflow-y: hidden;
}
.navigation ul li a:hover {
   transition: 0s;
   background: #cc120f70;
}
@keyframes picture {
   0% {
      width: 100%;
      height: 100vh;
   }
   100% {
      height: 600px;
   }
}