*,
*:before,
*:after {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;

  background: #fdc830; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #f37335,
    #fdc830
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #f37335,
    #fdc830
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

p {
  font-family: 'Kalam', cursive;
  text-align: center;
}

audio {
  margin: 0 auto;
  display: block;
}

#seek-obj {
}

#seek-obj-container {
  padding: 0 15px;
}

#mixtape-vol-1 {
  position: relative;
  display: block;
  width: 147px;
  height: 41px;
  margin: 50px auto;
  border: solid #131a1a;
  border-width: 61px 59px 66px 59px;
  border-radius: 6px;
}
#mixtape-vol-1:before,
#mixtape-vol-1:after {
  content: ' ';
  position: absolute;
  z-index: 2;
  border-radius: 50%;
}
#mixtape-vol-1:before {
  background: #0d0d0b;
  box-shadow: inset 0 0 0 3px #2c2c2c, 244px 0 0 -3px #0d0d0b,
    244px 0 0 0 #2c2c2c, 0 147px 0 -3px #0d0d0b, 0 147px 0 0 #2c2c2c,
    244px 147px 0 -3px #0d0d0b, 244px 147px 0 0 #2c2c2c;
  width: 11px;
  height: 11px;
  top: -56px;
  left: -54px;
}
#mixtape-vol-1:after {
  background: #0d0d0b;
  box-shadow: inset 0 0 0 7px #636665, 204px 0 0 -7px #0d0d0b,
    204px 0 0 0 #636665;
  width: 21px;
  height: 21px;
  top: 81px;
  left: -39px;
}
#mixtape-vol-1 .label {
  position: absolute;
  width: 147px;
  height: 41px;
  top: -53px;
  left: -52px;
  border: solid #ddc997;
  border-width: 53px 52px 24px 52px;
  border-radius: 0 0 15px 15px;
}
#mixtape-vol-1 .label:before,
#mixtape-vol-1 .label:after {
  content: ' ';
  position: absolute;
  z-index: 1;
  top: -53px;
  border: solid 10px transparent;
  border-top-color: #131a1a;
}
#mixtape-vol-1 .label:before {
  left: -52px;
  border-left-color: #131a1a;
}
#mixtape-vol-1 .label:after {
  right: -52px;
  border-right-color: #131a1a;
}
#mixtape-vol-1 .label p {
  position: absolute;
  text-align: center;
  color: #000;
  font-size: 14px;
  width: 147px;
  height: 41px;
  top: -33px;
}
#mixtape-vol-1 .label p:before,
#mixtape-vol-1 .label p:after {
  content: ' ';
  position: absolute;
  z-index: 1;
}
#mixtape-vol-1 .label p:before {
  background: #ca3618;
  width: 52px;
  height: 1px;
  top: 19px;
  left: -52px;
  box-shadow: 0 7px 0 0 #ca3618, 0 14px 0 0 #ca3618, 0 20px 0 0 #ca3618,
    0 21px 0 0 #ca3618, 0 22px 0 0 #ca3618, 0 23px 0 0 #ca3618,
    0 27px 0 0 #ca3618, 0 28px 0 0 #ca3618, 0 29px 0 0 #ca3618,
    0 30px 0 0 #ca3618, 0 34px 0 0 #ca3618, 0 35px 0 0 #ca3618,
    0 36px 0 0 #ca3618, 0 37px 0 0 #ca3618, 199px 0 0 0 #ca3618,
    199px 7px 0 0 #ca3618, 199px 14px 0 0 #ca3618, 199px 20px 0 0 #ca3618,
    199px 21px 0 0 #ca3618, 199px 22px 0 0 #ca3618, 199px 23px 0 0 #ca3618,
    199px 27px 0 0 #ca3618, 199px 28px 0 0 #ca3618, 199px 29px 0 0 #ca3618,
    199px 30px 0 0 #ca3618, 199px 34px 0 0 #ca3618, 199px 35px 0 0 #ca3618,
    199px 36px 0 0 #ca3618, 199px 37px 0 0 #ca3618;
}
#mixtape-vol-1 .label p:after {
  width: 251px;
  height: 3px;
  left: -52px;
  bottom: -44px;
  border-top: solid 7px #ca3617;
  border-bottom: solid 15px #ca3617;
  border-radius: 0 0 15px 15px;
}
#mixtape-vol-1 .details,
#mixtape-vol-1 .details:before {
  position: absolute;
  border-top: solid 0 transparent;
  border-left: solid 11px transparent;
  border-right: solid 11px transparent;
  border-bottom: solid 36px #010000;
}
#mixtape-vol-1 .details {
  width: 160px;
  height: 0;
  top: 71px;
  left: -18px;
}
#mixtape-vol-1 .details:before {
  content: ' ';
  z-index: 1;
  width: 152px;
  height: 0;
  top: 3px;
  left: -7px;
  border-bottom: solid 33px #191917;
}
#mixtape-vol-1 .details:after {
  content: ' ';
  position: absolute;
  background: #232929;
  z-index: 2;
  width: 265px;
  height: 1px;
  top: 25px;
  left: -52px;
  box-shadow: 0 -5px 0 0 #232929, 0 -10px 0 0 #232929, 0 -15px 0 0 #232929,
    0 -20px 0 0 #232929, 0 -25px 0 0 #232929;
}
#mixtape-vol-1 .tape-wheel {
  position: absolute;
  background: #e6e6e6;
  z-index: -1;
  width: 6px;
  height: 6px;
  top: 17px;
  border: solid 1px #3b3b3b;
  border-radius: 50%;
}

#mixtape-vol-1.mixtape--playing .tape-wheel {
  -moz-animation: tape-wheel 6s linear infinite;
  -webkit-animation: tape-wheel 6s linear infinite;
  animation: tape-wheel 6s linear infinite;
}

#mixtape-vol-1 .tape-wheel.left {
  left: 18px;
  box-shadow: 0 0 0 1px #e6e6e6, 0 0 0 14px #3b3b3b, 0 0 0 15px #e6e6e6,
    0 0 0 16px #3b3b3b, 0 0 0 17px #c8c8c8, 0 0 0 19px #3b3b3b,
    0 0 0 22px #c8c8c8, 0 0 0 25px #3b3b3b, 0 0 0 29px #c8c8c8,
    0 0 0 47px #3b3b3b;
}
#mixtape-vol-1 .tape-wheel.right {
  right: 18px;
  box-shadow: 0 0 0 1px #e6e6e6, 0 0 0 14px #3b3b3b, 0 0 0 15px #e6e6e6,
    0 0 0 16px #3b3b3b, 0 0 0 17px #c8c8c8, 0 0 0 19px #3b3b3b,
    0 0 0 22px #c8c8c8, 0 0 0 25px #3b3b3b, 0 0 0 29px #c8c8c8,
    0 0 0 37px #3b3b3b;
}
#mixtape-vol-1 .tape-wheel span,
#mixtape-vol-1 .tape-wheel span:before,
#mixtape-vol-1 .tape-wheel span:after {
  position: absolute;
  width: 4px;
  height: 28px;
  border-top: solid 4px #e6e6e6;
  border-bottom: solid 4px #e6e6e6;
}
#mixtape-vol-1 .tape-wheel span {
  top: -15px;
  left: 1px;
}
#mixtape-vol-1 .tape-wheel span:before {
  content: ' ';
  transform: rotateZ(120deg);
  transform-origin: center center 0;
  top: -4px;
  left: 0;
}
#mixtape-vol-1 .tape-wheel span:after {
  content: ' ';
  transform: rotateZ(240deg);
  transform-origin: center center 0;
  top: -4px;
  left: 0;
}
#mixtape-vol-1 .tape-wheel span + span,
#mixtape-vol-1 .tape-wheel span + span:before,
#mixtape-vol-1 .tape-wheel span + span:after {
  width: 5px;
  height: 48px;
  border-top: solid 6px #c8c8c8;
  border-bottom: solid 6px #c8c8c8;
}
#mixtape-vol-1 .tape-wheel span + span {
  top: -28px;
  left: 0;
}
#mixtape-vol-1 .tape-wheel span + span:before {
  content: ' ';
  transform: rotateZ(120deg);
  transform-origin: center center 0;
  top: -6px;
  left: 0;
}
#mixtape-vol-1 .tape-wheel span + span:after {
  content: ' ';
  transform: rotateZ(240deg);
  transform-origin: center center 0;
  top: -6px;
  left: 0;
}

@-moz-keyframes tape-wheel {
  to {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes tape-wheel {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes tape-wheel {
  to {
    transform: rotateZ(360deg);
  }
}

.sans {
  font-family: Arial, Helvetica, sans-serif;
}