/* --- sensible defaults / fixes --- */
* { box-sizing: border-box; }
html, body {
  height: 100%; 
  margin: 0;  
}
/* --- full-viewport centering, cross-browser --- */
body {
  background: rgba(238, 245, 142, 1);
  min-height: 100vh;  

  /* grid is super reliable for centering */
  display: grid;
  place-items: center;

  /* height fallbacks to handle Chrome’s dynamic viewport bars, iOS Safari, etc. */
  min-height: 100vh;  
  min-height: 100dvh;  
}

/* --- your layout --- */
.layout {
  width: 70%;
  max-width: 1200px;
  display: grid;
  grid:
	"header" auto
	"main" 1fr
	"footer" auto
	/ 1fr;
  gap: 8px;
}

/* grid areas */
.header { grid-area: header; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* type */
h1 { font-size: 80px; text-align: center; margin-bottom: -30px; }
h2 { font-size: 40px; text-align: center; margin-bottom: -25px; }
h3 { font-size: 34px; text-align: center; }
p  { font-size: 35px; text-align: center; }
ul { font-size: 28px; }

/* misc */
.double { border-style: double; padding: 10px; }
.subtitle { font-size: 18px; font-style: italic; text-align: center; }

/* fonts */
@font-face {
  font-family: MajerIrregular;
  src: url('/font/OPTIMajerIrregular.otf');
}
@font-face {
  font-family: MonroeBold;
  src: url('/font/MonroeOpti-Bold.otf');
}