/* 
** The Header Media Queries **
** Tweak as per your needs **
*/
body {
    scrollbar-face-color:black;
    scrollbar-track-color:white;
    scrollbar-arrow-color:white;
    scrollbar-highlight-color:black;
    scrollbar-shadow-color:black;
    scrollbar-3dlight-color:black;
    scrollbar-darkshadow-color:black;
}

.brand {
    margin-top          : 5px;
    margin-left         : 21px ;
    font-weight         : bold ;
    font-size           : 12px ; 
    color               : #ffffff ;
    font-family         : 'Spartan', sans-serif ;
    text-shadow         : #000000 1px 0 10px ;
}
 
.site-header {
    position            : relative ;
    padding-right       : 10px ;
    background-color    : #282828 ;
    _border-bottom       : 1px solid #a6a800 ;
    border-bottom       : 1px solid #0081a8 ;
    box-shadow          : 0px 0px 4px 4px rgb(0 0 0 / 20%);
    z-index             : 9 ;
}
 
.site-header__wrapper {
    padding-top: 1rem;
    padding-bottom: 1rem; 
}
@media (min-width: 600px) {
    .site-header__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0; 
    } 
}
@media (min-width: 600px) {
    .nav__wrapper {
        display: flex; 
    } 
}
 
@media (max-width: 599px) {
    .nav__wrapper {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: -1;
        background-color: #d9f0f7;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-100%);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out; 
    }
    .nav__wrapper.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0); 
    } 
}
 
.nav__item a {
    _margin-top          : 4px ;
    display             : block ;
    color               : #ffffff ; 
    font-size           : 10px ;
    font-weight         : 600 ;
    font-family         : 'Spartan', sans-serif ;
    _text-shadow         : #fee737 1px 0 10px ;
    transition          : 0.5s ;
    background-color    : #282828 ;
}
@media (min-width: 600px) {
    .nav__item a {
        padding             : 17px 12px 9px 12px ;
    }
}
@media (max-width: 599px) {
    .nav__item a {
        padding             : 1.5rem 1.5rem     ;  
        border-bottom       : 1px solid #404040 ;
    }
}

.nav__item :hover {
    background-color    : #1e1e1e ;
    text-shadow         : #fee737 1px 0 10px ;
    _text-shadow         : #ff0000 1px 0 10px ;
    _font-size           : 11px;
    transition          : 0.7s ;
}

.nav__toggle {
    display: none; 
}
@media (max-width: 599px) {
    .nav__toggle {
        display: block;
        position: absolute;
        right: 1rem;
        top: 1rem; 
        color     : #ffffff ;
    } 
}