#album-wrap[data-v-7843ca60] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  padding: 1rem;
  height: calc(100% - 2rem);
}
#cover-wrap[data-v-7843ca60] {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-height: 100%;

  position: relative;
}
img[data-v-7843ca60] {
  position: absolute;
  top: 0px;
  left: 0px;

  width: 100%;
}
#title[data-v-7843ca60] {
  text-align: center;
}

/**
 * layout
 */

@media (max-width: 768px) {
  #content-wrap {
    width: 100vw;
    border: none;
  }
}

/**
 * content
 */

#vinyl-wrap {
  display: flex;
  flex-direction: row;

  border-bottom: var(--border-size);
}

#vinyl-player-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 25%;
  aspect-ratio: 1 / 1;

  border-right: var(--border-size);
}

#vinyl-player-youtube-wrap {
  display: none;
}

#vinyl-shelf-wrap {
  position: relative;
  
  width: calc(100% - 25% - var(--border-width));
}

#vinyl-shelf-header {
  position: absolute;
  top: 0px;
  left: 0px;
  
  width: 100%;

  
  z-index: 1;
  
}

#vinyl-shelf-header h2 {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;

  background-color: var(--color-primary);

  text-align: center;
  font-size: 1.3rem;
}

#vinyl-shelf-scroll {
  position: absolute;

  width: 100%;
  height: 15cqw;

  z-index: 10;
  overflow-y: scroll;

  scroll-snap-type: y mandatory;

  opacity: 0;
}

.album-snap-proxy {
  position: relative;
  width: 100%;
  height: 3rem;

  scroll-snap-align: center;
  scroll-snap-stop: normal;

  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.album-snap-proxy:first-child, .album-snap-proxy:last-child {
  scroll-snap-stop: always;
}

#vinyl-album-wrap {
  position: relative;
  display: flex;
  flex-direction: row;

  width: 100%;
  height: 100%;

  padding-left: 0px;
  padding-right: 0px;

  overflow-x: auto;
  overflow-y: clip;
}

.album {
  transform-origin: center center;
}

#vinyl-info-wrap {
  display: flex;


  width: 100%;
  aspect-ratio: 5 / 1;
}

#vinyl-info-basic {
  width: calc(33% - 2rem);

  padding-left: 1rem;
  padding-right: 1rem;

  height: 100%;
}

#vinyl-info-tracklist {
  overflow: auto;
  width: 33%;

  margin-top: 0px;
  padding-top: 1rem;
  border-left: var(--border-size);
  border-right: var(--border-size);

  height: calc(100% - 1rem);
}

#vinyl-info-extended {
  width: calc(33% - 2rem);

  padding-left: 1rem;
  padding-right: 1rem;
}

#lastfm-wrap {
  display: flex;

  width: 100%;
  aspect-ratio: 5 / 1;

  border-top: var(--border-size);
}

#lastfm-album-wrap, #lastfm-artist-wrap, #lastfm-track-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  width: calc(100% / 3);

  overflow-y: scroll;
  overflow-x: hidden;
}

#lastfm-artist-wrap, #lastfm-album-wrap {
  border-right: var(--border-size);
}

#lastfm-album-wrap h2, #lastfm-artist-wrap h2, #lastfm-track-wrap h2 {
  width: 100%;
  text-align: center;

  font-size: 1.3rem;
}

.lastfm-album {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 1rem;
  width: calc(100% - 2rem);
}

.lastfm-album-img {
  width: 30%;
}

.lastfm-album-data {
  width: calc(70% - 1rem);
  padding-left: 1rem;
}

@media (max-width: 768px) {
  #vinyl-wrap {
    flex-direction: column;
  }

  #vinyl-player-wrap {
    min-width: 100vw;
    height: 75vw;
    border-right: none;
    border-bottom: var(--border-size);
  }

  #vinyl-shelf-wrap {
    height: 100vw;
    width: 100vw;

    border: none;
  }

  #vinyl-shelf-scroll {
    height: 100vw;
  }

  #vinyl-info-wrap {
    flex-direction: column;
    width: 100vw;
    aspect-ratio: unset;
  }

  #vinyl-info-basic {
    order: 1;
    width: 100vw;

    border-bottom: var(--border-size);
    padding: 0px;
  }

  #vinyl-info-tracklist {
    order: 2;
    width: calc(100% - 40px);
    min-height: 50vw;
    
    border-left: none;
    border-right: none;
    border-bottom: var(--border-size);
  }

  #vinyl-info-extended {
    order: 3;
    width: 100vw;

    padding: 0px;
  }

  #lastfm-wrap {
    flex-direction: column;
    height: auto;
  }

  #lastfm-album-wrap, #lastfm-artist-wrap, #lastfm-track-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-right: none;
    border-bottom: var(--border);
  }

}

/**
 * turntable
 */

#turntable-animation-wrap {
  height: 80%;
  aspect-ratio: 1 / 1;

  position: relative;

  overflow: hidden;
}

#turntable-animation-wrap img {
  position: absolute;
  top: 0px;
  left: 0px;

  height: 100%;
}

#turntable-note-one-image, #turntable-note-two-image,
#turntable-vinyl-spin-one-image, #turntable-vinyl-spin-two-image,
#turntable-spindle-image, #turntable-vinyl-image {
  opacity: 0;
}

#turntable-arm-image {
  transform-origin: 87% 30%;
}

.turntable-playing #turntable-vinyl-image {
  opacity: 1;

  animation: vinylPlace 1s ease;
}

.turntable-playing #turntable-arm-image {
  animation: armStart 1s ease 1s 1 normal forwards;
}

.turntable-playing #turntable-vinyl-spin-one-image,
.turntable-playing #turntable-vinyl-spin-two-image {
  animation: fadeIn 0.01s linear 1s 1 normal forwards;
}

.turntable-playing #turntable-vinyl-spin-one-image {
  animation: blink 2s linear 1s infinite;
}

.turntable-playing #turntable-spindle-image {
  animation: fadeIn .2s linear .9s 1 normal forwards;
}

.turntable-playing #turntable-note-one-image {
  animation: note1 4s linear 2s infinite forwards;
}

.turntable-playing #turntable-note-two-image {
  animation: note2 4s linear 2s infinite forwards;
}

@keyframes vinylPlace {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes armStart {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(18deg);
  }
}

@keyframes fadeIn {
  0%{
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes note1 {
  0%{
    transform: translateX(0px) translateY(5%);
    opacity: 1; 
  }
  25%{
    transform: translateX(0px) translateY(-5%);
    opacity: 0;
  }
  49% {
    transform: translateX(70%) translateY(8%);
    opacity: 0;
  }
  50% {
    transform: translateX(70%) translateY(8%);
    opacity: 1;
  }
  75%, 99% {
    transform: translateX(70%) translateY(-2%);
    opacity: 0;
  }
}

@keyframes note2 {
  0%, 24%{
    transform: translateX(-30%) translateY(2%);
    opacity: 0; 
  }
  25%{
    transform: translateX(-30%) translateY(2%);
    opacity: 1;
  }
  50% {
    transform: translateX(-30%) translateY(-8%);
    opacity: 0;
  }
  51%, 74% {
    transform: translateX(-50%) translateY(11%);
    opacity: 0;
  }
  75% {
    transform: translateX(-50%) translateY(11%);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(1%);
    opacity: 0;
  }
}