/* @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); */

* {
  margin: 0;
  padding: 0
}

*,
::after,
::before {
  box-sizing: border-box
}

:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat
}

html {
  block-size: 100%;
  -webkit-text-size-adjust: none
}

@media (prefers-reduced-motion:no-preference) {
  html:focus-within {
    scroll-behavior: smooth
  }
}

body {
  text-rendering: optimizeSpeed;
  min-block-size: 100%;
  overflow-x: hidden;
  font-size: 1.2rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.66;
  font-size-adjust: from-font;
  height: -moz-fit-content;
  height: fit-content
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%
}

:where(svg) {
  stroke: none;
  fill: currentColor
}

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

:where(svg):where(:not([width])) {
  inline-size: 5rem
}

:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  word-spacing: inherit
}

:where(textarea) {
  resize: vertical
}

@supports (resize:block) {
  :where(textarea) {
    resize: block
  }
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word
}

h1 {
  font-size: 2em;
  font-size: var(--size-step-4)
}

:where(ul, ol) {
  list-style-position: inside
}

:where(ul, ol)[role=list] {
  list-style: none
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation
}

:where(input[type=file]) {
  cursor: auto
}

:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  cursor: pointer
}

@media (prefers-reduced-motion:no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(.25, 0, .4, 1)
  }

  :where(:not(:active)):focus-visible {
    transition-duration: .25s
  }
}

:where(:not(:active)):focus-visible {
  outline-offset: 5px
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset]),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  inline-size: fit-content;
  touch-action: manipulation
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset])[disabled] {
  cursor: not-allowed
}

:root {
  color-scheme: light dark;
  background: canvas;
  color: canvasText;
  --gap: 1rem;
  --color-accent: goldenrod;
  --color-accent-var: darkgoldenrod;
}

html {
  font-family: "Permanent Marker", system-ui, sans-serif;
  font-size: 110%;
  line-height: 1.66;
}

body {
  display: flex;
  flex-direction: column;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }

  header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
  }
}

header {
  background: var(--color-accent, goldenrod);
  padding: var(--gap, 1rem);
  text-align: center;
}

main {
  width: 100%;
  max-width: 80ch;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: stretch;
  justify-content: center;
  padding: var(--gap);
}

figure {
  display: none;
  flex-direction: column;
  background: canvasText;
  padding: 1ch;
  margin-block: 1.66rem;
  margin-inline: auto;
  max-width: 30rem;
  max-height: 100vh;
  flex-grow: 1;
  flex-shrink: 1;
}

figure.live {
  display: flex;
}

figure img {
  max-width: 100%;
  max-height: 66vh;
}

figcaption {
  color: canvas;
  line-height: 1.1;
  margin-block-start: auto;
}

figcaption>* {
  margin-block-start: 1.66rem;
}


a.button {
  display: inline-block;
  text-decoration: none;
  background-color: var(--color-accent);
  color: white;
  padding: 1rem;
  transition: ease 150ms;
}

a.button:hover {
  background-color: var(--color-accent-var);
  color: white;
}