.pixelated_image{
    image-rendering: pixelated;
}

a {
    color: rgb(90, 90, 90);
}

a:hover {
  color: red;
}

a.button {
    padding: 5px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
}

a.button:hover {
  box-shadow: 0.1em 0.1em;
}

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: 1fr 4fr;
  gap: 3px;
  background-color: black;
  margin: auto;
  padding: 5px;
  width: 65%;
}
.container div, section, nav, h1, article {
  background-color: white;
  padding: 10px;
}
.container section.header {
  grid-area: header;
  text-align: center;
}
.container nav.menu {
  grid-area: menu;
  display: flex;
  flex-direction: column;
}
.container div.content {
  grid-area: content;
}
.container div.footer {
  grid-area: footer;
  text-align: center;  
}
.container nav.menu a {
  margin: 2%;
}
@font-face {                  
  font-family: 'CHNOPixel';
  src: url(https://humantooth.neocities.org/fonts/CHNOPixelCodePro-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {                  
  font-family: 'Barecast';
  src: url(https://humantooth.neocities.org/fonts/Barecast-Regular.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
} 


#homebutton {
  font-family: 'CHNOPixel'; 
  font-size: 16pt;
  text-transform: uppercase;
}
.content, .footer {
  font-family: 'Barecast';
}
.button.active {
  background-color: black;
  color: white;
  pointer-events: none;
}
.container .header h1 {
  font-family: 'CHNOPixel';
}
.container .header h1:hover {
  color: red;
}
nav.menu a.button {
  font-family: 'CHNOPixel';
}

body {
  background-image: url('assets/images/wiese-dithered.png');
  background-size: 100%;
  background-repeat: repeat-y;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
}