* {
  box-sizing: border-box;
}

:root {
  --bg: white;
  --primary: black;
}

body {
  background-color: var(--bg);
  color: black;
  font-family: Verdana;
}

.page {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  grid-template-rows: 1fr max-content max-content max-content;
  gap: 0px;
}

body div {
  border: solid 2px var(--primary);
  padding: 0.5rem;
  margin: 0.5rem auto;
  width: 100%;
}

.head {
  grid-column: 1 / 4;
  grid-row: 1;
}

.navbar {
  grid-column: 1 / 4;
  grid-row: 2;
}

.navbuttons {
 list-style-type: none; 
 margin: 0;
 padding: 0;
 overflows: hidden;
}

.navbuttons li {
  float: left;
}

.navbuttons li a {
  display: block;
  text-align: center;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
}

.left {
  grid-column: 1;
  grid-row: 3;
}

.center {
  grid-column: 2;
  grid-row: 3;
}

.right {
  grid-column: 3;
  grid-row: 3;
}

.bottom {
  grid-column: 1 / 4;
  grid-row: 4;
}