body {
  background-color: #2D2D33;
  background-repeat:repeat;
  font-family: Sans-Serif;
}

h1 {
  font-size: 64px;
  font-family: "Coral Pixels", Sans-Serif;
}

.nav-item {
  padding: 12px;
  margin-top: 12px;
  background-color: #CAD1A7;
  background-size: cover;
  background-repeat: no-repeat;
  font-weight: 900;
  font-family: "Coral Pixels", serif;
  box-shadow: 4px 4px;
}

.nav-item:hover {
  box-shadow: 0px 0px;
}

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "nav main-container"
  ;
  width: 80%;
  gap: 12px;
  margin: auto;
  margin-top: 52px;
  grid-template-columns: 20% 80%;
}

.container > .header {
  grid-area: header;
  background-color: #666;
  text-align: center;
  font-size: 35px;
  color: white;
}

.container > .nav {
  grid-area: nav;
  overflow: scroll;
  float: left;
  background: #505538;
  padding: 12px;
}

.container > .main-container {
  grid-area: main-container;
  background-color: #CAD1A7;
  height: 500px;
  overflow-y: scroll;
  padding: 12px;
  display: grid;
}

.small-header {
  background-image: url("updates.png");
  font-size: 24px;
  color: white;
  background-size: 100%;
  text-align: center;
  background-repeat: no-repeat;
  margin: auto;
  padding: 24px;
  margin-bottom: 24px;
}