@use "colors";
@use "fonts";
@use "mixins" as *;

/*

VARIABLES
===============================================================================

*/



/*

COLORS
===============================================================================

*/
$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%);

html {
  font-size: 20px;
  font-family: "Linux Libertine", "Times New Roman", Times, serif;
}

body {
  background-color: #{colors.$bg};
  color: #{colors.$paper};
}

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

main,
article {
  font-size: 1rem;

  &.page {
    border: 32px solid transparent;
    border-image: url(../img/nine-patch.png) 32 round;
    -webkit-border-image: url(../img/nine-patch.png) 32 round;
    background-color: #{colors.$paper};
    color: $fg;
    box-shadow: 0 8px #{colors.$base-850};
    padding: 1em;
  }

  @include breakpoint("sm") {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
    box-shadow: 8px 8px #{colors.$base-850};
  }

  ol,
  ul {
    all: revert;
    margin: 1em 0;
  }

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-align: center;
    @include breakpoint("md") {
      text-align: left;
    }
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1em;
  }

  :last-child {
    margin-bottom: 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;
}

nav.navbar {
  margin-bottom: 1em;

  li {
    display: inline-flex;
  }
}

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

.gba-portrait {
  margin: auto;
  margin-bottom: 1em;
  transform: rotate(2deg);
  border: 4px solid #e7e2cc;
  background: white;
  box-shadow: 4px 4px 0px #{colors.$base-300};
  padding: 8px;
  width: 100%;
  height: auto;
  max-width: 288px;
  @include breakpoint("md") {
    float: right;
    margin: 1em;
  }
}

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