@font-face {
  font-family: 'APL';
  src: url('/pub/Apl385.ttf');
}

@font-face {
  font-family: 'Heiroglyphs';
  src: url('/pub/NewGardiner.ttf');
}

:root {
  --fg: black;
  --bg: antiquewhite;
}

.bg {
  background-color: var(--bg);
  background-image: url(/pub/bg.svg);
  background-size: 10px 10px;
}

body {
  color: var(--fg);
  background-color: var(--bg);
  background-image: url(/pub/bg.svg);
  background-size: 10px 10px;
  font-family: APL, Monospace; font-size: 16px; font-variant-ligatures: none;
}

.cnt div,
.cnt input[type="text"],
.cnt textarea,
.cnt a,
.cnt span,
.cnt pre {
  color: var(--fg);
  background-color: var(--bg);
  font-family: APL, Monospace; font-size: 16px; font-variant-ligatures: none;
}

.cnt textarea, .cnt input { font-size: 1rem; }

.inverted {
  --fg: white;
  --bg: black;
}

.navbar {
  font-weight: bold;
  padding: 1ch;
  box-sizing: border-box; border-radius: 3px;
}

.bordered {
  border-style: solid;
  border-image: url(/pub/border2.svg) 30% round;
  border-width: 30px;
  /* border: 5px solid black; border-radius: 5px; */
}

.picon.bordered {
  border-style: hidden;
  /* border-image: url(/pub/border2.svg) 30 round; */
}

.link { text-emphasis: none; text-decoration: none; }
.link:hover { color: rgba(1, 1, 1, 0.5); text-decoration: underline; }

.row { width: 100%; display: flex; flex-direction: row; align-items: center; }

.picon {
  width: 30vw; height: 30vw; margin: .5vh; overflow: hidden;
  --bg: transparent;
}
@media (min-aspect-ratio: 1) { .picon { width: 8vw; height: 8vw; margin: .5vw; } }

.para { padding: 1ch 0 1ch 1ch; }
@media (max-aspect-ratio: 1) { .para { padding: 1ch 0 1ch 0ch; } }

.idea {
  margin: 3px;
  --bg: rgba(1, 1, 1, 0.2);
  --fg: white;
}

.idea:hover {
  --bg: rgba(1, 1, 1, 0.1);
}

.heiroglyphs {
  font-family: Heiroglyphs;
}