.nav-links{
list-style: none;
padding: 0;
margin: 0;
display: flex;
transition: all 0.5s ease;
}

.nav-links li{
margin-left: 24px;
top: 8rem;
position: relative;

}


.nav-links a{
    color:#d60b0b;
text-decoration: none;
font-size: 16px;
padding: 8px 28px;
border-radius: 30px;
transition: background-color 0.3 ease;
}
.nav-links a:hover{
background-color: aqua;

}
.menu-icon{
display: none;
flex-direction: column;
cursor: pointer;
margin-left: auto;
position: relative;
z-index: 1;

}

.menu-icon .line{
height: 3px;
  width: 30px;
  background-color: #FFFFFF;
  margin: 5px 0;
  transition: all 0.3s ease;
}

#menu-toggle {

display: none ;

}





@media(max-width:768px){
.navbar{
padding: 16px;

}


.nav-links{

background-color: aqua;

}

.menu-icon{

display: flex;

}



}


.nav-links{
position: absolute;
top: 188%;
right: 0;
width: 54vh;
height: 0;
overflow:hidden ;
flex-direction: column;
background-color:#0c0c0cfe;
text-align: center;
transition: heigth 0.5s ease;
}

.nav-links li {
  margin: 0;
padding: 20px 0;
width: 100%;
}
 .nav-links a {
width: 100%;
padding:  10px 20px;
 }
 #menu-toggle:checked +.menu-icon + .nav-links{
min-height: 80em;
z-index: 1;
  margin-top: -16%;


 }
 #menu-toggle:checked + .menu-icon .line:nth-child(1){
transform:  rotate(+45deg) translate(15px, 3px);

 #menu-toggle:checked + .menu-icon .line:nth-child(2){
transform:  scale(0);

 }
 #menu-toggle:checked + .menu-icon .h1 .line:nth-child(3){
transform:  rotate(-45deg) translate(15px, -4px);

 }


 
} 

.nose:active{

color: #0b5cd6;
display: none;

}

.line:nth-child(1){

background-color: yellow;

}

.line:nth-child(2){

background-color: blue;

}
.line:nth-child(3){

background-color: red;

}