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

/*
Colors
======
*/
$bg: colors.$paper;
$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: $bg;
  color: $fg;
  font-family: Alkhemikal;
  font-size: 1.5rem;
}

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

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

main, article {
  padding: 0.5em;
}

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;
}