/* FONTS */

@font-face {
  font-family: 'Pixelham';
  src: url('/fonts/Pixelham-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('/fonts/Silkscreen-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Where TF did this title crap come from? Should I just delete it? Why are you green? */

.title {
    color: green;
}

/* GRID LAYOUT */

.layout {
  width: 90%;
  position: absolute;
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%);
    
  display: grid;
    
  grid:
    "header header header" auto
    "leftSide body rightSide" 1fr
    "footer footer footer" auto
    / minmax(auto, 200px) minmax(auto, 600px) minmax(auto, 200px);
    justify-content: center;
  gap: 8px;
}

/* PAGE SECTIONS */

.header { grid-area: header; 
}
.leftSide { grid-area: leftSide;
}
.body { grid-area: body; 
  border: 4px solid orange;
  border-radius: 30px;
  padding: 20px;
  background-color: #ffeca6
}
.rightSide { grid-area: rightSide; 
}
.footer { grid-area: footer; 
}

/* FORMATTING (is there a better way to do this? probably!) */

.header, .body, .footer {
    display: flex; /* This and the following 3 lines exist */
    flex-direction: column; /* to center the elements inside each section. */
    justify-content: center; /* Surely a cleaner way exists to do this. */
    align-items: center;
}
.leftSide, .rightSide {
  padding: 15px;
}
.placeholder {
  border: 5px solid orange;
  border-radius: 15px
}
p, ul {
    font-size: 22px;
}
h1 {
  margin-bottom: 0; 
}
h2 {
    margin-top: 2px;
}