html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.box {
  max-width: 1000px;
  display: grid;
  margin: -25px auto;
  grid-gap: 5px;
  grid-template-columns: 250px auto;
  box-sizing: border-box;
}

header, nav, main, footer {
  border: blue 5px solid;
  border-radius: 10px;
  padding: 10px;
  background-color: white;

}

header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

nav {
  grid-row: 2 / 3; 
  grid-column: 1 / 2;
  max-height: max-content;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3; 
  max-height: 500px;
  overflow-y: auto;
  height: 240000000000000000px;
}

footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

.concert-one-regular {
  font-family: "Concert One", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}

.road-rage-regular {
  font-family: "Road Rage", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.libre-barcode-128-text-regular {
  font-family: "Libre Barcode 128 Text", system-ui;
  font-weight: 400;
  font-style: normal;
}

.prosto-one-regular {
  font-family: "Prosto One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.righteous-regular {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rubik-iso-regular {
  font-family: "Rubik Iso", system-ui;
  font-weight: 400;
  font-style: normal;
}

.slackey-regular {
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.jersey-25-charted-regular {
  font-family: "Jersey 25 Charted", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rubik-spray-paint-regular {
  font-family: "Rubik Spray Paint", system-ui;
  font-weight: 400;
  font-style: normal;
}