@import url(https://db.onlinewebfonts.com/c/dd053b079ba96b177b08e16b81b3ae1f?family=F5x7+Dot+matrix+Character+LCD+font);
@import url('https://fonts.googleapis.com/css2?family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap');

.lcd-theme {
  --bg: rgb(155, 185, 0);
  --fg: rgb(80, 100, 30);
  --font: "F5x7 Dot matrix Character LCD font";
}

.eink-theme {
  --bg: #fffff8;
  --fg: #111111;
  --font: "Victor Mono";
}

.gb-theme {
  --bg: rgb(123, 130, 16);
  --fg: rgb(41, 65, 57);
  --font: "F5x7 Dot matrix Character LCD font";
}

body,
pre {
  font-family: var(--font);
  font-size: 20px;
  font-variant-ligatures: none;
}

html,
.fullscreen {
  background-color: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  height: 100%;
  line-height: 2rem;
  margin: 0;
  width: 100%;
}

.container {
  align-self: center;
  flex-grow: 1;
  max-width: 1000px;
  padding: 1rem;
  text-align: left;
  width: calc(100% - 2 * 1rem);
}

.footer {
  background-color: var(--fg);
  bottom: 0;
  display: flex;
  justify-content: center;
  position: sticky;
}

input {
  display: none;
}

nav {
  color: var(--bg);
  display: flex;
  flex-grow: 1;
  gap: 2rem;
  max-width: 1000px;
  padding: 1rem;

  a {
    color: var(--bg);
    font-weight: bold;
    text-decoration: none;
  }

  span.filename {
    text-align: right;
  }
}

.input,
.cursor {
  display: inline;
  white-space: pre-wrap;
}

.blink {
  animation: 0.25s blink infinite 0.5s;
}

@keyframes blink {
  from, to {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}