@use "mixins" as *;

@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,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  @include breakpoint("sm") {
    text-align: left;
  }
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

main,
article {
  padding: 1em;
  color: $fg;
  border: 16px solid colors.$paper;
  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;
  @include breakpoint("sm") {
    margin: 0 2em;
  }
}

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 1em 1em 1em;
  text-align: center;
}

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

.float-right {
  margin: auto;
  margin-bottom: 1em;
  width: 100%;
  height: auto;
  max-width: 288px;
  @include breakpoint("md") {
    float: right;
    margin-left: 1em;
  }
}

.sigil {
  display: inline;
  image-rendering: crisp-edges;
  vertical-align: text-bottom;
}