@import "fonts/iosevka-grey/iosevka-grey.css";
@import "fonts/iosevka-grey-mono/iosevka-grey-mono.css";
@import "fonts/smol-emoji/smol-emoji.css";

/* Colours */

.month-01 {
  --hue: 15;
}
.month-02 {
  --hue: 30;
}
.month-03 {
  --hue: 52;
}
.month-04 {
  --hue: 82;
}
.month-05 {
  --hue: 149;
}
.month-06 {
  --hue: 187;
}
.month-07 {
  --hue: 210;
}
.month-08 {
  --hue: 246;
}
.month-09 {
  --hue: 269;
}
.month-10 {
  --hue: 291;
}
.month-11 {
  --hue: 321;
}
.month-12 {
  --hue: 352;
}
.thefridayfetchit {
  --hue: 113;
  --saturation: 48%;
}
.walkingdataloss {
  --hue: 214;
  --saturation: 17%;
}

body {
  --saturation: 60%;
  background-color: var(--background-color);
  color: var(--foreground-color);
  --background-color: hsl(var(--hue), 5%, 98%);
  --foreground-color: hsl(var(--hue), 5%, 10%);
  --primary-color: hsl(var(--hue), var(--saturation), 30%);
  --primary-color-dark: hsl(var(--hue), var(--saturation), 30%);
}

@media (prefers-color-scheme: dark) {
  body {
    --background-color: hsl(var(--hue), 5%, 10%);
    --foreground-color: hsl(var(--hue), 5%, 98%);
    --primary-color: hsl(var(--hue), var(--saturation), 70%);
  }
}

/* Typography */

html {
  font-size: max(8px, min(1em, 5vmin));
}

body {
  font-family: "Iosevka Grey Web", "Iosevka Aile", "Smol Emoji", ui-sans-serif,
    system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
}

code,
kbd,
pre,
samp {
  font-family: "Iosevka Grey Mono Web", "Iosevka Extended", "Iosevka",
    "Smol Emoji", ui-monospace, monospace;
}

/* Layout */

*,
*::before,
*::after {
  box-sizing: border-box;
  max-width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}
body {
  margin-bottom: 3rem;
}

.decoration {
  height: 12rem; /* For some entries, the height is overridden by inline styles. */
  background-color: var(--primary-color-dark);
  background-position: center;
  background-repeat: no-repeat;
}
.thefridayfetchit .decoration {
  height: 18rem;
  background-image: url("/thefridayfetchit/decoration.png");
}
.walkingdataloss .decoration {
  height: 9rem;
  background-image: url("/walkingdataloss/decoration.png");
  background-repeat: repeat-x;
  background-size: contain;
}

header .description {
  font-style: italic;
}

.entry h1 {
  max-width: min(60rem, 95vw);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.entry main footer section {
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.entry main footer section .datestamp {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.entry main footer section .datestamp div {
  width: max-content;
  margin-left: auto;
}
.entry main footer section .datestamp time {
  display: inline-block;
}

.entry main footer section .description {
  text-align: center;
  font-style: italic;
}

.entry main footer section .tags {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.entry main footer section .tags ul {
  display: inline;
}
.entry main footer section .tags li {
  display: inline-block;
  margin: 0;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

/* Elements */

.hidden {
  display: none !important;
}

.inset {
  float: right;
  max-width: 49%;
  margin-left: 2%;
}

a {
  text-decoration: none;
  color: var(--primary-color);
  outline-offset: 0.0625rem;
}

a,
nav a strong {
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.125rem;
}

a:hover,
nav a:hover strong {
  text-decoration-thickness: 0.125rem;
}

a:focus {
  outline: 0.125rem solid;
}

a:active {
  color: var(--foreground-color);
}

address {
  font-style: normal;
}

aside {
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: min(10rem, 22.5vw);
}

blockquote {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: min(30rem, 67.5vw);
  margin-left: auto;
  margin-right: auto;
  border-left: 0.125rem solid var(--foreground-color);
  padding-left: 0.875rem;
}

figure {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}
figcaption {
  width: max-content;
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
}

h1 {
  padding: 0;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  line-height: 3rem;
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
}
h2 {
  padding: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  line-height: 3rem;
}
h3,
h4,
h5,
h6 {
  padding: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
}
main h2,
main h3,
main h4,
main h5,
main h6 {
  margin-top: 3rem;
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
}

hr {
  margin: 0;
  border: 0;
  padding: 0;
  height: 1.5rem;
  padding-top: 0.6875rem;
  padding-bottom: 0.6875rem;
  background-clip: content-box;
  background-color: var(--primary-color);
  margin-left: auto;
  margin-right: auto;
}
main hr {
  max-width: min(40rem, 90vw);
}
main section hr {
  max-width: min(20rem, 45vw);
  background-color: var(--foreground-color);
}

img,
object {
  display: block;
  max-height: 100vh;
  margin-left: auto;
  margin-right: auto;
}
a img,
a object {
  outline: 0.0625rem solid;
  outline-offset: 0.125rem;
}
a:hover img,
a:hover object {
  outline-width: 0.125rem;
}
p a strong {
  display: block;
}

nav {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
}
nav h2 {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}
nav h2:first-child {
  margin-top: 1.5rem;
}
nav li {
  margin-left: 0;
  list-style-type: none;
}
nav b {
  font-weight: normal;
}
nav.menu h2 {
  margin-top: 1.5rem;
  margin-bottom: 0;
}
nav.menu ol,
nav.menu ul {
  margin-top: 0;
}
nav.menu li {
  display: inline-block;
  margin: 0;
  margin-right: 1.5rem;
}
nav a,
nav a > *,
nav a > * > * {
  display: block;
}
nav a * {
  width: max-content;
}
nav.menu li a {
  display: inline;
}
nav > a,
nav > a:hover,
nav:not(.menu) a,
nav:not(.menu) a:hover {
  text-decoration: none;
}

ol,
ul {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 0;
}
main ol,
main ul {
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
}
li {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
}
main > section ul li::marker {
  content: "• ";
}

p {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: min(40rem, 90vw);
  margin-left: auto;
  margin-right: auto;
}

pre {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  width: min-content;
  margin-left: auto;
  margin-right: auto;
}

small {
  font-size: 1rem;
  line-height: 1.5rem;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}