/* =========================
   Global tokens & body base
   ========================= */
:root{
  /* accent colours you re-use everywhere */
  --c-accent: #35d6ff;
  --c-orange: hsl(28 92% 54%);
  --font-primary: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

html{
  font-size: 16px;
}

body{
  background:#111;
  font-family: var(--font-primary);
  font-size:0.9rem;
  line-height:1.8;
  color:#fff;
  overflow-x:hidden;
}

@media (min-width: 1440px){
  html{
    font-size: 18px;
  }
}

@media (min-width: 1920px){
  html{
    font-size: 20px;
  }
}


/* every path gets fill = the NEXT section’s background       */
p{
    position:relative;

}
/* ===== FULL-SCREEN WRAPPERS ===== */
.section{
  min-height: 100vh;
  min-height: 100svh;
}

section{
  min-height: 100vh;
  min-height: 100svh;
}

.section-wrapper{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1vh 1vw;
}




/* optional: make the media block flex as well so it can shrink */
.media-block{
  display:flex;
  flex: 0 0 350px;         /* fixed width = image width        */
  justify-content: center;
  align-items: center;
}

.text-block{
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap:5vh;
}