.navBackground{
    background-color: var(--gray);
    height: 90px;
    width:100%;
    position: fixed;
    z-index: 100;
}
.topnav{
    position:fixed;
 
    z-index:10;
    margin-top:var(--navTop);
    top:0px;
    width:100%;
    margin-left:100px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.logo{
    position:absolute;
    left:0px;
    top:5px;
  float: left;
    height:40px;
    transition: transform 500ms;
}
.logo:hover{
    transform: rotate(45deg);
}
.navlinks{
    margin-left:50px;
    display:flex;
    
}

.page{
    margin-right:14px;
    float:left;
    position:relative;
    display:block;
    color:var(--textWhite);
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
}
.navlinks a::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0.1em;
    background-color:var(--yellow);
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 400ms, transform 500ms;
}
.navlinks a:hover::after{
    opacity:1;
    transform: scaleX(1);
    transform-origin: left;
}
.navlinks a:not(hover)::after,
.navlinks a:not(focus)::after{
    opacity:0;
    transform: scaleX(0);
    transform-origin: right;
}
.navlinks a:hover{
color: var(--yellow);
}
.navlinks a.active{
    color:white;
}
.navlinks a.active::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0.1em;
    background-color:var(--textWhite);
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
}
.topnav .icon{
    display:none;
}
#navsocial{
    display: inline;
    position: relative;
    float:right;
    right:150px;
}
#navsocial a{
    display:inline;
}
#navsocial img{
    height:37px;
    margin-top:8px;
    margin-left:10px;
    transition: 500ms;
}
#navsocial img:hover{
    transform: rotate(20deg);
}

.closeButton{
    transform: scale(0);
    width:0;
}
    .hamburger{
        transform: scale(0);
        transition: 0ms;
    }
    @media screen and (max-width: 600px){
        .navlinks{
            flex-direction: column;
            display:flex;
            width:100%;
            height:0vh;
            transform:scale(0);
            align-items: center;
            padding:0;
            margin:0;
        }
        .navlinks a{
            width:100%;
        }
        .logo{
        margin-left:25px;
        }
        .navBackground{
            height:50px;
        }
        .topnav{
            width:100%;
            left:0;
            margin:0;
            padding:0;
            position:relative;
        }
        .hamburger{
            position: absolute;
            display: block;
            top:100%;
            right:10px;
            transform: scale(1);
            font-size: 30px;
            cursor: pointer;
        }
        .hamburger:hover:after{
           transform: scale(0);
        }
        .closeButton{
            width:revert;
            transform: scale(1);
            color:var(--textWhite);
            background-color: var(--yellow);
            border: 3px solid var(--yellow);
            margin-right:14px;
            float:left;
            position:relative;
            display:block;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 17px;
            line-height: 1;
        }
        .closeButton:hover{
            color:var(--yellow);
            background-color: var(--gray);
            border: 3px solid var(--yellow);
            text-decoration: none;
        }
        .closeButton:hover::after, .closeButton::after{
            width:0;
        }
        .navlinks a.active::after{
            content:"";
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            height:0.1em;
            background-color:var(--yellow);
            opacity: 0;
            transform: scaleX(0);
            transition: opacity 400ms, transform 500ms;
        }
        .navlinks a.active:hover::after{
            opacity:1;
            transform: scaleX(1);
            transform-origin: left;
        }
        .navlinks a.active:not(hover)::after,
        .navlinks a.active:not(focus)::after{
            opacity:0;
            transform: scaleX(0);
            transform-origin: right;
        }
        .navlinks a.active:hover{
        color: var(--yellow);
        }
    }