@font-face { font-family: 'TRS-Million'; src: url("fonts/TRS-Million Rg.otf"); }

body {
  margin: 0;
  padding: 0;
  background-image: url(images/background.png);
  display: flex;
  justify-content: center;
}

#main {
  position: relative;
  background-image: url(images/objects.png);
  min-width: 1300px;
  min-height: 1300px;
  user-select: none;
}

#main img, #main canvas {
  position: absolute;
  -webkit-touch-callout: none;
}

#freepikLink {
  position: absolute;
  top: 1281px;
  left: 1086px;
  font-family: Arial;
  font-size: 10px;
  color: #568484;
}

.wheel {
  pointer-events: none;
	animation-name: wind;
	animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
  display: none;
  z-index: 0;
}

.reverse {
  animation-direction: reverse;
}

@keyframes wind {
	0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

#boosterCanvas {
  top: 530px;
  left: 297px;
  width: 138px;
  height: 27px;
}

#radioCanvas {
  top: 905px;
  left: 130px;
  width: 486px;
  height: 192px;
}

.radioButtons {
  font-size: 4px;
  top: 1125px;
  left: 297px;
  width: 168px;
}

#main .recorderButtons img,
#main .boosterButtons img,
#main .walkmanButtons img,
#main .radioButtons img {
  position: unset;
}

#radioRahmen {
  top: 904px;
  left: 128px;
}

#track {
  color: rgba(0, 255, 0, 0.2);
  position: absolute;
  top: 926px;
  left: 130px;
  width: 486px;
  text-align: center;
  font-family: 'TRS-Million';
  font-size: 46.6px;
  letter-spacing: 0.08em;
  transition: opacity 2s;
}

.opaque {
  opacity: 0;
}

#boomL {
  left: 160px;
  top: 631px;
  visibility: hidden;
}

#boomR {
  left: 507px;
  top: 631px;
  visibility: hidden;
}

.buttons {
  position: absolute;
  z-index: 3;
}

.recorderButtons {
  font-size: 8px;
  left: 848px;
  top: 710px;
}

.walkmanButtons {
  font-size: 0px;
  left: 703px;
  top: 68px;
  width: 226px;
  z-index: 0; /* special case */
}

.boosterButtons {
  font-size: 43px;
  left: 305px;
  top: 722px;
  width: 130px;
}

.kassette {
  position: absolute;
  left: 779px;
  top: 902px;
  transition: left 1s, top 1s, transform 1s;
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.45);
  border-radius: 14px;
}

.kassette.kassette-recorder {
  left: 769px;
  top: 428px;
  transform: scale(0.63);
  transition: unset;
  box-shadow: unset;
}

.kassette.kassette-recorder.ejected {
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.45);
  transition: top 0.3s, box-shadow 0.3s;
  top: 228px;
}

.glass {
  z-index: 1;
}

#recorder {
  position: absolute;
  left: 794px;
  top: 427px;
  width: 374px;
  height: 387px;
  z-index: 2;
}

#recorder .glass {
  left: 43px;
  top: 40px;
}

#recorderLeft {
  left: 114px;
  top: 112px;
}

#recorderRight {
  left: 226px;
  top: 112px;
}

#booster {
  position: absolute;
  left: 85px;
  top: 438px;
  width: 558px;
  height: 339px;
  z-index: 2;
}

#booster .glass {
  left: 207px;
  top: 189px;
}

#boosterLeft {
  left: 241px;
  top: 222px;
}

#boosterRight {
  left: 298px;
  top: 222px;
}

.kassette.kassette-booster {
  left: 153px;
  top: 538px;
  transform: scale(0.315);
  transition: unset;
  box-shadow: unset;
}

.kassette.kassette-booster.ejected {
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.45);
  transition: top 0.3s, box-shadow 0.3s;
  top: 440px;
}

#walkman {
  position: absolute;
  left: 649px;
  top: 83px;
  width: 336px;
  height: 198px;
  z-index: 2;
}

#walkman .glass {
  left: 30px;
  top: 11px;
}

#walkmanLeft {
  left: 92px;
  top: 75px;
}

#walkmanRight {
  left: 196px;
  top: 75px;
}

.kassette.kassette-walkman {
  left: 598px;
  top: 46px;
  transform: scale(0.58);
  transition: unset;
  box-shadow: unset;
}

.kassette.kassette-walkman.ejected {
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.45);
  transition: top 0.3s, box-shadow 0.3s;
  top: -126px;
}

#boosterHorizButton {
  left: 315px;
  top: 589px;
}

.level {
  transform: rotateZ(-140deg);
}

#radioLevelL {
  left: 197px;
  top: 1133px;
}

#radioLevelR {
  left: 521px;
  top: 1133px;
}