/* IzaacWeb V3 */

ul {margin: 0;}

#logo {font-size: 10px;
       font-weight: bold;
       color: lime; 
       width: 100px;
       box-shadow: 0px 0px 15px lime;
       border-radius: 50%;
       cursor: default;}

#header {box-sizing: border-box;
         height: 10px;
         width: 100%;
         padding: 1rem;
         display: flex;
         box-shadow: 0px 0px 3px lime;
         align-items: center;
         justify-content: space-between;
         background: #001403ff;
         position: fixed;
         z-index: 2;}

#menu {display: flex;
       list-style: none;
       gap: .5rem;}

#menu a {display: block;
         font-size: 15px;
         text-decoration: none;
         padding: .5rem;}

#btn-mobile {display: none;
             color: lime;
             border: .1rem solid black;
             padding: .1rem;}

@media (max-width: 600px) {
    #btn-mobile {display: block;}

    #menu {position: absolute;
           width: 100%;
           top: 40px;
           right: 0;
           display: block;
           background-color: #313131c0;
           height: 0;
           z-index: 1000;
           transition: .6s;
           visibility: hidden;
           overflow-y: hidden;}

    #nav.active #menu {
        display: block;
        visibility: visible;
        height: calc(100vh - 30px);
        overflow-y: auto;}

    #menu a {padding: 1rem 0;
             margin: 0.5rem;
             font-size: 15px;
             text-decoration: none;
             border-bottom: 2px solid #AFBFC0;}

    #btn-mobile {display: flex;
                 padding: .5rem 1rem;
                 font-size: 1rem;
                 border: none;
                 cursor: pointer;
                 gap: .5rem;}

    #hambuguer {border-top: 2px solid; width: 20px;}

    #hambuguer::before, #hambuguer::after {content: '';
                                           display: block;
                                           width: 20px;
                                           height: 2px;
                                           background-color: currentColor;
                                           margin-top: 5px;
                                           transition: .3s;
                                           position: relative;}

    #nav.active #hambuguer {border-top-color: transparent;}

    #nav.active #hambuguer::before {transform: rotate(135deg);}

    #nav.active #hambuguer::after {transform: rotate(-135deg); top: -7px;}
}