@charset "UTF-8";
body {
  margin: auto;
  padding: 1em;
  max-width: 64em;
  font-family: "courier new", monospace;
  color: #e9c;
  background: black;
  word-wrap: break-word; }

a {
  text-decoration: none;
  color: #e2c;
  font-weight: bold; }
  a:hover {
    color: #c1b; }

h1 {
  font-family: monospace; }

header {
  padding-top: 5px; }

main {
  border: 6px double #e9c;
  padding: 0 1em;
  margin: 1em 0; }

footer {
  text-align: center; }

pre, :not(pre) > code {
  background: #e9c;
  color: black;
  border: solid #e9c;
  border-radius: 0.25em;
  border-width: 0.2em 0.5em; }

pre {
  border-width: 0.5em 1em; }

input, textarea, button {
  background: #e9c;
  color: black;
  border: solid #e9c;
  border-radius: 0.25em;
  display: block;
  margin: 1em auto;
  max-width: 100%; }

button {
  border-radius: 1em; }
  button:hover {
    background-color: #e6b;
    border-color: #e6b; }

nav {
  overflow: hidden;
  background-color: #e9c;
  color: black;
  width: 100%;
  border-radius: 0.25em; }
  nav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px;
    text-decoration: none; }
    nav a:hover {
      background-color: #e6b;
      color: black; }

hr {
  border-color: #e9c; }

.fancyboi::before {
  content: "$ "; }

@media (prefers-reduced-motion: no-preference) {
  .fancyboi {
    overflow: hidden;
    white-space: nowrap;
    animation: reveal 8s linear;
    text-overflow: "█"; }
  @keyframes flash {
    50% {
      opacity: 0; } }
  @keyframes reveal {
    from {
      width: 2em; }
    to {
      width: 100%; } }
    .fancyboi::after {
      content: "█";
      animation: flash 1s step-end infinite; } }