body {
  background: #8E6233;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
  height: 100%;
  width: 100%;
}

#background-image {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  background-image: url('/assets/shrines/animal-crossing/background.jpg');
  background-repeat: repeat;
  background-size: auto;
  width: 100%;
  height: 100%;
  filter: opacity(30%);
}

p, .caption {
  color: #8E6233;
  margin: 0;
}

#radio-container {
  display: flex;
  background: #E6B945;
  border-radius: 4px;
  box-shadow: 0 0 8px #8E6233;
}

#video-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 36px 16px 16px 16px;

  @media screen and (max-width: 992px) {
    display: none;
  }
}

#gif-playing {
  max-width: 800px;
  width: 100%;
  border-radius: 4px;
}

#video-controls {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.gif-button {
  width: 120px;
}

#music-player {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 400px;
  border-left: 4px solid #8E6233;

  @media screen and (max-width: 992px) {
    border-left: none;
  }

  @media screen and (max-width: 767px) {
    width: 90vw;
  }
}

#general-music-controls {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#music-types {
  display: flex;
  height: 36px;
}

.music-type-button {
  background: #8E6233;
  color: #E6B945;
  border: none;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.music-type-button:nth-of-type(2) {
  border-top-right-radius: 4px;
}

.music-type-button:hover {
  background: #E6B945;
  color: #8E6233;
  cursor: pointer;
}

.music-type-button.active {
  background: #E6B945;
  color: #8E6233;
}

.specific-music-controls {
  flex: 1;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

#weather-buttons, #play-mode-buttons, #variant-buttons, #control-buttons {
  display: flex;
  gap: 8px;
}

.weather-button, .play-mode-button, .variant-button, .control-button, .gif-button {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: #fede8c;
  color: #8E6233;
  border: none;
  border-bottom: 3px solid #8E6233;
  border-radius: 4px;
  padding: 8px;
}

.weather-button:hover, .weather-button.active,
.play-mode-button:hover, .play-mode-button.active,
.variant-button:hover, .variant-button.active,
.am-pm-button:hover, .am-pm-button.active,
.gif-button:hover {
  cursor: pointer;
  background: #ffd363;
  border-top: 2px solid #E6B945;
  border-bottom: 1px solid #8E6233;
}

#am-pm-buttons {
  display: flex;
  position: relative;
  height: 16px;
}

.am-pm-button {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fede8c;
  color: #8E6233;
  border: none;
  border-bottom: 3px solid #8E6233;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 100%;
}

#button-am {
  left: 32px;
}

#button-pm {
  top: 32px;
}

#clock-container {
  display: flex;
  justify-content: center;
}

#clock-outline {
  width: 300px;
  aspect-ratio: 1;
  border-radius: 100%;
  border: 1px solid #8E6233;
  border-bottom: 6px solid #8E6233;
  border-right: 3px solid #8E6233;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  background: #de8424;
  background-color: #d48e42;
  opacity: 0.8;
  background-image:  radial-gradient(#de8424 17%, #d48e42 18% 35%, transparent 36.5%), radial-gradient(#de8424 17%, #d48e42 18% 35%, transparent 36.5%), radial-gradient(#d48e42 34%, #de8424 36% 68%, transparent 70%), repeating-linear-gradient(45deg, #de8424 -12.5% 12.5%, #d48e42 0 37.5%);
  background-position: -20px -20px, 20px 20px, 0 0, 0 0;
  background-size: 80px 80px, 80px 80px, 40px 40px, 80px 80px;
}

#clock-background-outline {
  position: absolute;
  width: 250px;
  aspect-ratio: 1;
  border-radius: 100%;
  border: 2px solid #4e3922;
  background: #a6ce2f;
}

#clock-background {
  position: absolute;
  width: 230px;
  aspect-ratio: 1;
  border-radius: 100%;
  border: 2px solid #5b4228;
  background: #fffcf4;
}

#inner-decor-outline {
  position: absolute;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 100%;
  border: 6px solid #E6B945;
  background: none;
}

#inner-decor-background {
  position: absolute;
  width: 90px;
  aspect-ratio: 1;
  border-radius: 100%;
  border-width: 3px 4px 5px 3px;
  border-style: solid;
}

#hour-hand {
  position: absolute;
  color: #241b12;
  font-size: 64px;
}

#minute-hand {
  position: absolute;
  color: #4e3922;
  font-size: 100px;
  top: 40px;
}

#hour-hand.hour-1 {
  rotate: -60deg;
  left: 124px;
  top: 92px;
}

#hour-hand.hour-2 {
  rotate: -30deg;
  left: 128px;
  top: 96px;
}

#hour-hand.hour-3 {
  rotate: 0deg;
  left: 132px;
  top: 102px;
}

#hour-hand.hour-4 {
  rotate: 30deg;
  left: 132px;
  top: 112px;
}

#hour-hand.hour-5 {
  rotate: 60deg;
  left: 128px;
  top: 120px;
}

#hour-hand.hour-6 {
  rotate: 90deg;
  left: 121px;
  top: 120px;
}

#hour-hand.hour-7 {
  rotate: 120deg;
  left: 112px;
  top: 124px;
}

#hour-hand.hour-8 {
  rotate: 150deg;
  left: 104px;
  top: 120px;
}

#hour-hand.hour-9 {
  rotate: 180deg;
  left: 104px;
  top: 108px;
}

#hour-hand.hour-10 {
  rotate: -150deg;
  left: 104px;
  top: 100px;
}

#hour-hand.hour-11 {
  rotate: -120deg;
  left: 104px;
  top: 92px;
}

#hour-hand.hour-0 {
  rotate: -90deg;
  left: 115px;
  top: 92px;
}

.clock-am {
  border-color: #3a8bd6;
  background: #67b5ff;
}

.clock-pm {
  border-color: #220b77;
  background: #4938ff;
}

#am-pm-icon {
  position: absolute;
}

.hour-button {
  position: absolute;
  z-index: 1;
  border: none;
  background: none;
  color: #4e3922;
  font-weight: bold;
  font-size: 24px;
}

.hour-button:hover, .hour-button.active {
  cursor: pointer;
  text-shadow: 0 0 4px #E6B945;
}

#button-1 {
  right: calc(cos(30deg + 90deg) * 96px + 135px);
  bottom: calc(sin(30deg + 90deg) * 96px + 135px);
}

#button-2 {
  right: calc(cos(60deg + 90deg) * 96px + 135px);
  bottom: calc(sin(60deg + 90deg) * 96px + 135px);
}

#button-3 {
  right: calc(cos(90deg + 90deg) * 96px + 135px);
  bottom: calc(sin(90deg + 90deg) * 96px + 135px);
}

#button-4 {
  right: calc(cos(120deg + 90deg) * 96px + 135px);
  bottom: calc(sin(120deg + 90deg) * 96px + 135px);
}

#button-5 {
  right: calc(cos(150deg + 90deg) * 96px + 135px);
  bottom: calc(sin(150deg + 90deg) * 96px + 135px);
}

#button-6 {
  right: calc(cos(180deg + 90deg) * 96px + 135px);
  bottom: calc(sin(180deg + 90deg) * 96px + 135px);
}

#button-7 {
  right: calc(cos(210deg + 90deg) * 96px + 135px);
  bottom: calc(sin(210deg + 90deg) * 96px + 135px);
}

#button-8 {
  right: calc(cos(240deg + 90deg) * 96px + 135px);
  bottom: calc(sin(240deg + 90deg) * 96px + 135px);
}

#button-9 {
  right: calc(cos(270deg + 90deg) * 96px + 135px);
  bottom: calc(sin(270deg + 90deg) * 96px + 135px);
}

#button-10 {
  right: calc(cos(300deg + 90deg) * 96px + 135px);
  bottom: calc(sin(300deg + 90deg) * 96px + 135px);
}

#button-11 {
  right: calc(cos(330deg + 90deg) * 96px + 135px);
  bottom: calc(sin(330deg + 90deg) * 96px + 135px);
}

#button-12 {
  right: calc(cos(360deg + 90deg) * 96px + 135px);
  bottom: calc(sin(360deg + 90deg) * 96px + 135px);
}

#album-list {
  overflow: auto;
  max-height: 250px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.album-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: none;
  background: #fede8c;
  border: 4px solid #fede8c;
  border-radius: 4px;
}

.album-button:hover, .album-button.active {
  cursor: pointer;
  border: 4px solid #8E6233;
}

#music-controls {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
}

#track-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

#control-buttons {
  display: flex;
  gap: 8px;
}

.control-button {
  padding: 4px 8px;
}

.control-button.hidden {
  display: none;
}

.control-button:hover {
  cursor: pointer;
  background: #ffd363;
  border-top: 2px solid #E6B945;
  border-bottom: 1px solid #8E6233;
}

#control-track-name {
  margin: 0;
}

.play-mode-button {
  flex-direction: row;
  padding: 4px 8px;
  justify-content: flex-start;
}

#loading-text {
  display: flex;
  gap: 4px;
  opacity: 0;
}

#loading-text p, .caption {
  font-size: 10px;
  margin: 0;
}

.gif-button {
  flex-direction: row;
  gap: 8px;
}