.main-menu{
  transition: background-color 0.3s, color 0.3s;
   display:flex;
   background-color:var(--cool-color);
   border-bottom: 2px solid;
   border-color:var(--deep-color) ;
}
.btn {
  transition: background-color 0.3s, color 0.3s;
background-color:var(--cool-color);
color: var(--text-color);
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s;
}
.btn:hover {
    background-color:var(--deep-color); 
    color:var(--text-color);
}
  
span{
   padding: 2px;
  float:left;
}
#menu-ico{
transition: background-color 0.3s, color 0.3s;
color: var(--text-color);
 display:none;
}

#sidemenu{
display:none;
}
 
 @media screen and (max-width: 912.98px),  (min-width: 1000px) and (min-height: 1000px)  {
#menu-ico{
display: block;
  }
.main-menu{
display:none;
  }
.icons a{
color: var(--deep-color);
font-size:50px;
  }
#sidemenu{
margin:0;
padding:0;
position: fixed; 
overflow: hidden;
height:100vh;
z-index: 10;
width:0px;
 transition: 0.3s;
 display: block;
text-decoration: none;
}
.fa-close{
  text-align: end;
  width: 100%;
  
}
#sidemenu  a {
 
color:var(--text-color);
background-color:var(--deep-color);
font-size:large;
}






}