@font-face {
  font-family: "Go Mono";
  src: url("/assets/GoMonoRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  /*unicode-range: U+00-7F;*/
}

@font-face {
  font-family: "Architext";
  src: url("/assets/Architext.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Kids Sketchy";
  src: url("/assets/KidsSketchy.woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+00-2F, U+3A-7F;
}

@font-face {
  font-family: "Note Saia";
  src: url("/assets/NoteSaiaRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Avant Garde";
  src: url("/assets/AvantGardeMedium.otf") format("opentype");
  font-weight: medium;
  font-style: normal;
}

@font-face {
  font-family: "Avant Garde";
  src: url("/assets/AvantGardeMediumOblique.otf") format("opentype");
  font-weight: medium;
  font-style: italic;
}

@font-face {
  font-family: "Blippo";
  src: url("/assets/BlippoRegular.woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Retro Stereo Wide";
  src: url("/assets/RetroStereoWide.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Yagi";
  src: url("/assets/Yagi.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Yagi Double";
  src: url("/assets/YagiDouble.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Memphis";
  src: url("/assets/MemphisMedium.woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Memphis";
  src: url("/assets/MemphisBold.woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Elegant Typewriter";
  src: url("/assets/ElegantTypewriter.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/Inter.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Univers";
  src: url("/assets/UniversRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  font-family: Univers;
  -webkit-font-smoothing: antialiased;
  --border-width: 2px;
  --padding: 2px;
}

* {
  scrollbar-width: thin;
}

main {
  background: #7fa092;
  width: 100dvw;
  height: 100dvh;
  position: absolute;
  z-index: -2;
}

button {
  border: var(--border-width) outset #ddd;
  padding: 1px;
}

img {
  display: block;
}

button:active:not(:disabled) {
  border-style: inset;
}

button:disabled {
  cursor: auto;
  background: #aaa;
  /*border: #bbb ridge var(--border-width);*/
  border-color: #bbb;
}

textarea {
  resize: none;
}

textarea:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

hr {
  border: none;
  height: 1px;
  background: black;
}

ul {
  list-style-type: "–  ";
}

table {
  width: 100%;
  border-collapse: collapse;
}

tbody > tr {
  border-top: 1px solid black;
}

.box {
  position: absolute;
  /*width: min-content;*/
  cursor: grab;
  box-shadow: 1px 1px 8px 2px #0002;
  z-index: 0;
}

[dragging] .box {
  cursor: grabbing;
}

.device {
  padding: var(--padding);
  border: var(--border-width) outset #ddd;
  background: #ccc;
}

.screen {
  font-family: Go Mono;
  padding: 1.5px 2px 1.5px;
  border: var(--border-width) inset #ddd;
  background: #000;
  color: #fff;
  cursor: auto;
  overflow: hidden;
}

.screen::selection {
  background: #ddd;
  color: #000;
}

.screen input {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

.screen *::selection {
  background: #ddd;
  color: #000;
}

.error {
  color: #f88 !important;
  word-break: break-all;
}

[hidden] {
  display: none !important;
}