.album {
  flex: 0 1 auto;
  position: relative;
  width: 17.125rem;
  height: 17.125rem;
  opacity: 1;
  transform: translateY(50vh);
  box-shadow: 0 12px 10px 0 rgba(0,0,0,0.3);
}

.cover-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.cover {
  position: relative;
  width: 17.125rem;
  height: 17.125rem;
}

.cover img {
  width: 100%;
  height: 100%;
}

.record-wrapper {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  z-index: 50;
  transition: all 300ms ease-in-out;
}

.album.playing .record-wrapper {
  transform: translateX(55%);
}

.record {
  position: relative;

  width: 16.6rem;
  height: 16.6rem;

  overflow: hidden;

  background-color: #111;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow:
    0 0.0625rem 0.1875rem rgba(0,0,0,0.5),
    inset 0 0 0 0.0625rem rgba(0,0,0,0.5),
    inset 0 0 0 0.1875rem rgba(255,255,255,1),
    inset 0 0 0 0.375rem rgba(0,0,0,0.5),
    inset 0 0 0 0.4375rem rgba(255,255,255,0.2),
    inset 0 0 0 0.5rem rgba(0,0,0,0.5),
    inset 0 0 0 0.5625rem rgba(255,255,255,0.3),
    inset 0 0 0 0.625rem rgba(0,0,0,0.5),
    inset 0 0 0 0.6875rem rgba(255,255,255,0.2),
    inset 0 0 0 0.75rem rgba(0,0,0,0.5),
    inset 0 0 0 0.8125rem rgba(255,255,255,0.3),
    inset 0 0 0 0.875rem rgba(0,0,0,0.5),
    inset 0 0 0 0.9375rem rgba(255,255,255,0.3),
    inset 0 0 0 1rem rgba(0,0,0,0.5),
    inset 0 0 0 1.0625rem rgba(255,255,255,0.2),
    inset 0 0 0 1.125rem rgba(0,0,0,0.5),
    inset 0 0 0 1.1875rem rgba(255,255,255,0.3),
    inset 0 0 0 1.25rem rgba(0,0,0,0.5),
    inset 0 0 0 1.3125rem rgba(255,255,255,0.2),
    inset 0 0 0 1.375rem rgba(255,255,255,0.2),
    inset 0 0 0 1.4375rem rgba(0,0,0,0.5),
    inset 0 0 0 1.5rem rgba(255,255,255,0.3),
    inset 0 0 0 1.5625rem rgba(0,0,0,0.5),
    inset 0 0 0 1.625rem rgba(255,255,255,0.3),
    inset 0 0 0 1.6875rem rgba(0,0,0,0.5),
    inset 0 0 0 1.75rem rgba(255,255,255,0.2),
    inset 0 0 0 1.8125rem rgba(0,0,0,0.5),
    inset 0 0 0 1.875rem rgba(255,255,255,0.2),
    inset 0 0 0 1.9375rem rgba(0,0,0,0.5),
    inset 0 0 0 2rem rgba(255,255,255,0.3),
    inset 0 0 0 2.0625rem rgba(0,0,0,0.5),
    inset 0 0 0 2.125rem rgba(0,0,0,0.5),
    inset 0 0 0 2.1875rem rgba(255,255,255,0.1),
    inset 0 0 0 2.25rem rgba(0,0,0,0.5),
    inset 0 0 0 2.3125rem rgba(255,255,255,0.2),
    inset 0 0 0 2.375rem rgba(255,255,255,0.1),
    inset 0 0 0 2.4375rem rgba(0,0,0,0.5),
    inset 0 0 0 2.5rem rgba(255,255,255,0.3),
    inset 0 0 0 2.5625rem rgba(0,0,0,0.5),
    inset 0 0 0 2.625rem rgba(255,255,255,0.2),
    inset 0 0 0 2.6875rem rgba(0,0,0,0.5),
    inset 0 0 0 2.75rem rgba(255,255,255,0.2),
    inset 0 0 0 2.8125rem rgba(0,0,0,0.5),
    inset 0 0 0 2.875rem rgba(255,255,255,0.2),
    inset 0 0 0 2.9375rem rgba(0,0,0,0.5),
    inset 0 0 0 3rem rgba(255,255,255,0.3),
    inset 0 0 0 3.0625rem rgba(0,0,0,0.5),
    inset 0 0 0 3.125rem rgba(0,0,0,0.5),
    inset 0 0 0 3.1875rem rgba(255,255,255,0.2),
    inset 0 0 0 3.25rem rgba(0,0,0,0.5),
    inset 0 0 0 3.3125rem rgba(255,255,255,0.2),
    inset 0 0 0 3.375rem rgba(255,255,255,0.1),
    inset 0 0 0 3.4375rem rgba(0,0,0,0.5),
    inset 0 0 0 3.5rem rgba(255,255,255,0.3);
}

.record::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%);
  background-image:
    linear-gradient(
      -45deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,0.125),
      rgba(255,255,255,0) 70%
    ),
    linear-gradient(
      -48deg,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0.075),
      rgba(255,255,255,0) 55%
    ),
    linear-gradient(
      -42deg,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0.075),
      rgba(255,255,255,0) 55%
    ),
    radial-gradient(
      circle at top left,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 80%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0,0,0,1) 20%,
      rgba(0,0,0,0) 80%
    );
}

.label {
  position: absolute;
  z-index: 60;
  top: 50%;
  left: 50%;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  transform-origin: 0 0;
  transform: rotate(0) translate(-50%,-50%);
  border-radius: 50%;
}


.label img {
  position: absolute;
  z-index: 70;
  top: 49.5%;
  left: 49.5%;
  width: 98%;
  height: 98%;
  overflow: hidden;
  transform-origin: 0 0;
  transform: rotate(0) translate(-50%,-50%);
  border-radius: 50%;
  animation: spin 4s linear infinite paused;
}

.ffing .label {
  animation-play-state: running;
}

.label {
  border-radius: 0;
  animation: spin 2s linear infinite reverse paused;
}

.rwing .label {
  animation: spin 2s linear infinite reverse running;
}

.label::before,
.label::after {
  content: '';
  position: absolute;
  z-index: 70;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transform: rotate(0) translate(-50%,-50%);
  border-radius: 50%;
  box-shadow: inset 0 0.0625rem rgba(255,255,255,0.3);
  animation: spin 4s linear infinite reverse paused;
}

.label::after {
  width: 0.25rem;
  height: 0.3125rem;
  margin-top: -0.0625rem;
  background-color: #eee;
  border-radius: 0.125rem;
  box-shadow:
    inset 0 -0.0625rem 0.0625rem rgba(0,0,0,0.5),
    inset 0.0625rem -0.0625rem 0.125rem rgba(255,255,255,0.15),
    inset -0.0625rem -0.0625rem 0.125rem rgba(255,255,255,0.15),
    inset 0 -0.125rem 0.125rem rgba(0,0,0,0.8),
    0 0.0625rem 0.0625rem rgba(0,0,0,0.5),
    0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.15),
    0 0 0.25rem 0.125rem rgba(0,0,0,0.15);
}

.ffing .label::before,
.ffing .label::after {
  animation-play-state: running;
}

.paused .label img {
  animation-play-state: paused;
}

.playing .label img {
  animation-play-state: running;
}

@keyframes spin {
  100% { transform: rotate(360deg) translate(-50%,-50%); }
}

.grid-test {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.horizontal-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 128, 0, 0.4);
}

.vertical-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;;
  background-color: rgba(255, 128, 0, 0.4);
}

@media screen and (max-width: 1023.98px) {
  .album {
    width: 14.125rem;
    height: 14.125rem;
  }
  
  .cover {
    width: 14.125rem;
    height: 14.125rem;
  }
  
  .record {
    width: 13.6rem;
    height: 13.6rem;
  }
  
}

@media screen and (max-width: 767px) {

.cover {
  width: 7rem;
  height: 7rem;
}

.album {
  width: 7rem;
  height: 7rem;
  order: 2;
  margin-top: 7vh;
    margin-bottom: 7vh;
}

.label {
  width: 3rem;
  height: 3rem;
}

.record {
  width: 7rem;
  height: 7rem;
}

}