html, body { height: 100%; margin: 0; }
body { background-color: #0f0f23; color: #009900; font-family: Consolas, monospace, sans-serif !important; text-transform: uppercase; font-size: 100%; display: flex; justify-content: center; }

p { font-size: 14px; margin: 10px 0; }
h3 { margin-top: 0; margin-bottom: 10px; font-size: 16px; }

header { padding: 10px; border: 2px solid #009900; }
header h1 { margin: 0; font-size: 22px; }
header h2 { margin: 0; font-size: 16px; }

main { width: 100%; max-width: 900px; display: flex; flex-direction: column; flex: 1; }
article { flex: 1; border: 2px solid #009900; border-top: 0; overflow: auto; padding: 10px; }
footer { padding: 10px 15px; border: 2px solid #009900; border-top: 0;}

#messages { padding: 0; list-style: none; margin: 0; }

hr { margin: 10px -15px; border: 1px solid #009900; }

.form-input-box { display: flex; }
.form-input-box input  { flex: 1; margin-right: 20px; }

input,
textarea { padding: 10px 10px; appearance: none; border: 2px solid #009900; background-color: transparent; font-family: Consolas, sans-serif !important; text-transform: uppercase; color: #009900; }
input:focus,
textarea:focus { outline: none; }
input::placeholder,
textarea::placeholder { color: #008800; font-weight: bold; }

button { appearance: none; border: 2px solid #009900; padding: 6px 10px; margin-bottom: 5px; position: relative; box-sizing: border-box; background-color: #0f0f23; color: #009900; font-weight: bold; font-family: Consolas, sans-serif !important; text-transform: uppercase; }
button::after { content: ''; border: 2px solid #009900; position: absolute; background-color: #0f0f23; width: 100%; height: 100%; left: 3px; top: 3px; z-index: -1; }

button.clicked,
button:active { transform: translate(5px, 5px); }
button.clicked::after,
button:active::after { left: -2px; top: -2px; }

button.clicked { background-color: #004400; pointer-events: none; }
button.clicked::after { display: none; }

button:disabled,
button:disabled::after { color: #004400; border-color: #004400; }

.button-list { display: flex; flex-wrap: wrap; }
.button-list + .button-list { padding-top: 5px; }
.button-list > * { margin-right: 15px; margin-bottom: 10px; }

.blinker { display: inline-block; width: 10px; height: 1.2em; background-color: #009900; animation: blink 1s steps(1, start) infinite; }

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}


.modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); background-color: rgba(0, 0, 0, 0.5) }
.modal-container { border: 2px solid #009900; padding: 15px; width: 80%; max-width: 600px; background-color: #0f0f23 }
.modal-container form { display: flex; flex-direction: column; }
.modal-container form > * { margin-top: 20px; }
.modal h1 { margin: 0; font-size: 22px; }
.modal h2 { margin: 0; font-size: 16px; }