@font-face {
    font-family: "crawlspace";
    src: url("/fonts/crawlspace.ttf") format("truetype");
}

body {
  font-family: "crawlspace";
  background-color: white;
  color: black;
  font-size: 1.5em;
}

h1 {
  font-family: "crawlspace";
  text-align: center;
  z-index: 10;
  margin: 0.35em;
  text-decoration: none;
}

canvas {
  border: 4px solid black;
  width: 400px;
  height: 600px;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

a {
 color: inherit;
 text-decoration: none;
}

a:hover {
 background-color: black;
 color: white;
}

button {
 border: 2px solid black;
 font-family: inherit;
 background-color: white;
 font-size: 1.15em;
 padding: 0.25em 1.4em;
 transform: scale(90%);
 height: 40px;
 text-align: center;
 margin: 0.2em;
}

button:hover {
 border: 2px solid black;
 font-family: inherit;
 background-color: black;
 color: white;
 cursor: pointer;
}

#tooltip:hover {
 cursor: pointer; 
}

.blinker {
 animation: blink 1s steps(2) infinite; 
}

@keyframes blink {
  0% { opacity: 0 }
}

.color {
 height: 25px;
 width: 25px;
 border-radius: 50%;
 display: inline-block; 
 margin: 0.1em;
}

.color:hover {
 transform: scale(125%); 
}

.size {
 background-color: black; 
}

#controller {
  display: flex;
  justify-content: center;
  height: 400px;
}

.row {
 display: flex;
 width: 20px;
}

#chatbox {
 border: 2px solid black; 
 width: 400px;
 height: 250px;
 overflow-y: auto;
}