@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap);

:root {
    --darkpurple: #0E0B16;
    --purple: #A239CA;
    --bluesihpeurple: #4717F6;
    --grey: #E7DFDD;
    --white: #FFFFFF;
    --black: #000000;
    --yellow: #ffc107
}

.topnav{
    background-color: #333;
    overflow: hidden;
    padding: 10px 5px; 
    transition: 0.4s;
    position: fixed; 
    width: 100%;
    top: 0;
    z-index: 99;
}

#responsive-topnav{
    background-color: #333;
    overflow: hidden;
    padding: 10px 5px; 
    transition: 0.4s;
    position: fixed; 
    width: 100%;
    top: 0;
    z-index: 99;
}


.container{
    overflow: auto;
}

.topnav-left{
    float: left;
    height: auto;
}

.topnav-left .topnav-name{
    color: #fff;
    float: auto;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
    font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive
}

.topnav-left .topnav-name:hover {
    color: var(--yellow);
}

.topnav .navbar-list{
    list-style-type: none;
}

.topnav .topnav-right{
    margin-left: auto;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
}

.topnav .navbar-item{
    display: inline-block;
}

.topnav .navbar-link {
    float: auto;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
}


.topnav .navbar-link:hover {
    color: var(--yellow);
}   

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav .navbar-item:not(:first-child){
        display: none;
    }

    .topnav .navbar-item .icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position:static;
        right: 0;
        top: 0;
    }

    .topnav.responsive .navbar-item {
        float: none;
        display: block;
        text-align: left;
    }
}