@font-face {
    font-family: 'led';
    src: url('../../Fonts/ARCADE_R.TTF');
}

*{
    font-family: 'led';
    font-weight: bold;
    color:rgba(71, 223, 133, 0.9);
}

a{
    cursor: pointer;
}

body{
    /*background-color: #0e0e0e;
    background-color: #6838ff;
    background-color: gainsboro;*/
    background-color: #353535;
}

.picked{
    background-color: #0005fe!important;
    box-shadow: none!important;
    border-bottom: 1.55px solid black!important;
    border-top: 7px double black!important;
}

.picked i{
    color:white!important;
    text-shadow: 0px 0px 5px #FFFFFF!important;
}

#music-nav .fab,#music-nav .fas{
    font-size: 1.25rem;
    padding: .5rem;
}

#big-screen-btns .btn i{
    padding: .2rem;
    font-size: 2rem;
}

#links-nav .btn i, #duration-nav .btn i{
    padding: .1rem;
}

#big-screen-btns .btn, #links-nav .btn, #duration-nav .btn{
    background-color: #0074fc;
}

#big-screen-btns .btn i, #links-nav .btn i, #duration-nav .btn i{
    transition: .2s linear all;
    color: #0000ff;
}

#nav-wrapper .btn, #big-screen-btns .btn, #links-nav .btn{
    cursor: pointer;
    border:1.25px solid black;
    transition: .25s linear filter;
}

#music-nav .btn:not(.picked):hover, #big-screen-btns .btn:not(.picked):hover, #links-nav .btn:not(.picked):hover, #duration-nav .btn:not(.picked):hover{
    filter: brightness(1.5);
}

#music-nav .btn:nth-child(1){
    background-color:#01a93f;
}

#music-nav .btn:nth-child(1) i{
    color:#005800;
}

#music-nav .btn:nth-child(2){
    background-color: #f9b900;
}

#music-nav .btn:nth-child(2) i{
    color:#ad7d02;
}

#music-nav .btn:nth-child(3){
    background-color: #fb3601;
}

#music-nav .btn:nth-child(3) i{
    color:#aa0b00;
}

#music-nav .btn.picked:nth-child(1){
    background-color:#00792d!important;
}

#music-nav .btn.picked:nth-child(2){
    background-color:#8a6600!important;
}

#music-nav .btn.picked:nth-child(3){
    background-color:#8a1d00!important;
}

#main-container
{
    transition: .2s linear padding;
}

#small-screen-wrapper{
    flex:1;
}

#small-screen span{
    line-height: 2;
    font-size: 0.85rem;
}

#big-screen{
    transition: .2s linear all;
}

#nav-wrapper > div:first-child{
    border-bottom: 1.75px solid black;
}

#menu-wrapper, #big-screen-wrapper{
    transition: .25s linear all;
}

#big-screen, #small-screen, #duration-bar{
    background-color: #012b3c;
    -webkit-box-shadow: inset 0px 10px 0px 0px rgba(0,0,0,0.65);
    -moz-box-shadow: inset 0px 10px 0px 0px rgba(0,0,0,0.65);
    box-shadow: inset 0px 10px 0px 0px rgba(0,0,0,0.65);
    border: black solid;
    border-radius: .25rem;
    background: linear-gradient(
    to bottom,
    #012b3c,
    #012b3c 50%,
    #023952 50%,
    #023952
);

background-size: 100% 4px;
}

#duration-bar{
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: .3rem .75rem;
    -webkit-box-shadow:inset 0px 4px 0px 0px rgba(0,0,0,0.65);
    box-shadow:inset 0px 4px 0px 0px rgba(0,0,0,0.65);
    text-align: center;
}

#big-screen-wrapper, #small-screen-wrapper, #nav-wrapper, #nav-wrapper .btn, #big-screen-btns .btn{
    border: black solid 1.55px;
    border-radius: .25rem;
    -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.5);
    border-bottom: 7px double black;
}

#big-screen-wrapper, #small-screen-wrapper, #nav-wrapper{
    background-color:#6838ff;
}

#nav-wrapper .btn, #big-screen-btns .btn{
    background-color: #0074fc;
    transition: .2s linear all;
}

#big-screen span {
    transition: .2s linear all;
    font-size:1rem;
    line-height: 2.5;
    white-space: pre-line;
}

#small-screen-link-icon{
    font-size: 2.25rem;
}

@media(max-width:992px){
    #menu-wrapper.show-menu, #menu-wrapper.show-menu #menu{
        display: flex!important;
        transform: translateY(0%);
        position: relative;
    }
    
    #main-wrapper{
        flex-direction: column-reverse;
    }

    #main-container{
        max-width: 100%;
        min-width: 280px;
    }

    #menu-wrapper{
        transform: translateY(-105%);
        transform-origin: center center;
    }

    .res-text-1{
        font-size: .75rem!important;
    }

    .res-text-3{
        font-size: 1.75rem!important;
    }

    #small-screen{
        min-height: 154px;
    }

    #big-screen{
        min-height: 330px;
    }
}

@media(max-width:610px){
    .res-text-1{
        font-size: .65rem!important;
    }

    .res-text-3{
        font-size: 1.1rem!important;
    }

    #small-screen{
        min-height: 151px;
    }

    #big-screen{
        min-height: 340px;
    }
}

@media(max-width:374px){
    #big-screen{
        min-height: 337px;
    }
}

@media(min-width:992px){
    #big-screen{
        min-height: 526px;
    }
}

@media(min-width:1200px){
    #big-screen{
        min-height: 398px;
    }
}

/* Glitch Animation */