/*
How to change alignment of elements within elements: https://stackoverflow.com/questions/56998624/html-css-align-text-in-center-of-rectangle

*/

html, body
{
  /*This is to prevent objects(like rectangles) from
  being pushed away from the corners of the website lol*/
  margin: 0; 
  padding: 0;
  
  font-family: "Courier New", Courier, monospace;
}

body
{
  background-color: #070707;
  background-size: 20%;
  color: #ffffff;
}

.highlight
{
  color: black;
  background-color: #ffffff;
  border-radius: 3px;
}

.header
{
  height: 0%;
  width: 100%;
  background: #121212;
  color: #070707;
  margin: 0;
  padding:0;
  
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header_text
{
  background: #121212;
  color: #808080;
  
  margin: 0;
  padding: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
}

.header_text:hover
{
  color: #ffffff;
}

.pixelart
{
  image-rendering: optimizeSpeed;
-ms-interpolation-mode: nearest-neighbor;
}