---
# front-matter
---

@charset "utf-8";

// Font specifications. I keep changing my mind on what are the most pleasant
// fonts to my eyes, so I won't bother commenting them here.'
$serif-font-family: ui-serif, "Roboto Serif", "Noto Serif", Tinos, serif,
  "Noto Emoji", "Noto Color Emoji", emoji;
$sans-serif-font-family: ui-sans-serif, "Roboto Flex", Roboto, "Noto Sans",
  Arimo, sans-serif, "Noto Emoji", "Noto Color Emoji", emoji;
$monospace-font-family: ui-monospace, "Roboto Mono", "Noto Mono", Cousine,
  monospace, "Noto Emoji", "Noto Color Emoji", emoji;
// Must be in the end under threat of undefined variable error.
$base-font-family: $serif-font-family;

@import "{{ site.theme }}";

:root {
  color-scheme: light dark !important;
}

* {
  //  box-sizing: border-box !important;
  color: revert !important;
  background-color: revert !important;
  //margin: auto  !important;
  //  line-height: 1.2 !important;
  // A4 paper
  //max-width: 210mm !important;
  font-size: revert;
  //padding: auto !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  // Experimental trick to make all emojis text if supported.
  font-variant-emoji: text;
  /* WCAG minimum suggestions */
  margin-bottom: 2 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.12 !important;
  word-spacing: 0.16 !important;
}

a {
  text-decoration: underline !important;
}

a.site-title {
  font-family: $serif-font-family;
}

// Monospace preferred for code
code,
pre {
  font-family: $monospace-font-family !important;
}

// So it will not look bigger than normal text
code {
  font-size: 0.8em !important;
}

// Sans-Serif for headings to constrast with aminda.eu
h2,
h3,
h4,
h5,
h6 {
  font-family: $sans-serif-font-family !important;
}

h2.footer-heading {
  font-family: $serif-font-family !important;
}

// The introduction on top
#bio {
  text-align: center;
  font-style: italic;
  font-family: ui-cursive, $serif-font-family;
}

img {
  border-radius: 50% !important;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  @media (min-width: 395px) {
    display: float !important;
    float: right !important;
  }
}

ul.linklist {
  list-style: none inside;
  font-family: $monospace-font-family;
  //font-variant: small-caps;
}

// Customize the dark theme to be more me
@media (prefers-color-scheme: dark) {
  * {
    color: #ffb700 !important;
    border-color: #ffb700 !important;
    background-color: #000000 !important;
  }

  .site-nav {
    color-scheme: only dark !important;
    color: #ffb700 !important;
    background-color: #000000 !important;
    color: #ffb700 !important;
  }

  // I don't want links to be restored to amber'
  a {
    color: revert !important;
  }
}