serlis/src/assets/style/main.scss

@import './colors.scss';
@import './fonts.scss';

* {
  margin: 0;
  padding: 0;
  animation: fadeIn 0.33s;
}

body {
  font-family: 'FantasqueSans', monospace;
  font-size: 1.15rem;
}

.pan-pink {
  color: $pan_pink;
}

.pan-yellow {
  color: $pan_yellow;
}

.pan-cyan {
  color: $pan_cyan;
}

.hint {
  font-style: italic;
}

@keyframes fadeIn {
  0% { opacity: 0%; }
  100% { opacity: 100%; }
}

@media (prefers-color-scheme: light) {
  body {
    background: $base_latte;
    color: $text_latte;
  }
  header{
    h1.cli {
      .pink {
        color: $pink_latte;
      }
      .yellow {
        color: $yellow_latte;
      }
      .cyan {
        color: $sky_latte;
      }
      .hint {
        color: $subtext0_latte;
      }
    }
  }

  main {
    fieldset {
      border-color: $text_latte;

      a {
        color: $mauve_latte;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: $base_macchiato;
    color: $text_macchiato;
  }
  header{
    h1.cli {
      .pink {
        color: $pink_macchiato;
      }
      .yellow {
        color: $yellow_macchiato;
      }
      .cyan {
        color: $sky_macchiato;
      }
      .hint {
        color: $subtext0_macchiato;
      }
    }
  }

  main {
    fieldset {
      border-color: $text_macchiato;

      a {
        color: $mauve_macchiato;
      }
    }
  }

}