@font-face {
  font-family: 'Cooper Black Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Cooper Black Regular'), url('COOPBL.woff') format('woff');
}

/* ========================================
   THEME CONFIGURATION
   Comment/uncomment theme blocks to switch themes
   ======================================== */

/* 🌿 DEFAULT THEME - cabbage.town classic 🌿 */
/* :root {
  --dagreen: rgb(36, 221, 35);
  --dayellow: rgb(255, 237, 182);
  --daorange: rgb(250, 134, 37);

  --theme-text-shadow: none;
  --theme-glow: none;
} */

/* END DEFAULT THEME */

/* 🎃 HALLOWEEN THEME 🎃 
   Uncomment this block (and comment out DEFAULT THEME above) for spooky vibes
:root {
  --dagreen: rgb(34, 139, 34);
  --dayellow: rgb(80, 53, 98);
  --daorange: rgb(255, 102, 0);

  --theme-text-shadow: 2px 2px 4px rgba(255, 102, 0, 0.5);
  --theme-glow: drop-shadow(0 0 8px rgb(255, 102, 0));
}

body {
  background-image:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 35px,
      rgba(139, 0, 139, 0.03) 35px,
      rgba(139, 0, 139, 0.03) 70px);
}

.syne-mono-regular {
  text-shadow: var(--theme-text-shadow);
}

#logo {
  filter: var(--theme-glow);
  animation: spookyFloat 3s ease-in-out infinite;
}

@keyframes spookyFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

.song-details-container {
  box-shadow: 0 0 20px rgba(139, 0, 139, 0.3);
}
END HALLOWEEN THEME */

/* 🦃 THANKSGIVING THEME 🦃 */
/* :root {
  --dagreen: rgb(76, 47, 39);
  --dayellow: rgb(255, 223, 186);
  --daorange: rgb(204, 85, 0);

  --theme-text-shadow: 2px 2px 5px rgba(76, 47, 39, 0.4);
  --theme-glow: drop-shadow(0 0 12px rgba(204, 85, 0, 0.7));
}

body {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(204, 85, 0, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(139, 69, 19, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(218, 165, 32, 0.05) 0%, transparent 70%),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 50px,
      rgba(160, 82, 45, 0.04) 50px,
      rgba(160, 82, 45, 0.04) 100px);
}

.syne-mono-regular {
  text-shadow: var(--theme-text-shadow);
}

#logo {
  filter: var(--theme-glow);
}

.song-details-container {
  box-shadow: 0 0 20px rgba(204, 85, 0, 0.3), 0 4px 8px rgba(76, 47, 39, 0.2);
} */

/* END THANKSGIVING THEME */

/* 🎄 WINTER THEME 🎄 */
:root {
  --dagreen: rgb(0, 128, 0);
  --dayellow: rgb(240, 248, 255);
  --daorange: rgb(178, 34, 34);

  --theme-text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  --theme-glow: drop-shadow(0 0 8px rgb(255, 255, 255));
}

body {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(178, 34, 34, 0.2) 0%, transparent 50%);
}

.syne-mono-regular {
  text-shadow: var(--theme-text-shadow);
}

#logo {
  filter: var(--theme-glow);
}

.song-details-container {
  box-shadow: 0 0 20px rgba(178, 34, 34, 0.3), 0 4px 8px rgba(255, 255, 255, 0.2);
}

/* END WINTER THEME */

body {
  background: var(--dayellow);
  color: black;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  cursor: url(cursor-tnt-0.png) 4 12, auto;
}

i {
  font-style: italic;
}

em {
  font-weight: bold;
}

h2 {
  font-size: 2em;
  margin: 0;
}

h3 {
  font-size: 1.5em;
  margin: 0;
}

.syne-mono-regular {
  font-family: "Cooper Black Regular", monospace;
  font-style: normal;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 500px;
  gap: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

a {
  color: blue;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}