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%;
      overflow:hidden;
      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 / 20);
  -webkit-font-smoothing: grayscale;
  overflow:auto;
}


.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(25%, 100%), 1fr));
  gap: 0.5cqw;
  color:white;
  article {
    padding: 0.5cqw;
    border: 1px solid #aaa;
    display:flex;
    > * {
      flex:1;
    }
    img {
      max-width: 100%;
    }
    a {
      text-decoration:none;
      color:#aaa;
    }
    h2 {
      font-family:"Singlex", sans-serif;
      letter-spacing:0.15em;
      font-size:1.5cqw;
    }
  }
}