* {
  box-sizing: border-box;
}
@font-face {
  font-family: 'TGC';
  src: url(/assets/terminal-grotesque.ttf);
}
@font-face {
  font-family: 'TGO';
  src: url(/assets/terminal-grotesque_open.otf);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("/assets/noise.gif");
    opacity: 0.09;
    pointer-events: none;
}
body {
    background-image: url(/assets/homepage_bg.jpg);
}
h1 {
  font-family: 'TGC'; 
  text-shadow: 1px 1px rgb(255, 255, 255);
}
h2 {
  font-family: "TGO";
  text-shadow: 1px 1px rgb(255,255,255);
}
p {
  font-family: "Courier New", monospace;
  text-shadow: 1px 1px rgb(80, 80, 80);
}
.container {
background-color: rgba(0,0,0,0.5);
max-width: 964px;
margin: auto;
border: 2px solid rgb(0, 0, 0);
color: black;
border-spacing: 2px;
padding: 6px;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
}
.siteheader {
    background-color: rgb(100, 100, 100);
    background-image: url(/assets/spooder.png);
    background-position: center center;
    border: 1px solid rgb(0, 0, 0);
    border-spacing: 2px;
    /*padding: 3px;*/
    text-align: center;
    margin-bottom: 6px;
    width: 100%;
}
.navbar {
    background-color: rgb(100, 100, 100);
    /*padding: 3px;*/
    width: 100%;
    border: 1px solid rgb(0, 0, 0);
    margin-bottom: 6px;
    font-family: "Times New Roman", serif;
}
.navbar ul {
  display: flex;
  padding: 13px;
  margin: 1px;
  list-style-type: none;
  justify-content: space-evenly;
}
.navbar li a {
  color: rgb(77, 0, 0);
  text-decoration: none;
}
.navbar li a:hover {
  color: red;
  text-decoration: none;
}
.leftcolumn {
    background-color: rgb(100, 100, 100);
    border: 1px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 3px;
    width: 25%;
    order: 1;
}
.centercolumn {
    background-color: rgb(100, 100, 100);
    border: 1px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 3px;
    width: 50%;
    order:2;
}
.rightcolumn {
    background-color: rgb(100, 100, 100);
    border: 1px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 3px;
    width: 25%;
    order: 3;
}
.row {
  display: flex;
  gap: 6px;
}
.footer {
    background-color: rgb(100, 100, 100);
    border: 1px solid rgb(0, 0, 0);
    border-spacing: 2px;
    /*padding: 3px;*/
    text-align: center;
    margin-top: 6px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}
@media (max-width: 600px) {
  .row {
    flex-direction: column;
  }

  .leftcolumn,
  .centercolumn,
  .rightcolumn {
    width: 100%;
  }
  .centercolumn {
    order: 1
  }
  .leftcolumn {
    order: 2
  }
  .rightcolumn {
    order: 3
  }
}