body {
            background-image: linear-gradient(46deg, #ffc919 25%, #ffae00 25%, #ffae00 50%, #ffc919 50%, #ffc919 75%, #ffae00 75%, #ffae00 100%);
            background-size: 55.61px 57.58px;
            animation: scroll 40s infinite linear;
            color: #0c0c0c;
        }
        #controls {
          background-color: #ffe776;
          border:3px solid #0c0c0c;
          padding:9px;
          line-height:20px;
          margin:5px;
          width:175px;
          height:120px;
          position: relative;
          z-index: 88888888888;
        }
        #artist, #title {
          font-family: gabato;
        }
        #title {
          font-size:16px;
        }
#duration {
  border-radius: 0;
  appearance: none;
  width: 90px;
  height: 8px;
  border: 3px solid #0c0c0c;
  background: #ff8c27;
  pointer-events: none;
  filter:drop-shadow(3px 3px #0c0c0c);
}

button {
  border:none;
  background-color:transparent;
    outline: none;
}

/* Thumb: for Chrome, Safari, Edge */
::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border: 3px solid #0c0c0c;
  background: #ffffff;
  box-shadow: none;
}

/* Thumb: for Firefox */
#duration::-moz-range-thumb {
  border-radius: 0;
  width: 24px;
  height: 24px;
  border: 3px solid #0c0c0c;
  background: #ffffff;
  box-shadow: none;
}
        @keyframes scroll {
            0% {
                background-position: 0% 0%;
            }

            100% {
                background-position: 100% 0%;
            }
        }

        @keyframes bounceIn {

            0%,20%,50%,80%,100% {
                transform: translateX(0);
                opacity: 1;
            }
            40% {
                transform: translateX(30px);
            }
            60% {
                transform: translateX(15px);
            }
        }
        #chao {
          width:93px;
          height:111px;
        }
        p {
          margin:0px;
        }
        #play, #prev, #next {
                    font-family:Ibmcga2y;

        }
        #duration-num {
          font-family:Bitpap;
          color:white;
text-shadow: 1px 1px 0px rgba(12, 12, 12, 1),
             1px -1px 0px rgba(12, 12, 12, 1),
             -1px 1px 0px rgba(12, 12, 12, 1),
             -1px -1px 0px rgba(12, 12, 12, 1),
             1px 1px 0px rgba(12, 12, 12, 1),
             1px 1px 0px rgba(12, 12, 12, 1),
             -1px 1px 0px rgba(12, 12, 12, 1),
             -1px -1px 0px rgba(12, 12, 12, 1),
             -1px -1px 0px rgba(12, 12, 12, 1),
             1px -1px 0px rgba(12, 12, 12, 1),
             0px -1px 0px rgba(12, 12, 12, 1),
             -1px 0px 0px rgba(12, 12, 12, 1),
             0px 1px 0px rgba(12, 12, 12, 1),
             1px 0px 0px rgba(12, 12, 12, 1);
             }

        #artist {
          color:orangered;
          text-shadow:2px 2px #ffb337;
        }
        #play, #prev, #next, #title {
          color:white;
text-shadow: 2px 2px 0px rgba(12, 12, 12, 1),
             2px -2px 0px rgba(12, 12, 12, 1),
             -2px 2px 0px rgba(12, 12, 12, 1),
             -2px -2px 0px rgba(12, 12, 12, 1),
             2px 1px 0px rgba(12, 12, 12, 1),
             1px 2px 0px rgba(12, 12, 12, 1),
             -2px 1px 0px rgba(12, 12, 12, 1),
             -2px -1px 0px rgba(12, 12, 12, 1),
             -1px -2px 0px rgba(12, 12, 12, 1),
             1px -2px 0px rgba(12, 12, 12, 1),
             0px -2px 0px rgba(12, 12, 12, 1),
             -2px 0px 0px rgba(12, 12, 12, 1),
             0px 2px 0px rgba(12, 12, 12, 1),
             2px 0px 0px rgba(12, 12, 12, 1);
             }
             #play:hover, #prev:hover, #next:hover {
               color:yellow;
             }
        #play {
          font-family:tahoma;
          font-weight: bold;
        }
        .body {
            margin-left: auto;
            margin-right: auto;
            width: 900px;
        }

        .container {
            border: 5px solid #0c0c0c;
            width: 600px;
            height:699px;
            background-color: white;
            box-shadow: 10px 10px #0c0c0c, 9px 9px #0c0c0c, 8px 8px #0c0c0c, 7px 7px #0c0c0c, 6px 6px #0c0c0c, 5px 5px #0c0c0c, 4px 4px #0c0c0c, 3px 3px #0c0c0c, 2px 2px #0c0c0c, 1px 1px #0c0c0c
                /*20px 20px #ff8219;*/
        }

        .nav {
            width: 200px;
            height:575px;
            position:relative;
background-image: linear-gradient(0deg, #ff9914 25%, #ff5e00 25%, #ff5e00 50%, #ff9914 50%, #ff9914 75%, #ff5e00 75%, #ff5e00 100%);
background-size: 64.00px 64.00px;        }
        .flex {
            height:700px;
        }
        .thing {
        position:absolute;
        width:100%;
        height:100%;
        background-size:164px;
        background-image:url("/resources/stinky.png");
        background-repeat: repeat-y;
        background-position:right;
        animation:thing 2s infinite linear;
        transform:scaleX(-1);
      }
      @keyframes thing {
        0% {
          background-position:right 0px;
        }
        100% {
          background-position:right -256px;
        }
      }
        .contents {
            width: 400px;
        }

        h1 {
            font-family: gabato;
            font-size: 64px;
            margin: 0px;
            color: white;
            text-shadow: 3px 3px #0c0c0c, -3px -3px #0c0c0c, 3px -3px #0c0c0c, -3px 3px #0c0c0c, 1px 4px #0c0c0c, 4px 1px #0c0c0c, -4px 1px #0c0c0c, -1px 4px #0c0c0c, 0px -4px #0c0c0c;
            filter: drop-shadow(5px 5px #0c0c0c);
        }

        #pentumbra {
            color: white;
        }

        .active {
            background-image: linear-gradient(45deg, #56a5ff 25%, #7fb2ff 25%, #7fb2ff 50%, #56a5ff 50%, #56a5ff 75%, #7fb2ff 75%, #7fb2ff 100%);
            background-size: 14.14px 14.14px;
            border-left: none;
            border-bottom: 3px #111111 solid;
            border-top: 3px #1ac0ff solid;
            border-right: 3px #1ac0ff solid;
            color: #00159c;
            animation: scroll 20s infinite linear;

            text-shadow: -1px 1px #0293f8;
            transition:width 0.2s;
            padding-left:10px;
            width:calc(100% + 20px);
        }

        .active:hover {
            animation: 0.2s blinktoo ease infinite;
            background-color: #a5a5a5;
            background-image: none;
        }

        a li {
            list-style-type: none;
            background-image: linear-gradient(45deg, #a5a5a5 25%, #b3b3b3 25%, #b3b3b3 50%, #a5a5a5 50%, #a5a5a5 75%, #b3b3b3 75%, #b3b3b3 100%);
            background-size: 14.14px 14.14px;
            animation: scroll 20s infinite linear;
            border-left: none;
            border-bottom: 3px #111111 solid;
            border-top: 3px #8c8c8c solid;
            border-right: 3px #8c8c8c solid;
            font-size: 16px;
            color: #686868;
            text-shadow: -1px 1px #8c8c8c;
            font-family: Kemco;
            line-height: 25px;
        }
        .yellow {
          background-color:#ffd869;
          width:100%;
          height:120px;
          border-bottom: 5px solid #0c0c0c;
        }

        a:hover li {
            animation: 0.2s blinktoo ease infinite;
            background-color: #ffce5d;
            background-image:none;
            border-left: none;
            border-bottom: 3px #fe9c0e solid;
            border-top: 3px #ffe400 solid;
            border-right: 3px #ffe400 solid;
            color: #b64b00;
            text-shadow: -1px 1px #fa9f00;
            transition:0.2s width;
        }
        ul {
          position:Relative;
          z-index:9999999;
        }
        iframe {
          position:relative;
          z-index:99;
        }
        @keyframes blinktoo {
            0% {
                background-color: #ffe056;
            }

            50% {
                background-color: #ffbf48;
            }

            100% {
                background-color: #ffe056;
            }
        }

        @keyframes blink {
            0% {
                background-color: #b7b7b7;
            }

            50% {
                background-color: #c4c4c4;
            }

            100% {
                background-color: #b7b7b7;
            }
        }

        .active:hover {
            animation: 0.2 blink ease infinite;
        }
        a li:hover {
                      width:calc(100%+7px);
            transition:0.2s width;
        }
        a li {
            list-style-type: none;
            background-color: #a5a5a5;
            border-left: none;
            border-bottom: 3px #111111 solid;
            border-top: 3px #8c8c8c solid;
            border-right: 3px #111111 solid;
            font-size: 16px;
            color: #686868;
            text-shadow: -1px 1px #8c8c8c;
            font-family: Kemco;
            line-height: 25px;
            border-radius: 0px 5px 5px 0px;
            transition:width 0.2s;
            width:100%;
        }
        li span {
          font-weight:bold;
        }
        a li p {
            height: 24px;

            vertical-align: middle;

            padding-left: 5px;
            margin: 0px;

        }

        a li p:hover:after {
            content: "◄◄◄";
            color: yellow;
          font-weight:bold;
            margin-left: 3px;
            font-family: Ibmcga2y;
        }
        .active p:after {
            content: "!!!";
            color: yellow;
          font-weight:bold;
            margin-left: 3px;
            font-family: Ibmcga2y;
        }

        a {
            text-decoration: none;

        }