body, html {
  background-color: black;
  margin:0;
  padding:0;
}
* {
  box-sizing:border-box;
}
@font-face { 
  font-family: "Singlex"; 
  src: url("Singlex.woff2") format("woff2"); 
  descent-override: 0%;
  ascent-override: 100%;
}
@font-face { 
  font-family: "topaz"; 
  src: url("Topaz_Plus_a1200_CP437.woff2") format("woff2"); 
}
@font-face { 
  font-family: "code"; 
  src: url("FontWithASyntaxHighlighter-Regular.woff2") format("woff2"); 
}
body {
  font-family: "Singlex", sans-serif;
  color:cyan;
  line-height:1.3;
  letter-spacing:0.1em;
}
* {
  margin:0;
  font-size:var(--font-size);
  line-height:var(--line-height);
}
b {
  color:red;
}
i, em {
  color:yellow;
}
h1 {
  color:red;
}
img {
  object-fit:cover;
}
img[contain] {
  object-fit:contain;
}
.center {
  display:grid;
  place-items:center;
}
grid-system {
  display: grid;
  grid-template-columns: repeat(var(--columns, 50), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 50), minmax(0, 1fr));
  aspect-ratio: 4 / 3;
  max-width: 100vw;
  max-height: 100vh;
  margin-inline: auto;
  container-type: size;
  border: 1px solid blue;
  cell {
    position: relative;
    grid-area: var(--landscape, var(--portrait));
    z-index:var(--layer);
    @container (max-aspect-ratio: 1/1) { grid-area: var(--portrait, var(--landscape)); }
    container-type: size;
  }
  cell > * {
      height:100%;
      width:100%;
      display: flex;
      flex-direction: column;
  }
  cell[data-locked="true"] {
    pointer-events:none;
  }
}

input, select {
  width: 100%;
  height:100%;
}

details p {
  margin:0;
  + details {
    margin-left:1rem;
  }
}
.amiga {
  letter-spacing:0;
  width:100%;
  font-family: "topaz";
  line-height: 1;
  font-size: calc(100cqw / 40);
  -webkit-font-smoothing: grayscale;
  overflow:auto;
}