/*
  Default variable values
*/
:root {
  /* Typography */
  --font-family-base:
    Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
    sans-serif;
  --font-family-headings: var(--font-family-base);
  --font-family-quote:
    Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  --font-family-code:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --font-size-base: 16px;
  --font-size-small: 0.875em;
  /* Colors */
  --color-background: var(--white);
  --color-foreground: var(--black);
  --color-accent: var(--yellow);
  --color-accent-alt: var(--red);
  --color-details: var(--gray);
  /* Details */
  --radius: 0.5rem;
  --border: 1px dotted var(--color-details);
  --shadow: 0 0 7px var(--color-details);
  --transition-duration: 0.36s;
  /* Color palette */
  --white: rgb(255, 255, 255);
  --black: rgb(44, 44, 44);
  --gray: rgb(133, 146, 158);
  --red: rgb(231, 76, 60);
  --yellow: rgb(241, 196, 15);
}

/*
  Resets
*/

html {
  box-sizing: border-box;
  font-size: var(--font-size-base);
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
dl,
dd,
ol,
ul,
table,
iframe,
audio,
video,
figure,
input,
button,
textarea {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  position: relative;
}

/*
  Basic styling
*/

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

::selection {
  background: var(--color-accent-alt);
  color: var(--color-background);
}

/*
  Text Elements
*/

p,
blockquote,
pre,
ul,
ol,
dl,
figure,
table,
iframe,
audio,
video {
  line-height: 1.5;
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

mark,
ins {
  background-color: var(--color-accent);
  text-decoration: none;
}

del,
strike {
  text-decoration: line-through;
  text-decoration-style: wavy;
}

abbr,
acronym {
  text-decoration-style: dotted;
  cursor: help;
}

sub,
sup {
  font-size: 0.65em;
  line-height: 100%;
}

/* Headings */
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.25em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.75em;
}

/* Links */
a {
  color: currentcolor;
  text-decoration: underline;
  text-decoration-style: wavy;
  transition-property: color, text-decoration-color;
  transition-duration: var(--transition-duration);
  text-decoration-thickness: 1px;
}

a:hover,
a:focus {
  text-decoration-color: var(--color-accent);
}

a:active {
  color: var(--color-accent-alt);
  text-decoration-color: currentcolor;
}

/* Lists */

ul {
  list-style: square;
}

li::marker {
  color: var(--color-accent-alt);
}

ul ul {
  list-style: circle;
}

ul ul ul {
  list-style: disc;
}

ol ol {
  list-style: lower-alpha;
}

ol ol ol {
  list-style: lower-roman;
}

li ul,
li ol {
  margin-bottom: 0;
}

li {
  margin-block: 0.5rem;
  margin-left: 1.5rem;
  padding-left: 0.5rem;
}

dl dt {
  font-weight: 700;
}

dl dd + dt,
dl dd + dd {
  margin-top: 0.5rem;
}

.task-list {
  list-style: none;
}

.task-list-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0;
  padding-left: 0;
}

/* Blockquote */
q {
  quotes: "“" "”" "‘" "’";
  font-style: normal;
}

blockquote {
  font-family: var(--font-family-quote);
  font-style: italic;
  line-height: 1.65;
  border-left: 0.5rem solid var(--color-accent);
  padding-left: 1rem;
}

blockquote cite {
  font-family: var(--font-family-base);
  font-style: normal;
  font-size: var(--font-size-small);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  transition: color var(--transition-duration);
}

table th {
  text-align: left;
  background: var(--color-accent);
}

table th,
table td {
  padding: 0.5rem;
  border-bottom: var(--border);
}

/* Code and pre-formatted text */
pre,
code,
var,
kbd,
tt {
  font-family: var(--font-family-code);
  font-size: var(--font-size-small);
}

pre {
  max-width: 100%;
  overflow: auto;
}

pre code {
  font-size: 100%;
}

.highlight .gutter {
  width: 3ch;
}

/*
  Horizontal Rule
*/
hr {
  margin-block: 1.5rem;
  height: 0;
  border-bottom: var(--border);
}

/*
  Media
*/
/* Images */
img {
  max-width: 100%;
  overflow: hidden;
  opacity: 1;
}

@media screen and (prefers-color-scheme: dark) {
  img {
    opacity: 0.75;
    transition: opacity var(--transition-duration) ease;
  }

  img:hover,
  img:focus {
    opacity: 1;
  }
}

.post-content img,
.page-content img {
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
}

@media screen and (width > 690px) {
  .post-content img,
  .page-content img {
    width: calc(100% - (0.5rem + 10rem));
  }
}

img + em,
img + br + em,
figcaption {
  display: block;
  width: 10rem;
  color: var(--color-details);
  font-style: normal;
  font-size: var(--font-size-small);
  padding: 0.25rem 0.5rem;
}

@media screen and (width > 690px) {
  img + em,
  img + br + em,
  figcaption {
    position: absolute;
    top: 0;
    right: 0;
  }
}

video,
iframe[src*="youtu"],
iframe[src*="twitch"],
iframe[src*="vimeo"] {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

audio {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/*
  Footnotes
*/
.footnotes {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: var(--border);
  font-size: var(--font-size-small);
}

/*
  TODO: Forms
*/

input[type="checkbox"] {
  appearance: checkbox;
  width: 1em;
  height: 1em;
  accent-color: var(--color-accent-alt);
}