/* 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." */
/* General layout and fonts */
/* General Body Styling */
body {
  margin: 0;
  font-family: 'Gaegu', cursive;
  background-color: #ffffff;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Floating Wriggle Animation */
@keyframes wriggle {
  0%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(2deg); }
  15% { transform: rotate(-2deg); }
}

.title-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Gaegu', cursive;
  font-size: clamp(2rem, 4vw, 4.5rem);
  flex-wrap: wrap;
  gap: 0.2em;
}

.title-word {
  display: inline-flex;
  gap: 0.1em;
}

.letter {
  animation: wriggle 2s ease-in-out infinite;
  display: inline-block;
}

.letter-delay-0  { animation-delay: 0s; }
.letter-delay-1  { animation-delay: 0.2s; }
.letter-delay-2  { animation-delay: 0.4s; }
.letter-delay-3  { animation-delay: 0.6s; }
.letter-delay-4  { animation-delay: 0.8s; }
.letter-delay-5  { animation-delay: 1s; }
.letter-delay-6  { animation-delay: 1.2s; }
.letter-delay-7  { animation-delay: 1.4s; }

/* Colors */
.blue       { color: #88afe3; }
.pink       { color: #ed80ad; }
.lightblue  { color: #96e1f4; }
.orange     { color: #e97b3d; }
.green      { color: #7aae86; }
.darkgreen  { color: #3b4121; }
.beige      { color: #dcc78c; }
.lightpink  { color: #edb2c7; }

/* Confetti Background */
.confetti-bg {
  background-image: url('assets/confetti.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  z-index: -1;
}

/* Logo */
header {
  margin-bottom: 20px;
}

.site-logo {
  height: 12vh;
  margin: 3vh auto 2vh;
  display: block;
}

/* Main Window Container */
.main-window {
  background: white;
  border: 0.5vw solid #3498db;
  border-radius: 2vw;
  padding: 4vh 5vw;
  width: 60vw;
  max-width: 600px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.08);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4vh;

  margin: 5vh auto 6vh;
  min-height: 40vh;
}

/* Title Image (if used) */
.title-img {
  width: min(45vw, 420px);
  margin-bottom: 2vh;
}

/* Option Card Layout */
.option-row {
  display: flex;
  justify-content: center;
  gap: 5vw;
  flex-wrap: wrap;
}

/* Option Cards */
.option-card img {
  width: min(16vw, 240px);
  max-width: 100%;
  border-radius: 2vw;
  transition: transform 0.3s ease;
}

.option-card:hover img {
  transform: scale(1.05);
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .main-window {
    width: 95vw;
    padding: 6vh 5vw;
    border-width: 1vw;
    gap: 3vh;
  }

  .option-card img {
    width: 42vw;
  }

  .site-logo {
    height: 6vh;
  }

  .option-row {
    gap: 4vw;
  }

  .title-text {
    font-size: clamp(1.8rem, 5.5vw, 3.5rem);
  }
  
  @media (max-width: 800px) {
  .main-window {
    width: 90vw;
    padding: 5vh 6vw;
  }
}

}