@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto:500,700");
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #8fe2ec;
  background-color: black;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/dotnoise-light-grey.png");
  animation: static 2s steps(1) infinite;
}

.grain {
  position: fixed;
  width: 100%;
  height: 100%;
  animation: static 10s steps(1) infinite;
  opacity: 0.4;
  z-index: 11;
}

@keyframes static {
  0% {
    background-position: 3000% 2800%;
  }
  1% {
    background-position: 200% 5600%;
  }
  2% {
    background-position: 6100% 7900%;
  }
  3% {
    background-position: 9700% 5300%;
  }
  4% {
    background-position: 9100% 3000%;
  }
  5% {
    background-position: 9100% 2500%;
  }
  6% {
    background-position: 3300% 2300%;
  }
  7% {
    background-position: 3200% 7800%;
  }
  8% {
    background-position: 6800% 5200%;
  }
  9% {
    background-position: 9400% 5200%;
  }
  10% {
    background-position: 500% 7000%;
  }
  11% {
    background-position: 4700% 3300%;
  }
  12% {
    background-position: 1600% 9500%;
  }
  13% {
    background-position: 6700% 6500%;
  }
  14% {
    background-position: 4000% 300%;
  }
  15% {
    background-position: 5800% 9700%;
  }
  16% {
    background-position: 3400% 7100%;
  }
  17% {
    background-position: 1900% 6600%;
  }
  18% {
    background-position: 8300% 3900%;
  }
  19% {
    background-position: 5300% 9400%;
  }
  20% {
    background-position: 3100% 2100%;
  }
  21% {
    background-position: 5500% 5600%;
  }
  22% {
    background-position: 1200% 3200%;
  }
  23% {
    background-position: 9500% 9000%;
  }
  24% {
    background-position: 2100% 3400%;
  }
  25% {
    background-position: 5100% 5100%;
  }
  26% {
    background-position: 700% 6400%;
  }
  27% {
    background-position: 3500% 8600%;
  }
  28% {
    background-position: 7200% 700%;
  }
  29% {
    background-position: 1700% 1000%;
  }
  30% {
    background-position: 3800% 2000%;
  }
  31% {
    background-position: 9100% 3400%;
  }
  32% {
    background-position: 8100% 5400%;
  }
  33% {
    background-position: 700% 1600%;
  }
  34% {
    background-position: 5700% 2400%;
  }
  35% {
    background-position: 7900% 3000%;
  }
  36% {
    background-position: 3100% 4700%;
  }
  37% {
    background-position: 3500% 9400%;
  }
  38% {
    background-position: 9400% 3800%;
  }
  39% {
    background-position: 9700% 400%;
  }
  40% {
    background-position: 9400% 5500%;
  }
  41% {
    background-position: 400% 1200%;
  }
  42% {
    background-position: 4200% 700%;
  }
  43% {
    background-position: 5400% 6800%;
  }
  44% {
    background-position: 3600% 4300%;
  }
  45% {
    background-position: 2700% 7500%;
  }
  46% {
    background-position: 2700% 3500%;
  }
  47% {
    background-position: 200% 6600%;
  }
  48% {
    background-position: 8700% 9500%;
  }
  49% {
    background-position: 8700% 5300%;
  }
  50% {
    background-position: 800% 3700%;
  }
  51% {
    background-position: 5500% 9800%;
  }
  52% {
    background-position: 3900% 2400%;
  }
  53% {
    background-position: 1500% 3600%;
  }
  54% {
    background-position: 3500% 6100%;
  }
  55% {
    background-position: 100% 6000%;
  }
  56% {
    background-position: 3900% 9800%;
  }
  57% {
    background-position: 800% 6300%;
  }
  58% {
    background-position: 8200% 8400%;
  }
  59% {
    background-position: 6000% 1000%;
  }
  60% {
    background-position: 2400% 4400%;
  }
  61% {
    background-position: 9600% 9200%;
  }
  62% {
    background-position: 4600% 3700%;
  }
  63% {
    background-position: 1500% 4600%;
  }
  64% {
    background-position: 6100% 800%;
  }
  65% {
    background-position: 7300% 4500%;
  }
  66% {
    background-position: 3500% 7200%;
  }
  67% {
    background-position: 200% 3100%;
  }
  68% {
    background-position: 1900% 5000%;
  }
  69% {
    background-position: 4400% 300%;
  }
  70% {
    background-position: 6000% 9900%;
  }
  71% {
    background-position: 6400% 1000%;
  }
  72% {
    background-position: 3300% 2700%;
  }
  73% {
    background-position: 5000% 2300%;
  }
  74% {
    background-position: 3000% 5700%;
  }
  75% {
    background-position: 500% 1400%;
  }
  76% {
    background-position: 7800% 7600%;
  }
  77% {
    background-position: 4100% 600%;
  }
  78% {
    background-position: 8700% 3200%;
  }
  79% {
    background-position: 6800% 4100%;
  }
  80% {
    background-position: 9600% 8800%;
  }
  81% {
    background-position: 3900% 8600%;
  }
  82% {
    background-position: 7600% 8300%;
  }
  83% {
    background-position: 9200% 3900%;
  }
  84% {
    background-position: 8800% 7700%;
  }
  85% {
    background-position: 6600% 2000%;
  }
  86% {
    background-position: 7200% 9700%;
  }
  87% {
    background-position: 2800% 1200%;
  }
  88% {
    background-position: 1300% 8000%;
  }
  89% {
    background-position: 2900% 5400%;
  }
  90% {
    background-position: 7000% 9000%;
  }
  91% {
    background-position: 300% 2800%;
  }
  92% {
    background-position: 8200% 4900%;
  }
  93% {
    background-position: 6700% 8300%;
  }
  94% {
    background-position: 1100% 7900%;
  }
  95% {
    background-position: 3100% 6700%;
  }
  96% {
    background-position: 800% 300%;
  }
  97% {
    background-position: 4100% 400%;
  }
  98% {
    background-position: 7300% 8900%;
  }
}
.cassette {
  width: 554px;
  height: 350px;
  background: #4b4b56;
  border-radius: 10px;
  border: 4px solid #353535;
  position: relative;
}
@media (max-width: 600px) {
  .cassette {
    width: 300px;
    height: 190px;
    font-size: 0.55em;
  }
}
.cassette:after {
  display: block;
  content: "";
  width: 104%;
  height: 30%;
  margin-left: -2%;
  background: #4b4b56;
  border-radius: 10px;
  bottom: 7%;
  position: absolute;
  z-index: -1;
  border: 4px solid #353535;
}
.cassette:before {
  display: block;
  content: "";
  width: 89%;
  height: 4px;
  margin: auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  top: 3%;
  position: relative;
}
.cassette .label {
  width: 90%;
  height: 64%;
  position: relative;
  margin: auto;
  top: 7%;
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px #353535;
  background: linear-gradient(#e6584c 8%, #f8f8f8 8%, #f8f8f8 30%, #484848 30%, #484848 31.5%, #f8f8f8 31.5%, #f8f8f8 36%, #484848 36%, #484848 37.5%, #f8f8f8 37.5%, #f8f8f8 39%, #484848 39%, #484848 40.5%, #f8f8f8 40.5%, #f8f8f8 42%, #484848 42%, #484848 43.5%, #f8f8f8 43.5%, #f8f8f8 45%, #484848 45%, #484848 46.5%, #f8f8f8 46.5%, #f8f8f8 48%, #484848 48%, #484848 49.5%, #f8f8f8 49.5%, #f8f8f8 51%, #484848 51%, #484848 52.5%, #f8f8f8 52.5%, #f8f8f8 54%, #484848 54%, #484848 55.5%, #f8f8f8 55.5%, #f8f8f8 57%, #484848 57%, #484848 58.5%, #f8f8f8 58.5%, #f8f8f8 60%, #484848 60%, #484848 61.5%, #f8f8f8 61.5%, #f8f8f8 63%, #484848 63%, #484848 64.5%, #f8f8f8 64.5%, #f8f8f8 66%, #484848 66%, #484848 67.5%, #f8f8f8 67.5%, #f8f8f8 69%, #484848 69%, #484848 70.5%, #f8f8f8 70.5%, #f8f8f8 72%, #484848 72%, #484848 73.5%, #f8f8f8 73.5%, #f8f8f8 75%, #484848 75%, #484848 76.5%, #f8f8f8 76.5%, #f8f8f8 78%, #484848 78%, #484848 79.5%, #f8f8f8 79.5%, #f8f8f8 81%, #484848 81%, #484848 82.5%);
}
.cassette .label:before {
  position: absolute;
  display: block;
  top: 12%;
  left: 3%;
  content: "B";
  padding: 3px;
  text-align: center;
  width: 1.3em;
  height: 1.3em;
  color: #f8f8f8;
  font-weight: bold;
  font-size: 1.4em;
  background: #4b4b56;
  border-radius: 1px;
}
.cassette .label:after {
  position: absolute;
  display: block;
  content: " ☐︎IN ☒︎OUT";
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  font-size: 0.9em;
  top: 22%;
  right: 3%;
  color: #4b4b56;
}
.cassette .label .cutout {
  width: 70%;
  height: 46%;
  position: relative;
  margin: auto;
  top: 36%;
  background: #4b4b56;
  border-radius: 3px;
  box-shadow: inset 0 0 0 4px #353535;
}
.cassette .label .cutout:before {
  position: absolute;
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85em;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  bottom: -25%;
}
.cassette .label .cutout:after {
  position: absolute;
  display: block;
  content: "A 60";
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5em;
  font-weight: bold;
  top: 100%;
  right: 0;
  background: #e6584c;
  background-image: linear-gradient(90deg, #e6584c 44%, rgba(255, 255, 255, 0.8) 44%, rgba(255, 255, 255, 0.8) 45%, #e6584c 45%);
  height: 36%;
  padding: 1.2% 5%;
  box-shadow: inset 0 0 0 8px #e6584c;
  font-family: "Roboto", sans-serif;
}
.cassette .label .cutout .reel_hole {
  position: absolute;
  background: #adadad;
  width: 20%;
  top: 15%;
  border: 3px solid #353535;
  box-shadow: 0 0 0 3px #4b4b56, 0 0 0 5px #353535;
  border-radius: 50%;
  right: 5.5%;
}
.cassette .label .cutout .reel_hole:after {
  content: "";
  display: block;
  padding-bottom: 100%;
  box-shadow: inset 0 0 0 6px #adadad;
  background: #353535;
  border-radius: 50%;
}
.cassette .label .cutout .reel_hole:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #8fe2ec;
  transform: scale(0.75);
  z-index: 10;
}
.cassette .label .cutout .reel_hole:first-of-type {
  left: 5.5%;
}
.cassette .label .cutout .reel_hole .gear {
  position: absolute;
  width: 14%;
  height: 86%;
  background: #8fe2ec;
  top: 50%;
  left: 50%;
  margin-left: -7%;
  margin-top: -43%;
  box-shadow: 0 0 0 2px #353535;
  animation: gears 3.5s linear infinite alternate;
}
.cassette .label .cutout .reel_hole .gear:before, .cassette .label .cutout .reel_hole .gear:after {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #8fe2ec;
  top: 0;
  left: 0;
  box-shadow: 0 0 0 2px #353535;
  transform: rotate(240deg);
}
.cassette .label .cutout .reel_hole .gear:after {
  transform: rotate(120deg);
  width: 220%;
  top: 2%;
  left: -75%;
  background: none;
  box-shadow: -2px -2px 0 0 #353535;
  background-size: 100% 50%, 50% 100%;
  background-repeat: no-repeat;
}
@keyframes gears {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(2160deg);
  }
}
.cassette .label .cutout .window {
  position: absolute;
  background: #8fe2ec;
  width: 40%;
  height: 68%;
  top: 15%;
  left: 30%;
  border: 3px solid #353535;
  overflow: hidden;
}
.cassette .label .cutout .window:after {
  display: block;
  position: absolute;
  background: linear-gradient(transparent 13%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0.4) 24%, transparent 24%, transparent 34%, rgba(255, 255, 255, 0.4) 34%, rgba(255, 255, 255, 0.4) 50%, transparent 50%);
  content: "";
  width: 100%;
  height: 100%;
}
.cassette .label .cutout .window .spool {
  position: absolute;
  top: -22%;
  width: 70%;
  background: #adadad;
  border: 3px solid #353535;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #626262, 0 0 0 13px #353535;
}
.cassette .label .cutout .window .spool:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.cassette .label .cutout .window .spool:first-of-type {
  left: -64%;
  animation: spooling 15s linear infinite alternate;
}
.cassette .label .cutout .window .spool:last-of-type {
  right: -64%;
  animation: spooling 15s linear infinite alternate-reverse;
}
@keyframes spooling {
  from {
    box-shadow: 0 0 0 0.5em #626262, 0 0 0 calc(0.5em + 3px) #353535;
  }
  to {
    box-shadow: 0 0 0 5em #626262, 0 0 0 calc(5em + 3px) #353535;
  }
}
.cassette .head {
  width: 60%;
  height: 25.5%;
  position: absolute;
  margin-left: 20%;
  bottom: -4%;
}
.cassette .head:before, .cassette .head:after {
  display: block;
  content: "";
  width: 70%;
  height: 100%;
  position: absolute;
  background: #4b4b56;
  border: 4px solid #353535;
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
  background-repeat: no-repeat;
  background-position: 15% 8%;
  background-size: 100% 4px;
}
.cassette .head:before {
  transform: skew(-15deg);
  left: -8%;
  border-right: none;
  border-radius: 10px 0 0 10px;
  box-shadow: inset 6px 0 0 0 #4b4b56;
}
.cassette .head:after {
  transform: skew(15deg);
  right: -8%;
  border-left: none;
  border-radius: 0 10px 10px 0;
  box-shadow: inset -6px 0 0 0 #4b4b56;
}
.cassette .screw {
  position: absolute;
  text-align: right;
  top: 7%;
  left: 4%;
}
.cassette .screw:before {
  content: "⃠︎";
  font-size: 1.1em;
  color: #353535;
  font-weight: bold;
  position: absolute;
  right: 0;
  bottom: 0;
}
.cassette .screw.i2 {
  right: 1%;
}
.cassette .screw.i2:before {
  transform: rotate(90deg);
}
.cassette .screw.i3 {
  bottom: 1%;
}
.cassette .screw.i3:before {
  transform: rotate(-30deg);
}
.cassette .screw.i4 {
  right: 1%;
  bottom: 1%;
}
.cassette .screw.i4:before {
  transform: rotate(-90deg);
}
.cassette .screw.i5 {
  left: calc(50% + 0.5em);
  bottom: 9%;
}
.cassette .screw.i5:before {
  transform: rotate(45deg);
}
.cassette .hole {
  width: 5%;
  background: #8fe2ec;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #353535;
  bottom: 0;
  left: 50%;
  margin-left: -2.5%;
}
.cassette .hole:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.cassette .hole.i1 {
  bottom: 0%;
  left: 28%;
}
.cassette .hole.i2 {
  bottom: 2%;
  left: 38%;
}
.cassette .hole.i3 {
  bottom: 0%;
  left: 72%;
}
.cassette .hole.i4 {
  bottom: 2%;
  left: 62%;
}