style.css

:root {
  font-family: system-ui, sans-serif;
  font-size: 100%;
}


/*  = = = = = = = = = = VARIABLES: Colours = = = = = = = = = =*/
:root {
  --color-bg-01:      hsl(359,0%,90%);
  --color-bg-02:      hsl(359,0%,80%);
  --color-text:       hsl(359,0%,20%);
  --color-link:       hsl(359,0%,40%);
  --color-focus:      hsl(359,10%,90%);
}


@media (prefers-color-scheme: dark) {

  :root {
    --color-bg-01:    hsl(359,0%,20%);
    --color-bg-02:    hsl(359,0%,25%);
    --color-text:     hsl(359,0%,90%);
    --color-link:     hsl(359,0%,70%);
    --color-focus:    hsl(359,10%,40%);
  }

}

@media (forced-colors) {

  :root {
    --color-bg-01:    Canvas;
    --color-bg-02:    Canvas;
    --color-text:  CanvasText;
    --color-link:  LinkText;
    --color-text--disabled: GrayText;
  }

}

/* Display-P3 color, when supported. https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --bright-green: color(display-p3 0 1 0);
  }
}

@media (color-gamut: p3) {
    /* Do colorful stuff. */
}

body {
  background-color: var(--color-bg-01);
  color: var(--color-text);
}

a {
  color: var(--color-link);
}

/* F O R M   B A S I C   S T Y L E S  */
label { }

.form-field-wrapper {
  margin-bottom: .5rem;
}

.form-field-hint {
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  :focus {
    outline-color: var(--color-focus);
  }
  
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
    img:hover {
      opacity: 1;
    }

  fieldset {}
  
  input,
  textarea,
  select {
    /* fix Safari dark behaviour */
    color: var(--color-text);
    background-color: var(--color-bg-02);
    border: 1px solid var(--color-text); /* fix Safari Datetime */
  }

  * :disabled {
    opacity: .2;
  }
}

/*  L A Y O U T  */

@media (min-width: 900px) {
    .grid-wrapper {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 1fr;
      margin: 0 0 1rem;
  }
}
.grid-item-wrapper {}


body.design-01 {}
body.design-01 label { }

body.design-01 input,
body.design-01 textarea,
body.design-01 select {
    font-size: 100%;
  }


body.design-02 label {
  display: inline-block;
  width: 12rem;
  font-size: 100%;
}