h1 {
            font-size: clamp(2rem, 5vw, 3rem);
            font-family: 'FodaAlt';
            font-weight: 10;
            color: white;
            position: relative;
            top: 15vh;
            left: 10vw;
            margin-right: 350px; /*so that big headings dont go out of the page in the right*/
            padding-bottom:25px;
        }
        
        
h2 {
  color: white;
}
        
        /* Desktop Layout */
        @media (min-width: 300px) {
            .container {
                margin-top: 1em;
                padding: 5vw 10vw;
                padding-top: 15vh;
            }

            .h1{
                margin-top: 1em;
                margin-bottom: 1em;
                padding-top: env(safe-area-inset-top);
            }
            
        
        }


/*additional shtuff*/ 
.container p,
.container p {
  color: #d3d3d3;
}

.hero {
  text-align: center;
  margin-bottom: 50px;
}

.hero-subtitle {
  font-size: 1.1rem;
  opacity: 0.8;
  max-width: 700px;
  margin: auto;
}

.section {
  margin-top: 60px;
}

.section-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  margin-bottom: 25px;
  border-left: 4px solid white;
  padding-left: 12px;
}

/* UPCOMING EVENTS now reuses the .timeline / .timeline-item / .timeline-card
   classes below so both columns share identical spacing and card styling. */


/* TIMELINE */

.timeline {
  margin-top: 30px;
  border-left: 3px solid rgba(255,255,255,0.2);
  padding-left: 30px;
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

/* The container's border-left draws the vertical line for the whole
   timeline, from the very top to the very bottom of the container. To
   make the line start exactly at the first dot and end exactly at the
   last dot, we mask off the portion of the line above the first dot's
   center and below the last dot's center using solid blocks that match
   the page background. */
.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  height: 28px; /* dot top (20px) + half the dot's height (8px) = dot center */
  left: -35px;
  width: 6px;
  background: #000;
  z-index: 1; /* above the line, below the dot */
}

.timeline-item:last-child::after {
  content: "";
  position: absolute;
  top: 28px; /* dot top (20px) + half the dot's height (8px) = dot center */
  bottom: 0;
  left: -35px;
  width: 6px;
  background: #000;
  z-index: 1; /* above the line, below the dot */
}

.timeline-month {
  position: absolute;
  left: -100px;
  top: 18px;
  width: 60px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: #afafaf;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.timeline-year {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.5px;
}

@media (max-width: 900px) {
  .timeline-month {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: auto;
    margin-bottom: 6px;
  }
}

.timeline-dot {
  position: absolute;
  left: -41px;
  top: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 15px rgba(255,255,255,0.4);
  z-index: 2; /* above the mask, so the dot always renders whole */
}

.timeline-card {
  display: flex;
  gap: 20px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(255,255,255,0.08);
}

/* Wraps the whole card so clicking anywhere (not just the title) follows the link */
.timeline-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.timeline-card-link:hover .timeline-title {
  text-decoration: underline;
}

.timeline-text {
  flex: 1;
  min-width: 0;
}

.timeline-img {
  width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
}

.timeline-title {
  color: white;
  text-decoration: none;
  font-size: 1.3rem;
}

.timeline-title:hover {
  text-decoration: underline;
}

.timeline-date,
.event-date {
  display: block;
  margin-bottom: 10px;
  opacity: 0.7;
}

.timeline-desc,
.event-desc {
  display: block;
  margin-top: 10px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .timeline-card {
    flex-direction: column;
  }

  .timeline-img {
    width: 100%;
    height: 180px;
  }
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "hero hero"
    "past upcoming";
  align-items: start;
  column-gap: 90px;
  row-gap: 30px;
}

.hero {
  grid-area: hero;
}

.section:nth-of-type(1) {
  grid-area: upcoming;
  margin-top: 0;
}

.section:nth-of-type(2) {
  grid-area: past;
  margin-top: 0;
}

@media (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "upcoming"
      "past";
  }
}