body {
  display: grid;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8) ), url('images/background-dithered.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center; 
  background-attachment: fixed;
  background-color: #234640;
  color: #e6e6fa;
  font-family: monospace;
  font-size: 18px;
}

a {
  color: #8bdeff;
  /* background-color: yellow; */
  font-weight: bold;
}

p {
  font-size: 18px;
}

div {
  margin: 10px 0; 
  padding: 0 40px;  
  border: solid white 1px;
  min-width: 150px;
}

h1{
    text-align: center;
}

h3{
  text-align: center;
}

ul {
  list-style-type: none;
  margin-left: 0;
  padding: 0;
}

#main {
  border: none; 
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; 
  grid-template-areas:
    "header header header"
    "side-left center side-right";
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  max-width: 90%;     
}

.header {
  grid-area: header;
  padding: 20px;
  font-size: 30px;
  color: #d9f2e6;
}

#center {
  grid-area: center;
  place-items: center;
  border: none;
}

#side-left{
  grid-area: side-left;
  place-items: center;
  border: none
}

#side-right {
  grid-area: side-right;
  place-items: center;
  border: none;
}

#center div{
  height: fit-content;
}