@media screen and (max-width:1000px){/*quando a tela estiver nesse tamanho essaes botoes aparecem*/
 
    body{
       text-align: center;
       }
       #logo{
           margin: 1px;
       }
       #menu{
          display: block;
          position: absolute;
          width: 100%;
          top: 70px;
          right: 0px;
          background: var(--corHeader);
          transition: .90s;
          z-index: 1000;
          height: 0px;
          visibility: hidden;
          overflow-y:hidden;
        }
       
       #nav.active #menu {
           height: calc(100vh  - 70px);
           visibility: visible;
           overflow-y: auto;
       }
         
       #menu a {
           padding: 1rem 0;
           margin: 0 1rem;
           border-bottom: 2px solid  white;
       }
   
       #btn-mobile{
           display: flex;
           padding: .5rem 1rem;
           font-size: 1rem;
           border: none;
           background:none;
           cursor: pointer;
           gap: .5rem;  
       }
       
       #hamburguer{
           color: black;
           border-top:2px solid;
           width:20px;
       }
       #hamburguer:hover{
           color:orange;
   
       }
   
       #hamburguer::after, #hamburguer::before {
           content:'';
           display: block;
           width:20px;
           height: 2px;
           background: currentColor;
           margin-top:5px;
           transition: .3s;
           position: relative;
       }
       
       #nav.active #hamburguer{
           border-top-color: transparent;
       }
   
       #nav.active #hamburguer::before{
           transform: rotate(135deg);
       }

       #nav.active #hamburguer::after{
           transform: rotate(-135deg);
           top: -7px;
       }
   
   }
   @media screen and (max-width:800px){/*quando a tela estiver nesse tamanho essaes botoes aparecem*/
    .icon{
          width: 8rem;
     }
   }