@font-face {
    font-family: 'jgs_Font';
    src: url('jgs_Font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@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"); 
}
html {
  margin: 0;
}
* {
  box-sizing: border-box;
  margin:0;
  font-size:var(--font-size);
  line-height:var(--line-height);
}
:where(grid-system) {
  display: grid;
  grid-template-columns: repeat(var(--columns, 50), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 50), minmax(0, 1fr));
  /*background:
    conic-gradient(
      #000 0 0.25turn,
      #222 0 0.5turn,
      #000 0 0.75turn,
      #222 0 1turn
    )
  ;*/
  background:black;
  container-type: size;
  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;
  }
}
body {
  background-color: black;
}
.jgs {
  font-family:'jgs_Font';
  line-height:1;
}
.slide {
  aspect-ratio: 4 / 3;
  max-width: 100vw;
  max-height: 100vh;
  margin-inline: auto;
  container-type: size;
  border: 1px solid blue;
}
a {
  color:cyan;
}
p, figcaption {
  display:block;
}
b {
  color:red;
}
i, em {
  color:yellow;
}
h1 {
  color:red;
  font-size:4cqw;
}
h2 {
  color:yellow;
  font-size:4cqw;
}
img,
video {
  object-fit: contain;
  max-width: 100%;
}
img[cover], video[cover] {
  object-fit:cover;
}
.center {
  display:grid;
  place-items:center;
}
figcaption {
  font-size:2.5cqw;
  line-height:1;
  text-align:center;
}
p {
  font-size:2.5cqw;
  text-align:center;
  line-height:1;
}
blockquote {
  display:grid;
  place-content:center;
  p {
    font-size:3cqw;
    color:lime;
  }
  footer {
    text-align:center;
    color:#aaa;
    font-size:2cqw;
  }
}
.crisp {
  image-rendering:pixelated;
}
pre:has(code) {
  border: 2px solid #aaa;
  background-color: #000;
  color: #f1f1f1;
  padding: 2cqw;
  border-radius: 1cqw;
  font-size: 5cqw;
  line-height: 1.1;
  code {
    font-family: "code", monospace;
  }
}