/* CSS reset type stylesheet.  Applies some basic styling across all pages.  Though to be honest I'm using it more like a "global styles" file. */

/* Font imports */
@font-face {
  font-family: atkinson hyperlegible;
  src: url(/assets/fonts/AtkinsonHyperlegibleNext-Regular.otf);
}

@font-face {
  font-family: atkinson hyperlegible;
  src: url(/assets/fonts/AtkinsonHyperlegibleNext-Bold.otf);
  font-weight: bold;
}

@font-face {
  font-family: atkinson hyperlegible;
  src: url(/assets/fonts/AtkinsonHyperlegibleNext-BoldItalic.otf);
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: atkinson hyperlegible;
  src: url(/assets/fonts/AtkinsonHyperlegibleNext-RegularItalic.otf);
  font-style: italic;
}

:root {
  /* Theme colours */
  color-scheme: light dark;
  --txt: light-dark(#45315c, #faebf6);
  --txt-accent: light-dark(#783794, #fabfdf);
  --txt-accent-alt: light-dark(#868ed3, #525fd1);
  --link: light-dark(#525fd1, #97baf5);
  --link-hover: light-dark(#009baf, #76ffef);
  --link-visited: light-dark(#d4388e, #ff76c6);
  --bg: light-dark(#faebf6, #222245);
  --bg-accent: light-dark(#aea0ff1c, #67bcf818);
  --bg-accent-alt: light-dark(#aea0ff11, #847eff16);
  --highlight: light-dark(#dfc5f7, pink);

  --stripes: repeating-linear-gradient(
    45deg, 
    var(--bg-accent), 
    var(--bg-accent) 3px, 
    transparent 3px, 
    transparent 6px
    );

  /* Sizes */
  --fontsize: 17px;
  --line-height: 1.5;
  --rounded: 0.5rem;
  --space-xxxs: 0.1875rem;
  --space-xxs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.5rem;
  --space-md: 3rem;
  --space-lg: 4.5rem;
  --space-xl: 9rem;
  --space-xxl: 20rem;
}

/* Base styles */
html, body {
  background-color: var(--bg);
  color: var(--txt);
  font-size: var(--fontsize);
  line-height: var(--line-height);
  font-family: "atkinson hyperlegible", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, system-ui;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

footer {
  text-align: center;
  font-style: italic;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  padding-bottom: 0;
}

/* Link colours */
a {
  color: var(--link);
}

a:visited {
  color: var(--link-visited)
}

a:hover, a:active {
  color: var(--link-hover);
}

/* Custom text highlight */
::-moz-selection, ::selection {
  color: black;
  background: var(--highlight);
}

/* Site-wide element styles */
img {
  border-radius: var(--rounded);
  width: 100%;
  height: 100%;
}

blockquote {
  margin: 0;
  border-radius: var(--rounded) 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--stripes);
  border-left: 4px solid var(--txt-accent-alt);
}

h2 {
  margin-top: var(--space-lg);
  border-bottom: 2px solid;
}

h3 {
  border-bottom: 2px dotted;
}

em {
  color: var(--txt-accent);
}

hr {
  border: 0;
}

blockquote :first-child {
  margin-top: 0;
}

blockquote :last-child {
  margin-bottom: 0;
}

code {
  background: var(--bg-accent-alt);
  user-select: all;
}

pre code {
  display: block;
  white-space: pre;
  padding: var(--space-xs) var(--space-sm);
  overflow: scroll;
}

.heart-hover, .star-hover, .diamond-hover {
  text-decoration: none;
}

.heart-hover:hover::before, [aria-current="page"].heart-hover::before {
  content: "♡ ";
}

.heart-hover:hover::after, [aria-current="page"].heart-hover::after {
  content: " ♡";
}

.star-hover:hover::before, [aria-current="page"].star-hover::before {
  content: "✸ ";
}

.star-hover:hover::after, [aria-current="page"].star-hover::after {
  content: " ✸";
}

.diamond-hover:hover::before, [aria-current="page"].diamond-hover::before  {
  content: "◈ ";
}

.diamond-hover:hover::after, [aria-current="page"].diamond-hover::after  {
  content: " ◈";
}

.btn {
  display: block;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--txt);
  border-radius: var(--space-xxs);
  border-color: var(--txt) !important;
}