a {text-decoration: none; }
h1 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  background-color: rgb(244, 211, 94);
  align-content: center;
}

h3 {

  text-align: center;
  font-size: 3vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  border-style: ridge;

background-color: rgb(229, 195, 209);
  color: rgb(22, 15, 41);
}

p {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: left;
  margin: 36px;
}

.marquee-container {
  width: 100%; /* Or a specific width */
  overflow: hidden; /* Hides content outside the container */
  white-space: nowrap; /* Prevents text from wrapping */
  box-sizing: border-box;
}

.marquee-content {
  display: inline-block; /* Allows content to be on a single line */
  padding-left: 0%; /* Starts the content off-screen to the right */
  animation: marquee-scroll 66s linear infinite; /* Adjust time for speed */
}

/* Pause animation on hover (optional) */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0); /* Start at the initial position */
  }
  100% {
    transform: translateX(-100%); /* Move content completely off-screen to the left */
  }
}

.biojazz {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: bolder;
  font-variant: unset;
  font-size: larger;
}

.bdj {
  color: white;
  background-color: rgb(22, 15, 41);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-style: oblique;
  font-weight: bolder;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}

/* --- Animation & Shadows Section --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-primary: #f6aca2;
  --color-secondary: #f49b90;
  --color-tertiary: #f28b7d;
  --color-quaternary: #f07a6a;
  --color-quinary: #ee6352;
}

body {
  min-height: 100vh;
  font-weight: 300;
  font-size: 1.25rem;
  background-color: rgb(244, 211, 94);
  margin: 0;
  text-decoration: none;
}

.content {
  display: block;
  text-align: center;
  margin-top: 36px; 
}

.text-shadows {
  text-shadow: 3px 3px 0 var(--color-secondary),
               6px 6px 0 var(--color-tertiary),
               9px 9px var(--color-quaternary),
               12px 
               12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(2rem + 5vw);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  animation: shadows 2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% { text-shadow: none; }
  10% { transform: translate(-3px, -3px); text-shadow: 3px 3px 0 var(--color-secondary); }
  20% { transform: translate(-6px, -6px); text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary); }
  30% { transform: translate(-9px, -9px); text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary); }
  40% { transform: translate(-12px, -12px); text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); }
  50% { transform: translate(-12px, -12px); text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); }
  60% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); }
  70% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary); }
  80% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary); }
  90% { text-shadow: 3px 3px 0 var(--color-secondary); }
  100% { text-shadow: none; }
}

/* --- Buttons --- */

.guitar-button {
  background-color: rgb(125, 130, 184);
  color: rgb(22, 15, 41);
  padding: 16px 66px;
  border-radius: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-right: 6px;
  transition: opacity 0.15s;
  vertical-align: top;
  font-size: large;
}

.guitar-button:hover {
  opacity: 0.8;
  box-shadow: 6px 6px 10px rgba(22, 15, 41, 0.66);
  border-radius: 16px;
  
}

.handpoke-button {
  background-color: rgb(229, 195, 209);
  color: rgb(22, 15, 41);
  padding: 16px 66px;
  border-radius: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-right: 6px;
  transition: opacity 0.15s;
  vertical-align: top;
  font-size: large;
}

.handpoke-button:hover {
  opacity: 0.8;
  box-shadow: 6px 6px 10px rgba(22, 15, 41, 0.66);
  border-radius: 16px;
}

.ttrpg-button {
  background-color: rgb(239, 121, 138);
  color: rgb(22, 15, 41);
  padding: 16px 66px;
  border-radius: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-right: 6px;
  transition: opacity 0.15s;
  vertical-align: top;
  font-size: large;
  
}

.ttrpg-button:hover {
  opacity: 0.8;
  box-shadow: 6px 6px 10px rgba(22, 15, 41, 0.66);
  border-radius: 16px;
}

.container {
  display: flex;
  justify-content: space-evenly;
}

.item-vid {
  flex-grow: 1;
  flex-shrink: 2:
  margin: 66px;
}

.item-image{

flex-shrink: 4;
width: 600px;
  margin: 66px;
}


.item-text {
  margin: 66px;
  flex-grow: 2;
  flex-shrink: 1;
  font-size: clamp (16px, 1vw, 66px);
}