* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-bg-color: #000000;
  --secondary-bg-color: #9929EA;
  --primary-font-color: #FF5FCF;
  --secondary-font-color: #FAEB92;
}

body {
  background-color: var(--primary-bg-color);
  position: relative;
}

.album {
  height: 100dvh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.anime-pic {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  width: 100%;
  height: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.anime-pic.loading::after {
  content: '';
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 8px solid rgba(0, 0, 0, 0);
  border-top-color: #C850F2;
  border-bottom-color: #C850F2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.navbar {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% -50%;
  width: 90%;
  height: 8vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0.5px 0.5px 2px rgb(0, 0, 0);
}

.full-screen-button,
.download-button,
.next-button {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 0.5px solid #C850F2;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0.5px 0.5px 1px #C850F2;
}

.full-screen-button:active,
.download-button:active,
.next-button:active {
  background-color: rgba(200, 80, 242, 0.5);
}

.full-screen-button {
  background-image: url('https://img.icons8.com/?size=100&id=62rUscu0psyE&format=png&color=C850F2');
}

.download-button {
  background-image: url('https://img.icons8.com/?size=100&id=8ZGZTnARklCg&format=png&color=C850F2 ');
}

.next-button {
  background-image: url('https://img.icons8.com/?size=100&id=9990&format=png&color=C850F2');
}

@media screen and (min-width: 600px) {
  .anime-pic {
    width: clamp(600px, 10vw, 900px);
  }

  .navbar {
    width: clamp(550px, 9vw, 850px);
    height: 10vh;
  }

  .full-screen-button,
  .download-button,
  .next-button {
    width: 3.5em;
    height: 3.5em;
  }
}