/* Font principale */
@font-face {
  font-family: 'JejuHallasan';
  src: url('JejuHallasan-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  font-family: 'JejuHallasan', cursive, sans-serif;
  font-size: 18px;
  /* increase base font size */
  background: #a3b37f;
  background-image: 
    linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  background-attachment: fixed;
  color: #09035b;
  line-height: 1.6;
  text-align: center;
  overflow-x: hidden;
}

/* Headings used in the page */
h2 {
  color: #f8f3d4;
  text-shadow: 2px 2px #3a3a3a;
  margin: 1em auto;
  font-size: 2.4rem;
  /* larger */
  max-width: 90%;
}

/* Title image in the head */
.title img {
  max-width: 100%;
  width: 100%;
  display: block;
  margin: 1.2em auto 0.3em;
  /* reduced top spacing */
}

.hero {
  padding: 1em 1em 0.6em;
  /* bring hero content closer to title */
}

.hero .date {
  color: #d24e6a;
  font-weight: bold;
  position: fixed;
  top: 12px;
  left: 12px;
  padding: 8px 10px;
  z-index: 9999;
  font-size: 2rem;
  /* larger */
  transform: rotate(-12deg);
  /* rotated */
  transform-origin: left top;
}

.hero-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  /* tighter gap so subtitle and image are closer */
  justify-content: space-between;
  text-align: left;
}

.hero-img {
  width: 1200px;
  flex: 0 0 220px;
  margin-left: auto;
  /* push to the right */
  margin: 0;
  order: 2;
  /* place on the right by default */
}

@media (min-width: 1000px) {
  .hero-img {
    margin-right: -600px;
    /* nudge closer to the viewport right edge */
  }
}

.subtitle {
  max-width: 1800px;
  /* wider subtitle */
  margin: 0;
  font-size: 2rem;
  line-height: 1.4;
  order: 0;
  /* keep on the left */
}

.imgRasp img {
  max-width: 220px;
  display: block;
  margin: 0; /* remove large right margin so layout can control spacing */
}



.highlight {
  color: #bd8100;
  font-weight: bold;
}

.highlight2 {
  color: #3366cc;
  font-weight: bold;
  font-family: 'JejuHallasan', cursive, sans-serif;
}

.Hyes {
  color: #2a6a00;
  font-weight: bold;
  font-family: 'JejuHallasan', cursive, sans-serif;
}

.Hno {
  color: #e01111;
  font-weight: bold;
  font-family: 'JejuHallasan', cursive, sans-serif;
}

.kit {
  background: #d8e0b4;
  padding: 1.5em;
  border: 3px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  margin: 1em auto;
  max-width: 800px;
  border-radius: 10px;
  text-align: left;
  /* content aligned to the left side */
}

.kit-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* fill left side by default */
  gap: 1em;
  margin-top: 1em;
}

.kit-item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.5em 0;
}

.kit-item img {
  width: 800px;
  flex: 0 0 80px;
}

.kit-item img {
  width: 100%;
  max-width: 800px;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.kit-item p {
  margin: 0;
  font-weight: bold;
}



.imgRasp img {
  max-width: 500px;
  display: block;
  margin-right: 0.1em;
}

/* images row in participate section: left image and right line at same level */
.images-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  max-width: 1100px; /* match content width */
  margin: 0 auto; /* center within section */
}
.images-row .imgRasp { flex: 0 0 auto; }

/* center the line image within the row while leaving the left image in place */
.images-row { position: relative; }
.images-row .line { position: absolute; left: 60%; transform: translateX(-50%); }
.images-row .line img { max-width: 220px; display:block; margin:0; }
.images-row .line img { max-width: 220px; display:block; margin:0; }

.Symbol {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.5em 0;
}

.Symbol img {
  width: 28px;
}

ol,
ul {
  text-align: left;
  max-width: 700px;
  margin: 1em 0; /* remove auto centering so lists can align left inside rules */
}

.partecipate{
  font-size: 1.8rem;
  line-height: 1.5;
  position: absolute;
  left: calc(50% + 140px);
  /* place to the right of the centered line image; 140px is approx half line width + spacing */
  top: 50%;
  transform: translateY(-50%);
  width: calc(50% - 160px);
  max-width: 600px;
  background: transparent;
  text-align: left;
  margin: 0;
  padding-left: 1em;
}

.faq ul {
  list-style: none;
  padding: 0;
}

.faq li {
  margin: 0.5em 0;
}

/* Responsive */
@media (max-width: 600px) {
  h2 {
    font-size: 1.5rem;
  }

  .subtitle {
    font-size: rem;
  }

  .hero-content {
    flex-direction: column;
  }

  .hero-img {
    width: 180px;
    margin: 0.5em auto 0;
  }
  /* on small screens let the line flow normally below the left image */
  .images-row .line { position: static; transform: none; margin: 0.5em auto 0; }
}

.rules{
  font-size: 1.8rem;
  display: block;
  width: 100%;
  max-width: 1200px;
  background: transparent;
  text-align: left;
  margin: 0 auto 2em; /* center the section */
  padding: 1em 1.5em;
}

.imgDino img {
  width: 100%;
  max-width: 560px; /* make the dino larger */
  margin: 1em auto 0; /* center and push the dino lower a bit */
}

/* CTA buttons */
.cta-row {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin: 7em 0 1.2em; /* increased top margin to lower the buttons */
}
.btn {
  display: inline-block;
  padding: 0;
  border-radius: 0; /* remove rounding so only the image defines shape */
  text-decoration: none;
  box-shadow: none; /* remove shadow so only the image is visible */
}


.btn img {
  display: block;
  height: auto;
  max-height: 240px; /* larger image buttons */
  width: auto;
}

/* Arrange rules content: list left, image right */
.rules .imgDino { flex: 0 0 auto; }
.rules ul { flex: 1 1 580px; }

/* New wrapper: place list and image side-by-side while keeping h2 above */
.rules-content {
  display: flex;
  align-items: flex-start;
  gap: 2em;
  justify-content: flex-start;
}

.rules h2 {
  max-width: 700px; /* limit to the list width so it can be centered */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.6em;
  text-align: center;
}

@media (max-width: 800px) {
  .rules-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .imgDino img { max-width: 320px; }
}

/* extra spacing so content after CTA is lower on the page */
.rules { margin-top: 1.6em; }
.hero + .hero { margin-top: 1.6em; }


@media (min-width: 800px) {
  .kit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5em;
  }
}

/* Final section: center and enlarge */
.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 2.4em auto;
  padding: 1em;
}
.final h2 { font-size: 2.6rem; margin-bottom: 0.4em; margin-left: 0; width: 100%; text-align: center; }
.final p { font-size: 1.5rem; margin-bottom: 0.8em; }
.final ul { list-style: none; padding: 0; }
.final li { font-size: 1.6rem; margin: 0.6em 0; }

/* Channel highlight */
.channel {
  color: #3366cc;
  font-weight: 800;
  background: rgba(51,102,204,0.08);
  padding: 0.12em 0.4em;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
}

.channel:hover {
  background: rgba(51,102,204,0.16);
  transform: translateY(-2px);
}

.final p.highlight { color: #bd8100; font-weight: bold; }

@media (max-width: 600px) {
  .final h2 { font-size: 1.6rem; }
  .final li { font-size: 1.1rem; }
}

/* Starter ideas section */
.start {
  text-align: center;
  max-width: 900px;
  margin: 2em auto;
  padding: 1em;
}
.start h2 { font-size: 2.4rem; margin-bottom: 0.4em; }
.start h2 { margin-left: 0; width: 100%; text-align: center; }
.start p { font-size: 1.6rem; line-height: 1.5; margin-bottom: 0.8em; text-align: left; }
.start-row { display: flex; align-items: center; gap: 2em; justify-content: flex-start; }
.start-text { flex: 1 1 60%; display: flex; gap: 1.2em; align-items: center; }
.start-illu { flex: 0 0 360px; }
.start-illu img { max-width: 360px; display: block; margin: 0 auto; }
.find-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: #3a8ee6;
  color: #fff;
  padding: 1em 1.6em;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.find-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.16); }

@media (max-width: 600px) {
  .start p { font-size: 1.1rem; }
  .start-row { flex-direction: column; align-items: center; }
  .start-text { text-align: center; }
  .start-illu { margin-top: 1em; }
  .btn img { max-height: 140px; }
  .start-illu img { max-width: 140px; }
  .find-btn { padding: 0.6em 1em; font-size: 1rem; }
}