@font-face {
    font-family: DePixel;
    src: url(DePixel.ttf);
}

html {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #000;
}

body {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    top: 0%;
    left: 0%;
    overflow: hidden;
    cursor: url("/retrOS/img/mouseIcon.png"), default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#windowFullContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    transition: left 1s, width 1s;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#pageContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    transition: left 1s, width 1s;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#clickEnter {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 30px;
    padding-top: 20px;
    font-size: 1.8rem;
    font-family: DePixel;
    text-align: center;
    color: #fff;
    z-index: 2;
}

#black {
    position: absolute;
    width: 120%;
    height: 200%;
    top: 25px;
    left: -10%;
    padding-top: 20px;
    font-size: 1.8rem;
    font-family: DePixel;
    text-align: center;
    color: #fff;
    filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.5));
    z-index: 1;
}

#loadBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    object-fit: cover;
    overflow: hidden;l
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    opacity: 0.7;
    z-index: 1;
}

#loaderContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: #000;
    z-index: 99;
}

/* #loadLogo {
    position: absolute;
    height: auto;
    width: 30%;
    top: 20%;
    left: 35%;
    z-index: 99;
} */

#loader {
    position: absolute;
    height: 47.5px;
    width: 350px;
    top: calc(45% - 60px);
    left: calc(50% - 175px);
    z-index: 99;
}

#loadBar {
    position: absolute;
    height: 5px;
    width: 50%;
    bottom: -70px;
    left: 25%;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    display: none;
    z-index: 99;
}

#progress {
    position: absolute;
    height: 100%;
    width: 0%;
    transition: width 2s;
    background-color: #fff;
    z-index: 99;
}

#loadGif {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    top: -7.5%;
}

#logo {
    position: absolute;
    height: 45px;
    width: auto;
    top: 20px;
    left: 20px;
    z-index: 1;
}

#lifestyleMobile {
    position: absolute;
    width: 0%;
    height: 0%;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transition: width 1s, height 1s, top 1s, left 1s;
    margin-top: -2px;
    margin-left: -2px;
    z-index: 9999;
}

#homeScreen {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    opacity: 0.85;
    z-index: 1;
}

#background {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    object-fit: cover;
    overflow: hidden;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    opacity: 0.985;
    z-index: 1;
}

#dragBox {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(60, 199, 254, 0.406);
    transition: width 0.1s, height 0.1s;
    display: none;
    z-index: 3;
}

#dragBoxLoad {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(60, 199, 254, 0.406);
    transition: width 0.1s, height 0.1s;
    display: none;
    z-index: 999;
}

#retroText {
    position: absolute;
    width: 50%;
    height: 16px;
    line-height: 16px;
    right: 20px;
    bottom: 45px;
    font-size: 0.8rem;
    font-family: DePixel;
    text-align: right;
    color: #fff;
    z-index: 1;
}

/* #learnMore {
    position: absolute;
    width: 20%;
    height: 16px;
    line-height: 16px;
    right: 20px;
    bottom: 47.5px;
    font-size: 0.7rem;
    font-family: DePixel;
    text-align: right;
    color: #fff;
    z-index: 1;
} */

#taskBar {
    position: absolute;
    width: 100%;
    height: 35px;
    bottom: 0px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    opacity: 1;
    /*filter: brightness(0%);*/
    z-index: 98;
}

#menuTime {
    position: absolute;
    width: 20%;
    height: 16px;
    line-height: 16px;
    right: 135px;
    bottom: 0px;
    font-size: 0.7rem;
    font-family: DePixel;
    text-align: right;
    color: #000;
    z-index: 99;
}

#menuDate {
    position: absolute;
    width: 30%;
    height: 16px;
    line-height: 16px;
    right: 30px;
    bottom: 0px;
    font-size: 0.7rem;
    font-family: DePixel;
    text-align: right;
    color: #000;
    z-index: 99;
}

#batteryIcon {
    position: absolute;
    width: auto;
    height: 10px;
    right: 220px;
    bottom: 15px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 99;
}

#popup {
    position: absolute;
    width: 160px;
    height: 200px;
    left: 10px;
    bottom: 60px;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    background-color: rgb(198, 198, 198);
    display: none;
    z-index: 98;
}

#menuButton {
    position: absolute;
    width: 70px;
    height: 70px;
    bottom: -17.5px;
    left: -10px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 99;
}

#browserButton {
    position: absolute;
    width: 95px;
    height: 150px;
    top: 35px;
    right: -30%;
    transition: right 1s, left 1s;
    z-index: 1;
}

#browserIcon {
    position: absolute;
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#browserText {
    position: absolute;
    width: 115%;
    height: auto;
    left: -7.5%;
    color: #fff;
    text-align: center;
    top: 70px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#browserHighlight {
    position: absolute;
    width: 115%;
    height: 155px;
    top: -7.5%;
    left: -7.5%;
    background-color: rgba(46, 136, 175, 0.568);
    z-index: 10;
}

#fileButton {
    position: absolute;
    width: 95px;
    height: 150px;
    top: 200px;
    right: -30%;
    transition: right 1.5s, left 1.5s;
    z-index: 1;
}

#fileIcon {
    position: absolute;
    width: 65%;
    height: auto;
    left: 17.5%;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#fileText {
    position: absolute;
    width: 115%;
    height: auto;
    left: -7.5%;
    color: #fff;
    text-align: center;
    top: 85px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#fileHighlight {
    position: absolute;
    width: 115%;
    height: 155px;
    top: -7.5%;
    left: -7.5%;
    background-color: rgba(46, 136, 175, 0.568);
    z-index: 10;
}

#folderButton {
    position: absolute;
    width: 95px;
    height: 150px;
    top: 365px;
    right: -30%;
    transition: right 2s;
    z-index: 1;
}

#folderIcon {
    position: absolute;
    width: 90%;
    height: auto;
    left: 5%;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#folderText {
    position: absolute;
    width: 115%;
    height: auto;
    left: -7.5%;
    color: #fff;
    text-align: center;
    top: 65px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#folderHighlight {
    position: absolute;
    width: 115%;
    height: 140px;
    top: -7.5%;
    left: -7.5%;
    background-color: rgba(46, 136, 175, 0.568);
    z-index: 10;
}

#musicButton {
    position: absolute;
    width: 95px;
    height: 150px;
    top: 520px;
    right: -30%;
    transition: right 2.5s;
    z-index: 1;
}

#musicIcon {
    position: absolute;
    width: 60%;
    height: auto;
    left: 20%;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#musicText {
    position: absolute;
    width: 115%;
    height: auto;
    left: -7.5%;
    color: #fff;
    text-align: center;
    top: 90px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 1;
}

#musicHighlight {
    position: absolute;
    width: 115%;
    height: 160px;
    top: -7.5%;
    left: -7.5%;
    background-color: rgba(46, 136, 175, 0.568);
    z-index: 10;
}

#bottomBar {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: -10%;
    transition: bottom 2s;
    opacity: 0.8;
    z-index: 99;
}

#browserWindow {
    position: absolute;
    width: 70%;
    height: 80%;
    top: 6.5%;
    left: 12.5%;
    background-color: rgb(129, 129, 129, 0.7);
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    filter: drop-shadow(10px 10px 0px #000);
    /*transition: width 0.001s, height 0.001s, top 0.001s, left 0.001s;*/
    z-index: 5;
}

#deckWindow {
    position: absolute;
    width: 50%;
    height: 85%;
    top: 5%;
    left: 22.5%;
    background-color: rgb(129, 129, 129, 0.7);
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    overflow: hidden;
    filter: drop-shadow(10px 10px 0px #000);
    /*transition: width 0.001s, height 0.001s, top 0.001s, left 0.001s;*/
    z-index: 5;
}

#folderWindow {
    position: absolute;
    width: 80%;
    height: 60%;
    top: 15%;
    left: 10%;
    background-color: rgb(129, 129, 129, 0.7);
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    overflow: hidden;
    filter: drop-shadow(10px 10px 0px #000);
    /*transition: width 0.001s, height 0.001s, top 0.001s, left 0.001s;*/
    z-index: 5;
}

#musicWindow {
    position: absolute;
    width: 80%;
    height: 30%;
    top: 25%;
    left: 7.5%;
    background-color: rgb(129, 129, 129, 0.7);
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    overflow: hidden;
    filter: drop-shadow(10px 10px 0px #000);
    /*transition: width 0.001s, height 0.001s, top 0.001s, left 0.001s;*/
    z-index: 5;
}

.windowBar {
    position: absolute;
    width: 100%;
    height: 40px;
    top: -3px;
    left: -3px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    opacity: 0.7;
    z-index: 5;
}

.barImg {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

.barLinesLeft {
    position: absolute;
    width: calc(50% - 160px);
    height: 60%;
    top: 20%;
    left: 50px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

.barLinesRight {
    position: absolute;
    width: calc(50% - 235px);
    height: 60%;
    top: 20%;
    right: 125px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

.barTitle {
    position: absolute;
    width: 190px;
    height: 40px;
    line-height: 20px;
    left: calc(50% - 95px);
    font-size: 0.9rem;
    font-family: DePixel;
    text-align: center;
    color: #000;
    z-index: 10;
}

#barIconBrowser {
    position: absolute;
    width: auto;
    height: 30px;
    top: 5px;
    left: 7.5px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

#barIconFile {
    position: absolute;
    width: auto;
    height: 27.5px;
    top: 6px;
    left: 10px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

#barIconFolder {
    position: absolute;
    width: auto;
    height: 20px;
    top: 10px;
    left: 10px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

#barIconMusic {
    position: absolute;
    width: auto;
    height: 30px;
    top: 5px;
    left: 12.5px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

.minimizeButton {
    position: absolute;
    width: 30.5px;
    height: 30px;
    top: 5px;
    right: 76px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    opacity: 0.2;
    z-index: 5;
}

.maximizeButton {
    position: absolute;
    width: 30.5px;
    height: 30px;
    top: 5px;
    right: 40.5px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    display: block;
    z-index: 5;
}

#maximizeFolder {
    opacity: 0.2;
}

#maximizeMusic {
    opacity: 0.2;
}

.restoreButton {
    position: absolute;
    width: 30.5px;
    height: 30px;
    top: 5px;
    right: 40.5px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    display: none;
    z-index: 5;
}

.closeButton {
    position: absolute;
    width: 30.5px;
    height: 30px;
    top: 5px;
    right: 5px;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    z-index: 5;
}

.site {
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 80px);
    bottom: 15px;
    left: 15px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: #000;
    overflow: hidden;
    display: none;
    opacity: 1;
    z-index: 5;
}

.windowContainer {
    position: absolute;
    width: calc(100% - 30px);
    height: calc(100% - 75px);
    bottom: 15px;
    left: 15px;
    z-index: 5;
}

#playingDemo {
    position: absolute;
    width: 75%;
    height: 100%;
    top: -3px;
    left: -3px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: #000;
    overflow: hidden;
    z-index: 5;
}

#demos {
    position: absolute;
    width: calc(25% - 17.5px);
    height: 100%;
    top: -3px;
    right: -3px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: #fff;
    overflow: hidden;
    z-index: 5;
}

/* #demo1 {
    position: absolute;
    width: calc(100% - 16px);
    height: calc(33% - 12px);
    top: 5px;
    left: 5px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: rgb(173, 173, 173);
    overflow: hidden;
    z-index: 5;
}

#demo2 {
    position: absolute;
    width: calc(100% - 16px);
    height: calc(33% - 12px);
    top: calc(33% + 5px);
    left: 5px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: #fff;
    overflow: hidden;
    z-index: 5;
}

#demo3 {
    position: absolute;
    width: calc(100% - 16px);
    height: calc(33% - 12px);
    top: calc(66% + 5px);
    left: 5px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: #fff;
    overflow: hidden;
    z-index: 5;
} */

#playingSong {
    position: absolute;
    width: 65%;
    height: 100%;
    top: -3px;
    right: -3px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: #fff;
    overflow: hidden;
    z-index: 5;
}

#songTitle {
    position: absolute;
    width: 100%;
    height: 40px;
    line-height: 20px;
    top: 12.5%;
    font-size: 1rem;
    font-family: DePixel;
    text-align: center;
    color: #000;
    z-index: 10;
}

#songArtist {
    position: absolute;
    width: 100%;
    height: 40px;
    line-height: 20px;
    top: 30%;
    font-size: 0.8rem;
    font-family: DePixel;
    text-align: center;
    color: #000;
    z-index: 10;
}

#songBar {
    position: absolute;
    width: 90%;
    height: 5px;
    bottom: 25%;
    right:  5%;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    z-index: 5;
}

#songPoint {
    position: absolute;
    width: 15px;
    height: 15px;
    bottom: -5px;
    left:  25%;
    background-color: #000;
    overflow: hidden;
    transform: rotate(45deg);
    z-index: 5;
}

#controls {
    position: absolute;
    width: calc(40% - 60px);
    height: 100%;
    top: -3px;
    left: -3px;
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    background-color: #fff;
    overflow: hidden;
    z-index: 5;
}

#playButton {
    position: absolute;
    width: 80px;
    height: 80px;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    z-index: 5;
}

#pauseButton {
    position: absolute;
    width: 80px;
    height: 80px;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    z-index: 5;
}

#previousButton {
    position: absolute;
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    left: calc(20% - 30px);
    z-index: 5;
}


#nextButton {
    position: absolute;
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    right: calc(20% - 30px);
    z-index: 5;
}

@media only screen and (max-width: 600px) {
    #clickEnter {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 30px;
        padding-top: 20px;
        font-size: 1.2rem;
        font-family: DePixel;
        text-align: center;
        color: #fff;
        z-index: 2;
    }
    
    #black {
        position: absolute;
        width: 70%;
        height: 140%;
        top: 25px;
        left: 15%;
        padding-top: 20px;
        font-size: 1.8rem;
        font-family: DePixel;
        text-align: center;
        color: #fff;
        filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.5));
        z-index: 1;
    }

    #loadBar {
        position: absolute;
        height: 5px;
        width: 50%;
        bottom: -40px;
        left: 25%;
        border-width: 2px;
        border-style: solid;
        border-color: #fff;
        display: none;
        z-index: 99;
    }

    #browserButton {
        position: absolute;
        width: 90px;
        height: 100px;
        top: 180px;
        left: -30%;
        transition: right 1s, left 1s;
        z-index: 1;
    }

    #browserText {
        position: absolute;
        width: 115%;
        height: auto;
        left: -7.5%;
        color: #fff;
        text-align: center;
        top: 67.5px;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        z-index: 1;
    }

    #browserHighlight {
        position: absolute;
        width: 115%;
        height: 145px;
        top: -7.5%;
        left: -7.5%;
        background-color: rgba(46, 136, 175, 0.568);
        z-index: 10;
    }

    #fileButton {
        position: absolute;
        width: 90px;
        height: 150px;
        top: 355px;
        left: -30%;
        transition: right 1.5s, left 1.5s;
        z-index: 1;
    }
    
    #fileText {
        position: absolute;
        width: 115%;
        height: auto;
        left: -7.5%;
        color: #fff;
        text-align: center;
        top: 80px;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        z-index: 1;
    }
    
    #fileHighlight {
        position: absolute;
        width: 115%;
        height: 145px;
        top: -7.5%;
        left: -7.5%;
        background-color: rgba(46, 136, 175, 0.568);
        z-index: 10;
    }
    
    #folderButton {
        position: absolute;
        width: 90px;
        height: 150px;
        top: 180px;
        right: -30%;
        transition: right 2s;
        z-index: 1;
    }
    
    #folderText {
        position: absolute;
        width: 115%;
        height: auto;
        left: -7.5%;
        color: #fff;
        text-align: center;
        top: 62.5px;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        z-index: 1;
    }
    
    #folderHighlight {
        position: absolute;
        width: 115%;
        height: 130px;
        top: -7.5%;
        left: -7.5%;
        background-color: rgba(46, 136, 175, 0.568);
        z-index: 10;
    }
    
    #musicButton {
        position: absolute;
        width: 87.5px;
        height: 150px;
        top: 355px;
        right: -30%;
        transition: right 2.5s;
        z-index: 1;
    }
    
    #musicText {
        position: absolute;
        width: 115%;
        height: auto;
        left: -7.5%;
        color: #fff;
        text-align: center;
        top: 82.5px;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        z-index: 1;
    }
    
    #musicHighlight {
        position: absolute;
        width: 115%;
        height: 142.5px;
        top: -7.5%;
        left: -7.5%;
        background-color: rgba(46, 136, 175, 0.568);
        z-index: 10;
    }
}