@font-face {
  font-family: "ptmono";
  src: url("PTM55FT.ttf") format("truetype");
}

/* Variables */

:root {


}



/* makes sizing simpler */
S *,
*::before,
*::after {
  box-sizing: border-box;
}

/* remove default spacing */
/* force styling of type through styling, rather than elements */

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* dark mode user-agent-styles */

html {
  font-family: "ptmono", monospace;
  color: #fff;
  background-color: #333333;
 /*  color-scheme: dark light;  */
  }

/* min body height */

body {
  min-height: 100vh;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #FF0000;
}

/* mouse over link */
a:hover {
  color: #00FF00;
}

/* selected link */
a:active {
  color: #0000FF;
}

.centered-header h1 {
  font-size: 2em;
  text-align: center;
  padding: 20px;
  background-color: #532b2b;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.component {
  margin-top: 20px;
  padding-bottom: 30px;
}

.component h2 {
  font-size: 1.6em;
  padding: 20px;
  text-align: center;
}

.component table {
  background-color: #222222;
  padding: 0.5em;
  border: 1px solid;
  /* border-color: #ffffff;  */
  border-collapse: collapse;
  }

  .component th { 
   padding: 0.5em; 
   border: 1px solid; 
   border-color: #aa7373; 
   }

  .component td {
  padding: 0.5em;
  border: 1px solid;
  border-color: #aa7373;
  }


 /* Hide columns on smaller screens */


  @media (max-width: 600px) {
     .hide-on-mobile {
      display: none;
     }
  }

.footer p {
  text-align: center;
  padding: 10px;
}