html {
    background: black;
    font-family: 'Fredericka the Great';
}

a:visited {
    color: black;
}

#goBack {
    color: white;
    text-decoration: none;
}

#goBack:visited {
    color: white;
    text-decoration: none;
}

i {
    font-size: 6vh;
    opacity: .6;
}

#email,
#fb,
#insta,
#pp {
    color: black;
}

#bg {
    height: 99%;
    z-index: -99;
}

#banjoPic {
    position: fixed;
    border-radius: 1%;
    top: 15%;
    width: 50vw;
    left: 50%;
    transform: translate(-50%, 0%);
    visibility: hidden;
    text-align: center;
    z-index: 11;
}

#picContainer {
    height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0%;
    left: 50%;
    visibility: visible;
    transform: translate(-50%, 0%);
    margin: auto;
}

#remote {
    position: fixed;
    top: 2%;
    right: 3%;
    border-radius: 1%;
    z-index: 10;
    text-align: right;
    font-size: 2vh;
    margin: 1%;
}

.remoteStyle {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
}

#warning {
    background: black;
    position: fixed;
    color: white;
    top: 0%;
    left: 0%;
    right: 0%;
    width: 100%;
    height: 100%;
    visibility: visible;
    text-align: center;
    z-index: 15;
    font-size: 5vw;
}

#label {
    width: 25%;
}

#infoPage {
    position: fixed;
    border-radius: 1%;
    background-color: rgba(229, 229, 229, 0.90);
    top: 15%;
    left: 5%;
    right: 5%;
    visibility: hidden;
    text-align: center;
    z-index: 11;
}

#infoText,
#infoText2 {
    color: black;
    font-size: 3vh;
    margin: 2%;
}

.songs {
    position: absolute;
    border: solid .5vh white;
    opacity: 0.0;
    filter: alpha(opacity=50);
    border-radius: 1%;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.songs:hover {
    opacity: 0.45;
}

.infoBar {
    position: absolute;
    border: solid .5vh rgba(255, 255, 255, .5);
    border-radius: 3%;
    -webkit-animation: infoBar 1.5s linear infinite;
    -moz-animation: infoBar 1.5s linear infinite;
    -ms-animation: infoBar 1.5s linear infinite;
    -o-animation: infoBar 1.5s linear infinite;
    animation: infoBar 1.5s linear infinite;
}

@keyframes infoBar {
    0% {
        box-shadow: 0 0 75px white;
        border: solid .75vh rgba(255, 255, 255, 0.25);
    }
    50% {
        box-shadow: none;
        border: solid .75vh rgba(255, 255, 255, 0.1);
    }
    100% {
        box-shadow: 0 0 100px white;
        border: solid .75vh rgba(255, 255, 255, 0.5);
    }
}

@-webkit-keyframes infoBar {
    0% {
        box-shadow: 0 0 75px white;
        border: solid .75vh rgba(255, 255, 255, 0.25);
    }
    50% {
        box-shadow: none;
        border: solid .75vh rgba(255, 255, 255, 0.1);
    }
    100% {
        box-shadow: 0 0 100px white;
        border: solid .75vh rgba(255, 255, 255, 0.5);
    }
}

#infoSign {
    position: absolute;
    z-index: 1;
    top: 56%;
    left: 84%;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, .25);
    text-shadow: 0 0 10px white;
    border-radius: 15%;
    -webkit-animation: iArrow 1.5s linear infinite;
    -moz-animation: iArrow 1.5s linear infinite;
    -ms-animation: iArrow 1.5s linear infinite;
    -o-animation: iArrow 1.5s linear infinite;
    animation: iArrow 1.5s linear infinite;
    font-size: 2vh;
}

#iArrow {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 10px white;
    font-size: 3vh;
}

@keyframes iArrow {
    0% {
        opacity: 1;
        text-shadow: 0 0 75px white;
        background-color: rgba(0, 0, 0, .4);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 0px white;
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 100px white;
        background-color: rgba(0, 0, 0, .5);
    }
}

@-webkit-keyframes iArrow {
    0% {
        opacity: 1;
        text-shadow: 0 0 75px white;
        background-color: rgba(0, 0, 0, .4);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 0px white;
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 100px white;
        background-color: rgba(0, 0, 0, .5);
    }
}

.playingSong {
    opacity: 0.5;
    -webkit-animation: playingSong 1s linear infinite;
    -moz-animation: playingSong 1s linear infinite;
    -ms-animation: playingSong 1s linear infinite;
    -o-animation: playingSong 1s linear infinite;
    animation: playingSong 1s linear infinite;
}

@keyframes playingSong {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.5;
    }
}

@-webkit-keyframes playingSong {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.75;
    }
}


#banjo {
    top: 66%;
    left: 45%;
    height: 22%;
    width: 15%;
    z-index: 1;
}

#dirty {
    top: 40%;
    left: 50%;
    height: 26%;
    width: 38%;
}

#donate {
    top: 80%;
    left: 57%;
    height: 15%;
    width: 35%;
    z-index: 1;
}

#exit {
    top: 75%;
    left: 39%;
    height: 23%;
    width: 20%;
    z-index: 1;
}

#info {
    top: 50.5%;
    left: 92%;
    height: 16.5%;
    width: 4.5%;
    z-index: 1;
}

#song01 {
    top: 31.5%;
    left: 1%;
    height: 30%;
    width: 35%;
    z-index: 1;
}

#song02 {
    top: 43%;
    left: 29%;
    height: 12%;
    width: 24%;
    z-index: 1;
}

#song03 {
    top: 54.5%;
    left: 1%;
    height: 16%;
    width: 45%;
    z-index: 1;
}

#song04 {
    top: 68%;
    left: 15%;
    height: 9%;
    width: 14%;
    z-index: 1;
}

#song05 {
    top: 75%;
    left: 1%;
    height: 22.5%;
    width: 30%;
    z-index: 1;
}

#song06 {
    top: 64%;
    left: 60%;
    height: 21%;
    width: 15%;
    z-index: 1;
}

#song07 {
    top: 54%;
    left: 56%;
    height: 13%;
    width: 11%;
    z-index: 1;
}

#song08 {
    top: 64%;
    left: 61%;
    height: 33.5%;
    width: 37%;
    z-index: 1;
}

#song09 {
    top: 16%;
    left: 63%;
    height: 21%;
    width: 34.5%;
    z-index: 1;
}

#song10 {
    top: 18%;
    left: 1%;
    height: 12%;
    width: 38%;
    z-index: 1;
}

#song11 {
    top: 31.5%;
    left: 1%;
    height: 27%;
    width: 27%;
    z-index: 1;
}

#song12 {
    top: 31.5%;
    left: 27%;
    height: 10%;
    width: 21%;
    z-index: 1;
}

#song13 {
    top: 31.5%;
    left: 38%;
    height: 30%;
    width: 22%;
    z-index: 1;
}

#song14 {
    top: 31.5%;
    left: 62%;
    height: 30%;
    width: 36%;
    z-index: 1;
}

#song15 {
    top: 63%;
    left: 75%;
    height: 22%;
    width: 18%;
    z-index: 1;
}

#song16 {
    top: 11%;
    left: 50%;
    height: 21%;
    width: 11%;
    z-index: 1;
}

#song17 {
    top: 27%;
    left: 71%;
    height: 19%;
    width: 26.5%;
    z-index: 1;
}

#song18 {
    top: 65%;
    left: 30%;
    height: 20.5%;
    width: 18%;
    z-index: 1;
}

#song19 {
    top: 4%;
    left: 1%;
    height: 26%;
    width: 96.5%;
    z-index: 1;
}

#song20 {
    top: 64%;
    left: 1%;
    height: 33.5%;
    width: 36%;
    z-index: 1;
}