:root
{
  --lemon: rgb(247 238 106);
  --light-blue: rgb(117 208 241);
  --pink: rgb(237 155 196);
  --purple: rgb(152 98 151);
  --light-green: rgb(190 210 118);
  --warm-yellow: rgb(255 193 30);
  --bright-pink: rgb(207 98 151);
  --red: rgb(220 79 0);
  --dark-blue: rgb(56 96 170);
  --angry: rgb(200 0 130);

  --text: black;
  --background: white;
}

@media (prefers-color-scheme: dark) {
  :root
  {
    --text: hsl(0 0% 84%);
    --background: hsl(0 0% 8%);
  }
}

:root
{

  --link: var(--dark-blue);
  --link-active: color-mix(in srgb-linear, var(--link), var(--text) 25%);
}

@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/CrimsonPro-Regular.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/CrimsonPro-ExtraBold.ttf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/CrimsonPro-Italic.ttf') format('opentype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'FUCXEDCAPS';
  src: url('fonts/FUCXEDCAPSLatin-Regular.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

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

html
{
  font: min(150%, max(125%, 2.5vw))/1.3 'Crimson Pro', serif;
}
body
{
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--text);
  background: var(--background);
}

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

.button
{
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0.25rem;
  font-size: 0.875rem;
  border: 1px solid var(--link);
  border-radius: 0.25rem;
  color: var(--link);
  cursor: pointer;
}
.button span,
.button svg
{
  display: block;
  margin: 0 0.5rem;
}
.button span + svg,
.button svg + span
{
  margin-left: -0.25rem;
}
a.button
{
  text-decoration: none;
}
.button svg
{
  fill: currentColor;
}
a.button:hover,
a:hover p.button
{
  background: var(--link);
  color: var(--background);
}
a.button:active,
a:active p.button
{
  background:  var(--link-active);
  border-color: var(--link-active);
}

header
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  font: 1.5rem/0.98 'FUCXEDCAPS', sans-serif;
  background:
    linear-gradient(-20deg in hsl, var(--warm-yellow), var(--angry)),
    linear-gradient(40deg in hsl, var(--dark-blue), var(--bright-pink));
  background-blend-mode: soft-light;
  color: white;
}
header svg
{
  display: block;
  height: 2rem;
}
header svg path
{
  fill: currentColor;
}
header h1
{
  margin: 0;
  font: 1.5rem/0.98 'FUCXEDCAPS', sans-serif;
}

body > div
{
  padding: 1rem;
}
main
{
  margin: 0 auto;
  max-width: 40rem;
}
main *:first-child
{
  margin-top: 0;
}
main *:last-child
{
  margin-bottom: 0;
}

h1, h2, h3
{
  font-weight: normal;
  line-height: 1;
}
p, h1, h2, h3
{
  margin: 1rem 0;
}
p, h2, h3
{
  hyphens: auto;
}
h1
{
  font-size: 200%
}
h2
{
  font-size: 150%
}
h3
{
  font-size: 125%
}

p.description
{
  margin: 1rem 0 1.5rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb-linear, var(--text), var(--background) 75%);
}

ul.articles
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.articles a
{
  color: var(--text);
  text-decoration: none
}
ul.articles a:hover h2
{
  text-decoration: underline;
}

p.date
{
  opacity: 0.6;
}

div.image img
{
  display: block;
  width: 100%;
}