body {
 background: linear-gradient(#ABB7B5, black);
 height: 100vh;
 color: #FFCF00;
 text-shadow: -1px -1px 0 #00FFAB, 1px -1px 0 #00FFAB, -1px 1px 0 #00FFAB, 1px 1px 0 #00FFAB;
}

.info {
 float: right;
 background: #FA00F5;
 border: 12px solid #00FFAB;
 border-radius: 12px;
 font-family: cherry;
 width: 50%;
}

@font-face {
 font-family: cherry;
 src: url(/fonts/CherrySoda.ttf);
}

.CD {
  position: absolute;
  bottom: 25px;
  left: 25px;
  width: 20%;
  background: none;
  padding-top: 20%;
  transition: transform 0.2s cubic-bezier(0.175, 0.985, 0.32, 1.275);
  transform: scale(1);
  overflow: hidden;
  border: none;
}

.spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 30s linear infinite;
  will-change: transform;
  transform-origin: center center;
}

.spinner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.CD.clicked {
  transform: scale(1.10);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}