@font-face { font-family: wingdings; src: url(wingding.ttf); }
@font-face { font-family: comic; src: url(COMIC.TTF); }

:root {
  --bg_color: #64728c;
  --bx_color: #515e75;
  --bd_color: #232933;
}

html { width: 100%; height: 100%; }
.in { color: white; font-size: 14px; }

body { 
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 12px;
  color: black;
  background-color: var(--bg_color);
  margin: 0px;
  padding: 0px;
}

#text {
  background-color: white;
  font-family: monospace;
  font-size: 14px;
  padding: 2px;
  border: 1px solid black;
  color: black;
}

input[type="text"] {
  outline: none;
  border: 1px solid black;
  border-radius: 0px;
  font-size: 12px;
  padding: 3px;
  font-family: monospace;
}

#submit {
  background-color: var(--bg_color);
  border: 1px solid black;
  font-family: monospace;
  font-style: italic;
  padding: 3px;
  font-size: 15px;
  width: 200px;
  text-align: center;
  color: #232933;
}

#box {
  background-color: var(--bx_color);
  padding: 10px;
  border: 1px solid var(--bd_color);
  width: 275px;
  height: 200px;
  position: absolute;
  margin: 0px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background-image: url("wingdings_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.redacted {
  background-color: var(--bd_color);
  color: var(--bd_color);
  whitespace: nowrap;
}