/* Fall is Coming – Regular (400) */
@font-face {
  font-family: "Fall is coming";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/FallIsComingRegular-Mx9B.woff2") format("woff2"),
       url("/fonts/FallIsComingRegular-Mx9B.ttf") format("truetype");
  font-display: swap;
}

/* (Optioneel) Fira Code als aparte familie – niet in hetzelfde @font-face stoppen */
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/FiraCode-Regular.woff2") format("woff2"),
       url("/fonts/FiraCode-Regular.ttf") format("truetype");
  font-display: swap;
}

body {
  background: #f5f5f5;
  margin: 0;
  height: 100vh; /* hele schermhoogte */
  display: flex;
  justify-content: center; /* horizontaal centreren */
  align-items: center;    /* verticaal centreren */
}

.wrapper {
  text-align: center;
  max-width: 95%;
}

.words {
  color: #1e1e1e;
  font-family: "Fall is coming", sans-serif;
  font-style: normal;
  font-weight: 400; /* gebruik 400 als je alleen Regular hebt */
  text-align: center;
}

.meaning {
  color: #1e1e1e;
  font-family: "Fall is coming", sans-serif;
  font-style: normal;
  font-weight: 400;
  text-align: center;
}


/* Extra small devices (phones, 600px and down)*/
@media only screen and (max-width: 600px) {
  .words {font-size: 45pt;}
  .meaning {font-size: 30pt;}
}

/* Small devices (portrait tablets and large phones, 600px and up)*/
@media only screen and (min-width: 600px) {
  .words {font-size: 40pt;}
  .meaning {font-size: 25pt;}
}

/* Medium devices (landscape tablets, 768px and up)*/
@media only screen and (min-width: 768px) {
  .words {font-size: 40pt;}
  .meaning {font-size: 40pt;}
}