/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #ffd6ec;
  background-image: url("src/bg.jpg");
  background-repeat: repeat;
  background-size: auto;
  color: #2d0b18;
  font-family: "Times New Roman", Times, serif;
}

.page {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 3vw;
}

.content {
  text-align: center;
  max-width: 460px;
  padding: 1.5rem;
  border: 6px double #ff5aad;
  background: #fffbed;
  box-shadow: 10px 10px 0 #ff94c2;
}

.content h1 {
  margin: 0 0 1rem 0;
  font-size: 2.2rem;
  color: #b80056;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  animation: neonFlash 1s steps(2) infinite;
  text-shadow: 0 0 6px #ff9fd9, 0 0 12px #ff4fb8;
}
.content h1::after {
  content: " ✨";
}

@keyframes neonFlash {
  0% {
    color: #b80056;
    text-shadow: 0 0 6px #ff9fd9, 0 0 12px #ff4fb8;
  }
  50% {
    color: #ff007a;
    text-shadow: 0 0 8px #ffb6e8, 0 0 16px #ff73d2, 0 0 24px #ff4fb8;
  }
  100% {
    color: #b80056;
    text-shadow: 0 0 6px #ff9fd9, 0 0 12px #ff4fb8;
  }
}

.intro {
  font-size: 1.05rem;
  margin: 0 auto 1rem;
}

hr {
  border: none;
  border-top: 4px dotted #ff5aad;
  margin: 1rem auto;
  width: 80%;
}

.ticker {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  background: #fff1fb;
  border: 3px ridge #ff7ec6;
  padding: 0.4rem;
  display: inline-block;
  margin-bottom: 1rem;
}

.love-note {
  font-size: 1.5rem;
  color: #ff0f76;
}

.caption-box {
  min-height: 3rem;
  margin: 1rem auto;
  padding: 0.8rem;
  width: 90%;
  border: 4px dashed #ff94c2;
  background: #fff1fb;
  font-size: 1rem;
  font-style: italic;
}

.content button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: 4px outset #ff94c2;
  background: #ffe4f4;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  color: #b80056;
}

.content button:active {
  border-style: inset;
}

.marquee-column {
  width: min(22vw, 170px);
  height: 100vh;
  border: 8px ridge #ff7ec6;
  background: #fff5fb;
  padding: 0.3rem;
}

.marquee-track {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.marquee-track.scrollable {
  height: 100%;
  overflow-y: auto;
  padding-right: 0.2rem;
  scrollbar-width: thin;
}

.marquee-track img {
  width: 100%;
  border: 4px solid #ffb2d8;
  background: white;
}

.biker-marquee {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
  background: transparent;
}

.biker-marquee img {
  height: 90px;
  display: inline-block;
}