/* main section */
main {
    padding: 10vh;
    background-color: blue;
}

main .sentence {
    font-family: "Escargoth";
    font-size: clamp(1rem, 6vw, 10rem);
    color: white;
}

main .about {
    font-family: "Jost";
    font-size: 3vh;
    color: white;
}

/* history section */
.history {
    padding: 0;
    margin: 5vh 10vh 10vh 10vh;
    background-color: white;
}

.history h1 {
    font-family: "Escargoth";
    color: blue;
    text-align: center;
    font-size: 7vh;
    font-weight: 100;
}

.history h2 {
    font-family: "Jost";
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.5rem, 1rem, 2rem);
    text-align: center;
    color: blue;
}

/* years section */
.year {
    display: flex;
    align-items: center;
    margin: 5vh 10vh 10vh 10vh;
    gap: 10vh;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.year h2 {
    font-family: "Jost";
    color: blue;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 500;
    font-style: normal;
}

.year .desc {
    font-family: "Jost";
    color: blue;
    font-size: 3vh;
}

.year img {
    max-width: 25rem;
    height: auto;
}

/* animations */
@keyframes appear {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

main {
  padding: clamp(1.5rem, 4vw, 4rem);
}

.history {
  margin: clamp(1rem, 4vw, 3rem);
  padding: 1rem;
}

.year {
  display: flex;
  align-items: center;
  margin: clamp(1rem, 4vw, 3rem);
  gap: clamp(1rem, 3vw, 2.5rem);
}

/* Image spacing */
.year img {
  max-width: 25rem;
  height: auto;
  margin: 1rem 0;
}

/* Fix paragraph sizing (vh was causing weird scaling) */
.year .desc {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
}


/* ====== MOBILE FIXES ====== */
@media (max-width: 900px) {

  .year {
    flex-direction: column;
    margin: 1.2rem;
    gap: 1.5rem;
    text-align: center;
  }

    main .sentence{
    font-size: 40px;
  }

  main .about{
    font-size: 20px;
  }

  .history {
    margin: 1rem;
  }

  .year img {
    max-width: 100%;
    margin: 0.75rem 0;
  }

  .year h2 {
    text-align: center;
  }
}