/* Common */
/* Document
 * ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

:where(h1) {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */

:where(hr) {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Add the correct text decoration in Safari.
 */

:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

:where(code, kbd, pre, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

:where(small) {
  font-size: 80%;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

:where(button, input, select) {
  margin: 0;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(button) {
  text-transform: none;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
  -webkit-appearance: button;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

:where(progress) {
  vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(select) {
  text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */

:where(textarea) {
  margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

:where(input[type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:where(:-moz-ui-invalid) {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct styles in Safari.
 */

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

:where(summary) {
  display: list-item;
}

/* Murecho */

@font-face {
    font-family: 'Murecho';
    font-style: normal;
    font-weight: normal;
    src: url('/assets/font/Murecho-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Murecho';
    font-style: normal;
    font-weight: bold;
    src: url('/assets/font/Murecho-SemiBold.ttf') format('truetype');
}


/* Dosis */

@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: normal;
    src: url('/assets/font/dosis-semibold-webfont.woff') format('woff'),
         url('/assets/font/dosis-semibold-webfont.ttf') format('truetype');
}

@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: bold;
    src: url('/assets/font/Dosis-ExtraBold.ttf') format('truetype');
}


/* Azeret Mono */

@font-face {
    font-family: 'Azeret Mono';
    font-style: normal;
    font-weight: normal;
    src: url('/assets/font/AzeretMono-Regular.ttf') format('truetype');
}

/* Colors */

:root {
    --palette-mars-1:    #CC2020; /* Mars */
    --palette-mars-2:    #7C1616;
    --palette-pluto-1:   #9F4173; /* Pluto */
    --palette-pluto-2:   #681C36;
    --palette-venus-1:   #ffffff; /* Venus */
    --palette-venus-2:   #ffffff;
    --palette-jupiter-1: #FB710D; /* Jupiter */
    --palette-jupiter-2: #FB710D;
    --palette-mercury-1: #DA9645; /* Mercury */
    --palette-mercury-2: #DA9645;
    --palette-saturn-1:  #4E1156; /* Saturn */
    --palette-saturn-2:  #4E1156;
    --palette-uranus-1:  #0EE8A7; /* Uranus */
    --palette-uranus-2:  #10AF7F;
    --palette-neptune-1: #0EC3E8; /* Neptune */
    --palette-neptune-2: #0EC3E8;
    --palette-sol-1:     #FBC700; /* Sol */
    --palette-sol-2:     #FBC700;
    --palette-luna-1:    #FFFFFF; /* Luna */
    --palette-luna-2:    #FFFFFF;
}


/* Dark (default) */
:root {
    --color-accent: #009daf;
    --color-accent-strong: var(--palette-uranus-2);
    --color-logo: #ffffff;

    --color-background: #1E1B17;
    --color-background-secondary: #24221F;

    --color-box-background: #000;
    --color-box-border: #000;

    --color-text: #aaa;
    --color-text-secondary: #888;
    --color-text-strong: #fff;
    --color-text-link: var(--color-accent);

    --color-icon: var(--color-text);
    --color-separator: rgba(0, 0, 0, 0.4);

    --color-button-text: #fff;
    --color-button-background: var(--color-accent);
    --color-button-border: var(--color-accent);
}

/* Dark High Contrast */
body:has(#light:not(:checked)):has(#contrast:checked) {
    --color-accent: #00D4FF;
    --color-text: white;
    --color-text-secondary: #00FFB2;
    --color-text-link: #FBC700;
    --color-background: black;
    --color-button-background: black;
    --color-button-border: var(--color-accent);
    --color-separator: white;
    --color-icon: white;
}


/* Light */
body:has(#light:checked) {
    --color-text: #333;
    --color-text-strong: #000;
    --color-background: #fff;
    --color-background-secondary: rgba(0,0,0,0.03);
    --color-logo: #000000;
}

/* Light High Contrast */
body:has(#light:checked):has(#contrast:checked) {
    --color-accent: cyan;
    --color-text: black;
    --color-text-strong: black;
    --color-background: white;
    --color-separator: black;
}

/* Icons */

.icon {
    display: inline-block;
    vertical-align: top;
    width: 1.5rem;
    height: 1.5rem;
    mask-image: url('/assets/img/icon-theme.svg');
    mask-size: 8.25rem 15rem; /* Dimensions of image divided by 16px */
    mask-repeat: no-repeat;
    background-color: var(--color-icon);
    margin-right: 0.4em;
}

.icon {
    --icon-col: 0;
    --icon-row: 0;
    --icon-offset: -36px;
    mask-position: calc(var(--icon-col) * var(--icon-offset))
                   calc(var(--icon-row) * var(--icon-offset));
}


/* Icon Theme */

.icon-mail     { --icon-row: 0; --icon-col: 0; }
.icon-chat     { --icon-row: 0; --icon-col: 1; }
.icon-archive  { --icon-row: 0; --icon-col: 2; }
.icon-external { --icon-row: 0; --icon-col: 3; }

.icon-coffee   { --icon-row: 1; --icon-col: 0; }
.icon-heart    { --icon-row: 1; --icon-col: 1; }
.icon-bookmark { --icon-row: 1; --icon-col: 2; }
.icon-rss      { --icon-row: 1; --icon-col: 3; }

.icon-star     { --icon-row: 2; --icon-col: 0; }
.icon-stars    { --icon-row: 2; --icon-col: 1; }
.icon-reblog   { --icon-row: 2; --icon-col: 2; }
.icon-home     { --icon-row: 2; --icon-col: 3; }

.icon-sun      { --icon-row: 3; --icon-col: 0; }
.icon-moon     { --icon-row: 3; --icon-col: 1; }
.icon-peanut   { --icon-row: 3; --icon-col: 2; }

.icon-inverted { --icon-row: 4; --icon-col: 0; }
.icon-contrast { --icon-row: 4; --icon-col: 1; }
.icon-live     { --icon-row: 4; --icon-col: 2; }
.icon-code     { --icon-row: 4; --icon-col: 3; }

.icon-event    { --icon-row: 5; --icon-col: 0; }
.icon-check    { --icon-row: 5; --icon-col: 1; }
.icon-card     { --icon-row: 5; --icon-col: 2; }
.icon-wallet   { --icon-row: 5; --icon-col: 3; }

.icon-copr     { --icon-row: 6; --icon-col: 0; }


/* Light mode edge cases */

body:has(#light:checked) .icon-peanut {
    --icon-row: 3; --icon-col: 3;
}


/* Animation */

.icon.pulse {
    animation: pulse 1.25s linear;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0 }
    50% { opacity: 1 }
}

/* Common */

:root {
    --font-family-text: "Murecho";
    --font-family-accent: "Dosis";
    --font-family-mono: "Azeret Mono";

    --font-size-normal: 1.2rem;
    --font-size-small: 1rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1rem;
    --font-size-nav: 1.3rem;
}


body {
    font-size: 16px; /* REMs are based on this */
    font-family: var(--font-family-text), sans-serif;
    line-height: 1.5rem;
    background-color: var(--color-background);
    color: var(--color-text);
}

article {
    font-size: var(--font-size-normal);
}


/* Navigation */

nav li {
    list-style: none;
}

nav a {
    color: var(--color-text-secondary);
    font-family: var(--font-family-accent);
    text-decoration: none;
}


/* Headers */

h1, h2, h3 {
    font-family: var(--font-family-accent);
    font-weight: bold;
    line-height: 100%;
}

h1 {
    font-size: var(--font-size-h1);
}

h1 + p {
}


h2 {
    font-size: var(--font-size-h2);
}

h2 + p {
}


h3 {
    font-size: var(--font-size-h3);
}

h3 + p {
}


/* Text */

p,
li {
    font-family: var(--font-family-text);
    font-size: var(--font-size-normal);
    color: color-mix(in srgb, var(--color-text) 90%, transparent);
    line-height: 1.75em;
    width: 100%;
    margin-block-start: 0;
    margin-block-end: 0;
}


h2 + p {
    margin-top: 24px;
}

p + p {
    margin-top: 24px;
}


strong {
    font-family: var(--font-family-text);
    font-weight: bold;
    display: inline-block;
    background-color: var(--color-background);
    padding: 0 0.5rem;
    color: var(--color-text-strong);
    border-radius: 0.5rem;
}

q {
    quotes: none;
    font-style: italic;
    opacity: 0.62;
    display: inline-block;
    padding: 0 4px;
}

small {
    font-size: var(--font-size-small);
}

time {
    display: block;
    padding: 0.8rem 0;
    font-family: var(--font-family-accent);
    font-weight: 100;
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}


/* Links */

a {
    font-family: var(--font-family-accent);
    font-weight: bold;
    color: var(--color-text-link);
    text-decoration-style: dotted;
    font-weight: bold;
    transition: transform 200ms ease-in-out;
    will-change: filter;
}

a:hover {
    text-decoration-style: solid;
    filter: brightness(110%);
}

p a,
li a {
    font-size: 1.25rem;
    color: ;
    font-family: var(--font-family-accent);
}


/* Code */

pre {
    overflow-x: scroll;
    margin-block-start: 0;
    margin-block-end: 0;
    font-family: var(--font-family-mono);
    font-size: 1rem;
    line-height: 1.8em;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1.5rem 1.75rem;
    border-radius: 0.75rem;
}

pre .output,
pre .comment {
    opacity: 0.62;
}

/* Buttons */


button, a.button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: fit-content;
    height: fit-content;
    font-family: var(--font-family-accent);
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 100%;
    text-decoration: none;
    color: var(--color-button-text);
    background-color: var(--color-button-background);
    border-radius: 50vh;
    padding: 1.5rem 2rem;
    padding-top: 1.3rem;
    cursor: pointer;
    border: none;
    transition: transform 200ms ease-in-out;
    will-change: transform;
}

button:hover, a.button:hover {
    transform: scale(1.05);
    filter: brightness(110%);
}

a.button:has(img) {
    padding-left: 5rem;
}

button .icon,
a.button .icon {
    background-color: var(--color-button-text);
}

.button-highlight {
    background-color: var(--color-accent-strong) !important;
}

.button-lowlight {
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* Secondary text */

button:has(small),
a.button:has(small) {
    padding: 1.25rem !important;
}

button small,
a.button small {
    font-family: var(--font-family-text);
    font-size: 0.9rem;
    opacity: 0.62;
}


/* Layout */
/* html, body, main, article */


/*
When the viewport narrows to less than the page-width,
we assume mobile, and content width becomes 100%.

content needs to provide its own padding and width.

*/


:root {
    --size-main-width: 42rem;

    --size-page-width: 38rem;
    --size-page-width-wide: 42rem;
    --size-page-padding: 2.5rem;
    --size-page-padding-narrow: 1.5rem;

    --size-separator: 0.3rem;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.padding-narrow {
    padding: 0 var(--size-page-padding-narrow);
}

article section {
    padding: 0 var(--size-page-padding);
}


@media (max-width: 54rem) { /* 42rem + 2x6rem */
    .hide-when-narrow {
        display: none;
    }
}

.show-when-narrow {
    display: none;
}

@media (max-width: 54rem) { /* 38rem + 2x6rem */
    .show-when-narrow {
        display: unset;
    }
}


.page-width {
    width: 100%;
    max-width: var(--size-page-width);
}

.page-width-wide {
    width: 100%;
    max-width: var(--size-page-width-wide);
}


html {
    height: 100%;
    scroll-behavior: smooth !important;
}


/* Body */

body {
    min-width: 18.25rem !important; /* iPhone */
    height: 100%;
}


body::before {
    background-image: url('/assets/img/cover-gutter-left.jpg'),
                      url('/assets/img/cover-gutter-right.jpg');
    background-position: center left, bottom right;
    background-attachment: local;
    background-repeat: no-repeat;
    background-size: var(--size-background-gutter) auto;
    content: "";
    position: fixed;
    inset: 0;
}


@media (max-width: 54rem) { /* 38rem + 2x6rem */
    body::before {
        background-image: none !important;
    }

    /*main { TODO
        background-position: 20% top, right bottom;
        padding: 56px 0;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 1600px 28px;
        background-image: url('/assets/img/cover-gutter-top.jpg'),
                          url('/assets/img/cover-gutter-bottom.jpg');
    }*/
}


/* Main */

main {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--color-background-secondary);
    min-height: 100%;
    margin: 0;
}


/* Article */

article {
    width: 100%;
    max-width: var(--size-main-width);
    min-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 0;
    gap: 5rem;
}

@media (max-width: 32rem) { /* TODO: use var(--main-width) */
    article {
        width: 100%;
        max-width: unset;
    }
}


footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: var(--color-background);
    padding-top: 4rem;
}

/* Header */

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-background);
    height: 12rem;
}

header #logo {
    position: relative;
    top: 2.75rem;
    width: 11rem;
    height: 4.7rem;
    mask-image: url('/assets/img/logo.svg');
    mask-size: 100%;
    mask-repeat: no-repeat;
    background-color: var(--color-logo);
}


/* Header navigation */

header > nav > ul {
    position: relative;
    top: 3.5rem;
    display: flex;
    list-style: none;
    margin: 0;
}

header > nav a {
    font-family: var(--font-family-accent);
    font-weight: bold;
    color: var(--color-text-secondary);
    font-size: 1.3rem;
    padding: 1rem 0.8rem;
    display: block;
    line-height: 1.5rem;
    position: relative;
}

header > nav a:hover {
    color: var(--color-text-strong);
}

header nav a .icon {
    background-color: var(--color-text-secondary);
    margin: 0;
}

header nav a.active {
    color: var(--color-text-strong);
}

header > nav a:hover .icon,
header > nav a.active .icon {
    background-color: var(--color-text-strong);
}

header > nav a.active::after {
    content: '';
    background-color: var(--color-accent);
    border-radius: 5rem;
    position: absolute;
    left: 0;
    bottom: calc(var(--size-separator) * -1);
    width: 100%;
    height: var(--size-separator);
}

/* Footer */


footer > #me {
    position: relative;
    max-width: var(--size-page-width-wide);
    padding: 0 var(--size-page-padding);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

footer > #me img {
    width: 3rem;
    border-radius: 100%;
    border: 0.25rem solid var(--color-button-text);
    position: relative;
    top: 0.6rem;
    left: 0.1rem;
    margin-right: 0.8rem;
}


/*footer > #me img::after {*/
#tail {
    content: "";
    background-color: var(--color-background-secondary);
    position: absolute;
    top: calc(var(--size-page-padding) * -3);
    left: 1.6rem;
    width: 5rem;
    height: 5rem;
    rotate: 45deg;
    border-radius: 0.75rem;
}

footer#profile b {
    font-family: var(--font-family-accent);
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-text-strong);
}


/* Links */

footer > section {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    max-width: var(--size-page-width-wide);
    width: 100%;
    padding: 0 var(--size-page-padding);
}

footer h2 {
    text-transform: lowercase;
    color: var(--color-accent);
}

footer nav ul {
    margin-top: 1rem;
}

@media (max-width: 53rem) { /* 38rem + 2x6rem */
    footer nav {
        /*padding: 1rem 0;*/
        width: 100%;
        /*gap: 1rem;*/
    }

    footer section {
        gap: 2rem;
        padding: 0 2.5rem !important;
    }
}

footer nav a:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
    text-decoration-style: dotted;
}

footer nav li a {
    display: block;
    line-height: 1.5rem;
    color: var(--color-text-strong);
    padding: 0.4em 0;
    font-weight: 300;
    font-size: var(--font-size-nav);
}

footer nav li a.give {
    margin-bottom: 0.2rem;
}

footer nav li a.give small {
    display: inline-block;
    color: var(--color-text-secondary);
    padding-left: 2rem;
    margin-top: 0.2em;
}


/* Small Print */

.small-print {
    padding: 0;
    max-width: var(--size-main-width);
    width: 100%;
    font-family: var(--font-family-accent);
    margin: 0;
    margin-top: 8rem;
    margin-bottom: 2rem;
}

.small-print p {
    font-family: var(--font-family-accent);
    color: var(--color-text-secondary);
    margin: 0;
}

.small-print p .icon {
  margin-top: 0.32rem;
  margin-right: 0rem;
}

.small-print nav ul {
    display: flex;
    justify-content: left;
    gap: 0.75rem;
    margin-top: -0.25rem;
}

.small-print nav ul li {
    width: auto;
}

.small-print a {
    color: var(--color-text-secondary) !important;
    font-weight: 300;
    font-size: var(--font-size-small);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.small-print a:hover {
    color: var(--color-text-strong) !important;
}

.small-print a .icon-rss {
    background-color: var(--color-text-secondary);
}

.small-print a:hover .icon-rss {
    background-color: var(--palette-jupiter-1);
}


/* Custom controls */
/* Skip to content */

#skip-to-content {
    position: absolute;
    margin-top: 1em;
    margin-left: 1em;
    padding: 1rem;
    color: var(--color-text-strong);
    transform: translateY(-100%);
    transition: transform 0.1s;
    opacity: 0;
}

#skip-to-content:focus {
    transform: translateY(0%);
    opacity: 1;
}


/* High contrast mode */

@media (forced-colors: active) {
    body {
        /* This doesn't work yet on macOS */
    }
}


/* Reduced motion mode */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    #skip-to-content {
        transition: none;
    }
}

/* Branding stuff */

:root {
    --size-background-gutter: 6rem;
}


#pps-badge {
    background-image: url('assets/img/logo-pps.svg');
    background-size: 66%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: color-mix(in srgb, #000,  15%);
    width: 88px;
    height: 112px;
    position: absolute;
    top: -1px;
    right: 1.5rem;
    border-radius: 0 0 1.75rem 1.75rem;
    display: block;
}



#pps-eu {
    width: 4.25rem;
    border: 0.3rem solid ;
    border-radius: 100%;
}

section.pps-sponsor {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    align-items: center;
}


/* Me */

img.me {
    border-radius: 100%;
    border: 0.5rem solid var(--color-button-text);
}

img.profile {
  border-radius: 100%;
  border: 0.5rem solid var(--color-button-text);
  width: 12.25rem !important;
  max-width: 25%;
  float: left;
  margin: 0;
  /* margin-bottom: 10rem; */
  margin-top: 2rem;
  /* margin-left: 3rem; */
  margin-right: 3rem;
  position: relative;
  top: -1rem;
  /* margin-bottom: 3rem; */
}

/* Theme switcher */

#switcher {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 1rem;
    right: 1rem;
}

#switcher > input[type="checkbox"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }

#switcher > label {
    display: block;
    float: left;
    border-radius: 100%;
    padding: 0.4rem;
    cursor: pointer;
}

#switcher > label:hover {
    background-color: var(--color-button-background);
}

#switcher > label:hover > .icon {
    background-color: var(--color-button-text);
}


/* Icons */

#switcher .icon {
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
}

#switcher > input[type="checkbox"]:checked + label .icon:first-child {
    display: none;
}

#switcher > input[type="checkbox"]:not(:checked) + label .icon:last-child {
    display: none;
}


/* Content */
/* Index */

#page-index::before {
  content: none;
}

#page-index {
    background-image: url('/assets/img/cover.jpg') !important;
    background-position: 80% bottom;
    background-size: auto 100%;
    /*background-attachment: scroll;*/
    background-repeat: no-repeat;
    height: calc(100vh - 32rem); /* TODO: calc this */
}

@media (max-width: 54rem) { /* 42rem + 2x6rem */
    #page-index {
        background-position: bottom 12rem right 22%;
        background-size: auto calc(100% - 20rem);
    }


    #page-index footer#profile {
         background-color: unset !important;
        background: linear-gradient(to top, var(--color-background) 70%, transparent);
    }
}

#page-index main {
    display: block;
    background-color: rgba(0,0,0,0);
    background-image: none;
}

#page-index footer#profile {
     background-color: color-mix(in srgb, var(--color-background) 80%, transparent);
    padding: 2.75rem 0;
    height: 20rem;
}

#page-index #me #tail {
    display: none;
}

#page-index footer#profile i{
    color: var(--color-text-strong);
    /*margin-bottom: 1.5rem;*/
}


#page-index button {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}


/* About */

#page-about {
}

#gallery {
    margin: 4rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#gallery li {
    list-style-type: none;
    width: 100%;
    background-image: url('/assets/img/about/pidgin.png');
    background-size: cover;
    background-color: var(--color-background);
    padding: 0rem;
    border-radius: 1rem;
    padding-top: 10rem;
    cursor: pointer;
    /* border: 2px solid var(--color-background); */
    /* box-shadow: 0px 1px 12px rgba(0,0,0,0.25); */
}

#gallery li > span {
    padding: 1.75rem 2.5rem;
    font-size: 1.5rem;
    color: var(--color-text);
    background-color: var(--color-background);
    border-radius: 0 0 0.9rem 0.9rem;
    display: block;
    opacity: 0.9;
}

#gallery li h3 {
    font-size: 1.5rem;
    color: var(--color-text-strong);
    margin-bottom: 0.5em;
}

#gallery li h3 span {
    display: inline;
    color: var(--color-text-secondary);
}

#gallery li small {
    font-family: var(--font-family-text), sans-serif;
    font-size: 1rem;
}


/* Journal */

#page-journal main,
#page-journal-archive main {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

nav.featured_categories ul {
    display: flex;
    justify-content: center;
    flex-flow: wrap;
    gap: 0.5rem;
    width: 62%;
    margin: 0 auto;
    /* margin-bottom: 3rem; */
}

nav.featured_categories a {
    background-color: var(--color-background-secondary);
    border-radius: 0.6rem;
    display: block;
    padding: 0.8rem 1.2rem;
    font-size: 1rem !important;
    color: var(--color-text);/
}

nav.featured_categories a:hover {
    /* background-color: rgba(255, 255, 255, 0.1); */
    color: var(--color-text-strong);
}

nav.featured_categories ul li a.active {
    color: var(--color-button-text);
    background-color: var(--color-button-background);
}

nav.featured_categories ul li a.active .icon {
    background-color: var(--color-button-text);
}

.callout {
    text-align: center;
    margin: 2rem 0;
}


/* Archive */

#page-archive {
    margin: 0;
}

#page-archive li {
    padding: 0.4rem;
    list-style: none;
    border-radius: 0.6rem;
    cursor: pointer;
}

#page-archive li a {
    text-decoration: none;
    padding: 0.4rem;
    list-style: none;
    color: #fff;
    /* font-size: 1.5rem; */
}

#page-archive li:hover {
    background-color: rgba(255,255,255,0.05);
}

/* Post */

h1 a {
    text-decoration: none;
}

h1 a:hover {
    text-decoration-style: dotted;
    text-decoration: underline;
}

article.post {
    position: relative;
    /*background-color: var(--color-background-secondary);*/
    padding: 3.5rem 4rem;
    padding-bottom: 2rem;
    border-radius: 2rem;
    width: 100%;
}

article ul li {
    line-height: 1.75em;
}

article.post img.me {
    position: absolute;
    left: -0.5rem;
    top: 0.8em;
    width: 3rem;
}

article.post.bookmarked {
    border-bottom: 0.25rem solid var(--palette-pluto-1);
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

article.post.bookmarked .icon-bookmark {
    background-color: var(--palette-pluto-1);
}

article.post img {
  margin: 2rem 0;
}

article.post img + img {
  margin-top: 0;
}

article.post ul {
    margin-left: 3rem;
    margin-bottom: 1.5rem;
}


/* Mastodon */

.mastodon .icon-stars {
    background-color: var(--palette-sol-1);
}

.mastodon .tags {
    display: none;
}

.mastodon.content p:last-child {
    display: none; /* Hide tags in the last <p> */
}


/* Metrics */

.mastodon.metrics {
    display: flex;
    align-items: center;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    margin-top: 3rem;
}

.mastodon.metrics a {
    display: block;
    padding: 0.7rem 0.8rem;
    padding-right: 0.9rem;
    color: var(--color-text-strong);
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: normal;
    text-decoration: none;
    border-radius: 0.5rem;
}

.mastodon.metrics a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

li.fill {
    flex: 1;
}


/* Attachments */

.mastodon.attachments {
    list-style-type: none;
    margin: 2rem 0;
    padding: 0;
}

.mastodon.attachments img,
.mastodon.attachments video {
    border: 0.5rem solid var(--color-separator);
    border-radius: 1rem;
    width: 100%;
    margin: 0;
}

/* Wrappers */

section {
    /*align-items: stretch;*/
    width: 100%;
}

section.sponsors {
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 2.5rem;
}



/* Buttons */

#sponsor-buttons {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 0.5rem;
    justify-content: stretch;
    margin-top: 2rem;
    max-width: 100%;
    /*padding: 0 2rem;*/
}

/*#sponsor-buttons button {
    display: flex;
    flex-wrap: wrap;
    line-height: 100%;
    justify-content: center;
    width: 100%;
    min-width: fit-content;
}*/

#sponsor-buttons button {
    flex: 1 1 0;          /* all buttons grow and shrink equally */
    min-width: fit-content;     /* set the minimum so they don't get too small */
    max-width: 100%;      /* prevents overflow */
    display: flex;
    justify-content: center;
    line-height: 100%;
}


/* Counter */

p.counter {
    text-align: center;
}


/* Progress bar */

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }
}

#bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.progress-bar {
    width: 0.5rem;
    min-width: 0.5rem;
    max-width: 100%;
    height: 0.5rem;
    border-radius: 0.25rem;
    transition: width 3000ms ease-out;
    background-color: var(--color-accent);
}

.progress-bar.animate {
    width: calc(15
        / 64 * 100%);
}

.progress-container {
    max-width: 66%;
    width: 100%;
    padding: 6px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
}



/* Sponsor list */

ul#sponsor-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    /*overflow: hidden;*/
}

li.sponsor {
    padding: 0.3rem;
    position: relative;
    list-style: none;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 200ms ease-in-out;
}


li.sponsor img {
    width: 100%;
    border-radius: 100%;
    user-select: none;
}

li.sponsor:hover {
    padding: 0;
}

.sponsor-details {
    user-select: none;
    z-index: 1000;
    display: none;
    width: max-content;
    padding: 0.75rem 1.5rem;
    background-color: black;
    opacity: 1 !important;
    border-radius: 50vh;
    transition: all 200ms ease-in-out;
    height: auto;
    position: relative;
    /*top: -80px;*/
    left: 50%;
    transform: translateX(-50%);

    flex-direction: column;
    align-items: center;
    gap: -0.5rem;

    text-decoration: none !important;
    line-height: 100%;
    color: var(--color-text-strong) !important;
}

.sponsor-details small {
    text-decoration: none !important;
    color: var(--color-text-secondary) !important;
    margin-top: 0.25em;
    font-size: 0.9rem;
}

.sponsor-name {
    color: var(--color-text-strong);
    line-height: 100%;
    font-family: var(--font-family-accent);
    font-weight: normal;
}

li.sponsor:hover .sponsor-details {
    /*top: 0;*/
    display: flex;
}

/* Anonymous sponsor */

li.sponsor-anonymous img { background-color: green; }
li.sponsor-anonymous:nth-child(2n) img { background-color: var(--palette-mars-1); }
li.sponsor-anonymous:nth-child(3n) img { background-color: var(--palette-jupiter-2); }
li.sponsor-anonymous:nth-child(4n) img { background-color: var(--palette-neptune-2); }
li.sponsor-anonymous:nth-child(5n) img { background-color: var(--palette-uranus-1); }
li.sponsor-anonymous:nth-child(6n) img { background-color: var(--palette-pluto-1); }
li.sponsor-anonymous:nth-child(7n) img { background-color: var(--palette-mars-2); }
li.sponsor-anonymous:nth-child(8n) img { background-color: var(--palette-sol-2); }
li.sponsor-anonymous:nth-child(9n) img { background-color: var(--palette-mercury-2); }


/* Empty sponsor */

li.sponsor-empty {
    background-color: unset !important;
    background-image: url('/assets/img/sponsors/sponsor-empty.svg');
    background-position: center;
    background-repeat: none;
    opacity: 0.2;
}


/* Tiers */

form#sponsor-tiers {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 -1.5rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2rem;
}

input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    align-content: center;
    vertical-align: top;
    position: relative;
    padding: 1rem;
    border-color: rgba(255, 255, 255, 0.05);
    border-radius: 50vh;
    cursor: pointer;
}

input[type="radio"] + label:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

input[type="radio"] + label > strong {
    font-family: var(--font-family-accent);
    flex-grow: 1;
    padding-left: 1rem;
    background-color: unset;
    font-size: 1.25rem;
    padding-bottom: 0.25rem;
}

input[type="radio"] + label > .control {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    border: 16px solid  rgba(255, 255, 255, 0.2);
    transition: all 250ms ease-out;
}

input[type="radio"] + label > small {
    padding-bottom: 0.25rem;
    padding-right: 1rem;
    font-size: 1rem;
}


/* Selected tier */

input[type="radio"]:checked + label {
    background-color: rgba(255, 255, 255, 0.1);
    /*border: 0.4rem solid var(--color-button-text);*/
    /*padding: 1rem;*/
}

input[type="radio"]:checked + label > small {
    color: var(--color-text-strong);
}

input[type="radio"]:checked + label > .control {
    background-color: var(--color-text-strong);
    border: 0.6rem solid var(--color-accent);
}