:root {
    --Primary-color: #2980B9;
    --Secondary-color: rgb(252, 252, 40);
    --Tetiary-color: rgba(21, 255, 0, 0.856);
    --Primary-font: Open Sans;
    --Secondary-font: Montserrat;
    --Tetiary-font: Mitr;
    --Extra-font: Courgette;
    --Extrastyle-font: ;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.Navbar-section {
    padding: 2px;
    width: 100vw;
    height: 60px;
    display: flex;
    position: fixed;
    z-index: 1111;
}
 /* Styling the menu button */ 
 .menu-btn { 
    position: absolute;  
    z-index: 3; 
    left: 15px; 
    top: 25px;  
    cursor: pointer; 
    transition: all 0.5s ease-out; 
    display: block;
    visibility: hidden;
} 
/* Styling the hamburger lines */ 
.menu-btn .btn-line { 
    width: 28px; 
    height: 3px; 
    margin: 0 0 5px 0; 
    background: var(--Tetiary-color); 
    transition: all 0.5s ease-out; 
} 
/* Adding tranform to the X */ 
.menu-btn.close {  
    transform: rotate(180deg); 
} 
/* Styling the three lines to make it an X */ 
.menu-btn.close .btn-line:nth-child(1) { 
    transform: rotate(45deg) translate(5px, 5px); 
} 
.menu-btn.close .btn-line:nth-child(2) {  
    opacity: 0; 
} 
.menu-btn.close .btn-line:nth-child(3) { 
    transform: rotate(-45deg) translate(7px, -6px); 
} 
/* Styling the position of the menu icon */ 
.menu { 
    position: absolute; 
    top: 0; 
    width: 100%;
    height: 70px; 
    left: 0;
    visibility: visible;  
    background-color: var(--Primary-color);
    border-bottom: 1px solid black; 
} 
.menu.show {  
    visibility: visible;  
} 
/* styling menu items */
.menu-nav {
    list-style: none; 
    display: flex; 
    margin-left: -50px; 
    background-color: var(--Primary-color); 
    margin-top: 10px;
    padding:15px;
 }
.nav-link { 
    color:  white; 
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 12px; 
    font-family: var(--Primary-font);
    text-decoration: none; 
    padding: 10px;
}
.gr { 
    width: auto;
    margin-right: 10px;
    display: flex;
}
.grh { 
    width: 200px;
    margin-top: 0px;
    margin-right: 40px;
    margin-left: 0px;
    display: flex;
    border-bottom: none;
    background-color: transparent;
}
/* Adding a transition delay  to the 4 items in the  navigation menu */ 
.signup {
    width: 100px;
    padding: 10px;
    background-color: black;
    border: none;
    font-weight: normal;
    margin-left: 50px;
    margin-top: -10px;
}
.signup a { 
    text-decoration: none; 
    color: white;
    text-align: center;
    font-size: 12px;
    padding: 10px;
    font-family: var(--Primary-font);
}
.proavatar2{
    visibility: hidden;
}
/*End of styling sub menu */
.rule {
    display: none;
}
.proavatar{
    width: 120px;
    height: 80px;
    left: 20px;
    position: absolute;
    visibility: visible;
    margin-top: -25px;
}
a { 
    text-decoration: none;
}





@media screen AND (max-width:500px) {
    .rule {display: block;}
    .Navbar-section {
        background-color: var(--Primary-color);
        padding: 2px;
        width: 100vw;
        height: 70px;
        display: flex;
        position: fixed;
        margin-bottom: 0px;
    }
    .signup {
        padding: 10px;
        width: 150px;
        margin-left: 10px;
        border: none;
        font-weight: normal;
        margin-top: 30px;
        margin-bottom: 0px;
        background-color: black;
    }
    .signup a{ 
        text-decoration: none; 
        font-weight: bolder;
        color: white;
        padding: 10px;
        font-family: var(--Primary-font);
    }
    /* Styling the menu button */ 
    .menu-btn { 
        position: absolute;  
        z-index: 1111; 
        top: 20px; 
        margin-left: 80%; 
        margin-top: -10px;
        padding: 10px;
        cursor: pointer; 
        transition: all 0.5s ease-out; 
        display: block;
        visibility: visible;
    } 
    /* Styling the hamburger lines */ 
    .menu-btn .btn-line { 
        width: 30px; 
        height: 2px; 
        margin: 0 0 7px 0; 
        background: white; 
        transition: all 0.5s ease-out; 
    } 
    /* Adding tranform to the X */ 
    .menu-btn.close {  
        transform: rotate(180deg); 
    } 
    /* Styling the three lines to make it an X */ 
    .menu-btn.close .btn-line:nth-child(1) { 
        transform: rotate(45deg) translate(5px, 5px); 
    } 
    .menu-btn.close .btn-line:nth-child(2) {  
        opacity: 0; 
    } 
    .menu-btn.close .btn-line:nth-child(3) { 
        transform: rotate(-45deg) translate(7px, -6px); 
    } 
    /* Styling the position of the menu icon */ 
    .menu { 
        position: absolute; 
        top: 0; 
        width: 100%;
        height: 100vh; 
        left: 0;
        visibility: hidden;  
        background-color: var(--Primary-color); 
        overflow-y: auto;
        overflow-x: hidden;
        transition-delay: 0.2s;
        transition-duration: 0.5s;
        margin-left: -100%;
    } 
    .proavatar{
        visibility: visible;
        width: 120px;
        height: 80px;
        margin-top: 30px;
        margin-left: 15px;
    }
    .proavatar2{
        visibility: visible;
        width: 120px;
        height: 80px;
        margin-top: -80px;
        margin-left: 15px;
    }
    .menu.show {  
        visibility: visible; 
        transition-delay: 0.2s;
        transition-duration: 0.5s; 
        margin-left: 0%;
    } 
    /* styling menu items */
    .menu-nav {
        list-style: none; 
        display: block; 
        margin-left:0px; 
        background-color: transparent;
        margin-top: -100px;
    }
    .nav-link { 
        color: white; 
        font-size: 12px;
        text-transform: uppercase;
        font-weight: bolder;
        margin-top: 50px;
        text-decoration: none; 
        padding: 5px; 
        margin-left: 0px;
    }
    .gr:hover { 
        color:  black; 
        text-decoration: none;  
    }
    .grh { 
        width: 100%;
        height: 100px;
        margin-left: -5px;
        margin-bottom: 50px;
        margin-top: 60px;
        display: flex; 
        padding: 0;
        border-bottom: none;
        background-color: transparent;
    }
    .gr { 
        width: 100%;
        display: flex; 
        padding: 5px 15px;
        border-bottom: 1px solid black;
    }
    /* Adding a transition delay  to the 4 items in the  navigation menu */ 
    .nav-item:nth-child(1) { 
        transition-delay: 0.1s; 
    } 
    .nav-item:nth-child(2) {  
        transition-delay: 0.2s; 
    } 
    .nav-item:nth-child(3) { 
        transition-delay: 0.3s;
    } 
    .nav-item:nth-child(4) { 
        transition-delay: 0.4s; 
    } 
    .nav-item:nth-child(5) { 
        transition-delay: 0.4s; 
    } 
    .nav-item:nth-child(6) { 
        transition-delay: 0.4s; 
    }
}