.menubar {
    width: 100%;
    background: var(--PrimaryColor);
    height: 60px;
    margin-top: 10px;
    border-radius: 15px;
    display: inline-block;
}
    .menubar input[type=text] {
        background-color: var(--SecondaryColor);
        color: white;
        min-width: 250px;
        transition: width 1s;
        float: right;
        margin: 10px;
        width: 100px;
    }
/*Strip the ul of padding and list styling*/
    .menubar ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
/*Create a horizontal list with spacing*/
.menubar li {
    text-align:center;
    display: inline-block;
    float: left;
    margin-right: 1px;
}
/*Style for menu links*/
    .menubar li a {
        display: block;
        min-width: 90px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: var(--NeutralColor);
        text-decoration: none;
    }
/*Hover state for top level links*/
    .menubar li:hover a {
        background: var(--SecondaryColor);
    }
/*Style for dropdown links*/
    .menubar li:hover ul a {
        background: var(--SecondaryColor);
        color: white;
        height: 40px;
        line-height: 40px;
    }
/*Hover state for dropdown links*/
        .menubar li:hover ul a:hover {
            background: var(--SecondaryColor);
            
            color: #fff;
        }
/*Hide dropdown links until they are needed*/
.menubar li ul {
    display: none;
}
/*Make dropdown links vertical*/
.menubar li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
.menubar li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
.menubar ul li a:hover + .hidden, .hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
    .menubar .show-menu {
        margin-top:0px;
        font-size:40px;
        width:53px;
        height:60px;
        border-radius:20px;
        color: #fff;
        background: rgba(0,0,0,0.2);
        text-align: center;
        padding: 0px 0;
        display: none;
    }
/*Hide checkbox*/
.menubar input[type=checkbox] {
    display: none;
}
/*Show menu when invisible checkbox is checked*/
.menubar input[type=checkbox]:checked ~ #menu {
    display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 845px){
    /*Make dropdown links appear inline*/
    .menubar ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    .menubar li {
       
        margin-bottom: 1px;
    }
    .menubar li a {
        width:100%;
    }
    /*Make all menu links full width*/
    .menubar ul li {
        text-align: -webkit-center;
        width: 100%;
        background-color: var(--PrimaryColor);
    }
    /*Display 'show menu' link*/
    .menubar .show-menu {
        display: block;
        float:left;
    }
}