site/src/css/global.scss

@use "colors";
@use "fonts";

/*
Colors
======
*/
$bg: colors.$base-800;
$fg: scale-color(colors.$magenta-600, $lightness: -20%);
$fg-logo: colors.$magenta-600;
$link: colors.$green-600;
$bg-hover: scale-color(colors.$green-400, $alpha: -75%);
$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%);

body {
  background-color: colors.$base-800;
  color: colors.$paper;
  font-family: Alkhemikal;
  font-size: 1.5rem;
}

::selection {
  background: $bg-highlight;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

main, article {
  padding: 1em;
  margin: 0 2em;
  color: $fg;
  border: 16px solid;
  border-image: url(../img/nine-patch.png) 32 round;
  -webkit-border-image: url(../img/nine-patch.png) 32 round;
  background-color: colors.$paper;
  box-shadow: 0px 0px 20px colors.$black;
}

main :where(ol, ul), article :where(ol, ul) {
  all: revert;
  margin: 0;
}

header.header_main {
  text-align: center;
}

a {
  color: $link;
  border-radius: 10px;
}

a:hover, a:active {
  background-color: $bg-hover;
}

a.logo, a.logo:hover, a.logo:active {
  font-size: 3em;
  color: $fg-logo;
  text-decoration: none;  
}

.navbar :where(li) {
  display: inline-flex;
}

p {
  line-height: 1.5;
  margin-bottom: 1em;
}

ul, ol {
  margin-bottom: 1em;
}

footer.footer_main {
  margin: 2em 0 1em 0;
  text-align: center;
}

main > :last-child, header > :last-child{
  margin-bottom: 0px;
}