/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* later/style.css */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* configuration */

  :root {
    --header: #f2d254;
    --content: #ffffd1;
    --border: color-mix(in srgb, var(--header) 66%, black);
  }
  @font-face {
    font-family: 'Some Time Later';
    src: url('/assets/some-time-later.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* common */

  h1, h2, h3 { font-family: 'Some Time Later'; font-weight: bold; }
  h1 { font-size: 300%; line-height: 1.1; }
  h2 { font-size: 250%; }
  h3 { font-size: 200%; }

  a { text-decoration: none; font-weight: bold; }
  textarea { width: 20em; }
  button { font-size: 90%; font-weight: bold; }
  button + button { margin-left: 1em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* structure */

  @media screen and (min-width: 1024px) {
    div.container { display: flex; }
  }
  div.controls { flex-basis: 30%; }
  div.canvas { flex-basis: 70%; }

  h1 { margin: 0px; margin-bottom: 0.5ex; }
  div.row { margin: 0px; margin-bottom: 2ex; }
  div.block + div.block { margin-top: 2ex; }
  div.credits { margin: 1ex 1em; }

  div.controls { padding: 1ex 1em; }
  div.canvas { padding: 1ex 1em; }

  h1 { padding: 1ex 1em; text-align: center; }
  div.row { padding: 2ex 2em; text-align: center; }
  div.credits { padding: 2ex 2em; text-align: center; }

  div.block:has(label) { display: flex; justify-content: center; }
  label { display: flex; gap: 1em; align-items: center; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* motif */

  h1 { border: 1px solid var(--border); border-top-left-radius: 0.5ex; }
  div.row { border: 1px solid var(--border); }
  button { border: 1px solid var(--border); border-radius: 1ex; }
  div.credits { border: 1px solid var(--border); }

  body { background: url('/assets/sponge.webp'); }
  h1 { background: var(--header); }
  div.row { background: var(--content); }
  div.credits { background: var(--content); }
  button { padding: 1ex 1em; background: var(--header); }

  a { color: #000080; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */