/**
 * poempelz 2023 CSS
 *
 * @copyright poempelz
 * @author Mario Weiss <mario.weissbier@gmail.com>
 */


.skippy-box {
  /* border: solid 3px rgb(255, 196, 0); */
  background-image: url('img/skippy/skippy_open.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  text-align: left;
  width: 365px;
  height: 220px;
  margin-top: -90px;
  margin-bottom: 0px;
  animation: rotate 2s infinite alternate;
}

@keyframes rotate {
  0% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(20deg);
  }
}

.skippyButton {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  width: 30px;
  height: 35px;
  transition: transform 0.1s;
}

.skippyButton:active {
  transform: scale(0.95);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.skippyNumber {
  /* border: solid 2px rgb(255, 0, 0); */
  background-image: url('img/skippy/0.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 60px;
  height: 70px;
  transition: transform 0.1s;
}

.skippyTitle {
  /* border: solid 2px rgb(255, 0, 0); */
  /* background-image: url('img/skippy/songtitles/1.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  display: inline-block;
  width: 160px;
  height: 60px;
  transition: transform 0.1s;
}

.compactDisc {
  /* border: solid 3px rgb(255, 196, 0); */
  width: 100px;
  height: 100px;
  background-image: url('img/skippy/cd-rohling.png');
  /* Example background image for the draggable element */
  background-size: cover;
  display: inline-block;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  cursor: url('img/perser_grabbing_open.png'), auto;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 1;
  margin-bottom: 30px;
  /* Bring the draggable box to the foreground */
  transition: transform 0.3s ease;
  /* Add a smooth transition effect for the rotation */
}

.cd-rotation {
  animation: rotateAnimation 1s infinite linear;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}