@font-face {
    font-family: "Cursive";
    src: url("GreatVibes-Regular.ttf") format('ttf');
}

html {
    height: 100%;
}

body {
    height: 100%;
    /*font-family: 'Anton', sans-serif;
    font-family: 'Russo One', sans-serif;*/
    font-family: 'Caveat Brush', cursive;
    font-weight: 800;
    background-color: #393962;
}

#hash {
    color: white;
    transition: .2s;
}
#hash:hover {
    color: #ffd02d;
    transition: .2s;
}

/*\
    Start Left Menu CSS rules.
\*/
.menu {
    font-size: 30px;
    background-color: #393962; 
    height: 100%; 
    transition: .5s;
    line-height: 2em;
}
/* Menu link color*/
.menu a{
    color: white;
    transition: .2s;
}

.menu a:hover {
    color: #ffd02d;
    transition: .2s;
}

/*\
    Start Middle Menu CSS rules.
\*/
.mid-menu {
    font-size:2em; 
    position: relative; 
    background-color: #393962; 
    height: 100%;
    
}

/* Font color for mid menu h4 */
.mid-menu h4 {
    color: white;
    font-weight: 800;
}

/*\
    Start Right Menu CSS rules.
\*/
.right-menu {
    background-color: #393962; 
    height: 100%;
}

#player {
    height: 500px;
}

@media screen and (max-width: 480px) {
    .right-menu {
        height:50%;
    }
    #player {
        height: 400px;
    }
}

/*.menu:hover {
    background-color: #b4b4b4; 
    transition: .5s;
    box-shadow: 10px 5px 5px red;
}
*/
/*\
    Start slide out mobile menu CSS rules.
\*/
.slide {
    background-color: #393962;
    height: 100%; 
    padding: 50% 0; 
    font-size: 30px;
    line-height: 2em;
}

.slide a {
    color: white;
    transition: .2s;
}

.slide a:hover {
    color: #ffd02d;
    transition: .2s;
}