@font-face { 
  font-family: "Venice-Classic";
  src: url('https://harlequinred.neocities.org/fonts/VeniceClassic.woff') format('woff'); 
  font-weight: normal;
  font-style: normal;} 

@font-face { 
  font-family: "PixelMix";
  src: url('https://harlequinred.neocities.org/fonts/pixelmix.woff') format('woff'); 
  font-weight: normal;
  font-style: normal;} 


body {
  background-image: url("https://64.media.tumblr.com/d15a5ad69601851943efd9427b376115/f2d16412df23a92f-ff/s250x400/22647978b268d39dd51ac6709b490614b190cb4c.gifv");
  margin: auto;
  font-family: "PixelMix";
}

.container { 
  display: grid; /* let it be on the record i spent a whole hour trying to troubleshoot this only to find out i had a random = in the template */
  grid-template-areas: 
    "header header"
    "sidebar stuff"
    "footer footer";
  grid-template-columns: 150px 600px; 
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  margin: auto ;
  gap: 8px;
  padding: 3px;
}

.header {
  grid-area: header;
  text-align: center;
  background: #111111;
  color: #ee0000;
  font-family: "Venice-Classic";
  font-size: 20px;
}

.sidebar {
 grid-area: sidebar; 
  text-align: center;
  color: #eeeeee;
  background: #830909;
  border-radius: 4px;
  font-size: 10px;
  padding: 20px;
}

.sidebar h2 {
  text-align: center;
  font-style: italic;
  color: #eeeeee;
}

.sidebar ul {
  list-style-type: none;
  list-style-position: outside;
}

.stuff { 
  grid-area: stuff;
  text-align: center;
  color: #eeeeee;
  background: #830909;
  border-radius: 4px;
  padding: 20px;
  font-size: 12px;
}

.footer {
 grid-area: footer; 
 text-align: center;
 background: #111111;
 color: #ee0000;
 font-size: 6px;
}