:root, [data-theme] {
    --button-style: var(--button-magic);
    --button-magic: var(--button-style,);
    --button-knobs: var(--button-style,);
}
button, .call-to-action {
    --knob-width: 1ch;
    --knob-border-thickness: 2px;
    --knob-inset: 1ch;
    position: var(--button-magic, relative) var(--button-knobs, relative);
    border-radius: var(--button-magic, 1em) var(--button-knobs, 0);
    z-index: var(--button-magic, 0);
    &::before, &::after {
        position: var(--button-magic, absolute) var(--button-knobs, absolute);
        content: var(--button-magic, "") var(--button-knobs, "");
        aspect-ratio: var(--button-magic, 1);
        border-top: var(--button-magic, 2px solid var(--primary-color)) var(--button-knobs, var(--knob-border-thickness) solid var(--primary-color));
        border-bottom: var(--button-magic, 2px solid var(--primary-color)) var(--button-knobs, var(--knob-border-thickness) solid var(--primary-color));
        border-left:  var(--button-knobs, var(--knob-border-thickness) solid var(--primary-color));
        border-right:  var(--button-knobs, var(--knob-border-thickness) solid var(--primary-color));
        border-radius: var(--button-magic, 50%);
        transition-duration: var(--button-magic, 300ms) var(--button-knobs, 200ms);
        transition-timing-function: var(--button-magic, linear) var(--button-knobs, linear);
        opacity: var(--button-magic, 0);
        animation: var(--button-magic, rotate linear infinite 2s);
        z-index: var(--button-magic, -1) var(--button-knobs, 1);
        background-color: var(--button-knobs, var(--background-color));
        transform-origin: top left;
    }
    &:hover::before, &:hover::after {
        opacity: var(--button-magic, 1);
    }
    &:hover::before {
        left: var(--button-magic, 50%) var(--button-knobs, calc(100% - var(--knob-width) - var(--knob-inset) - var(--knob-border-thickness) * 2));
    }
    &:hover::after {
        right: var(--button-magic, 50%) var(--button-knobs, calc(100% - var(--knob-width) - var(--knob-inset) - var(--knob-border-thickness) * 2));
    }
    &::before {
        top: var(--button-magic, 50%) var(--button-knobs, 0);
        right: var(--button-magic, 50%);
        bottom: var(--button-magic, 50%);
        left: var(--button-magic, 50%) var(--button-knobs, var(--knob-inset));
        transform: var(--button-magic, translate(-50%, -50%)) var(--button-knobs, translateY(-50%));
        transition-property: var(--button-magic, opacity) var(--button-knobs, left);
        height: var(--button-magic, 160%) var(--button-knobs, .4em);
        width: var(--button-knobs, var(--knob-width));
    }
    &::after {
        top: var(--button-magic, 50%);
        right: var(--button-magic, 50%) var(--button-knobs, var(--knob-inset));
        bottom: var(--button-magic, 50%) var(--button-knobs, 0);
        left: var(--button-magic, 50%);
        transform: var(--button-magic, translate(-50%, -50%)) var(--button-knobs, translateY(50%));
        transition-property: var(--button-magic, opacity) var(--button-knobs, right);
        height: var(--button-magic, 200%) var(--button-knobs, .4em);
        width: var(--button-knobs, var(--knob-width));
        animation-direction: var(--button-magic, reverse);
    }
}
@keyframes rotate {
    to {
        rotate: 180deg;
    }
}

:root, [data-theme] {
    --theme-mixin: var(--light-theme);
    --light-theme: var(--theme-mixin,);
    --dark-theme: var(--theme-mixin,);

    color-scheme:
            var(--light-theme, light)
            var(--dark-theme, dark);

    --primary-color:
            var(--light-theme, hsl(143, 63%, 26%))
            var(--dark-theme, hsl(143, 63%, 45%));

    --background-color:
            var(--light-theme, white)
            var(--dark-theme, black);
    --text-color:
            var(--light-theme, black)
            var(--dark-theme, white);

    --discrete-text-color:
            var(--light-theme, grey)
            var(--dark-theme, grey);
    --important-text-color:
            var(--light-theme, var(--primary-color))
            var(--dark-theme, var(--primary-color));
    --first-letter-color:
            var(--light-theme, var(--primary-color))
            var(--dark-theme, var(--primary-color));

    --link-text-color:
            var(--light-theme, inherit)
            var(--dark-theme, inherit);
    --link-decoration-color:
            var(--light-theme, hsl(215 100% 50%))
            var(--dark-theme, hsl(215 100% 50%));
    --link-hover-text-color:
            var(--light-theme, inherit)
            var(--dark-theme, inherit);
    --visited-link-decoration-color:
            var(--light-theme, hsl(246, 100%, 80%))
            var(--dark-theme, hsl(246, 100%, 80%));

    --call-to-action-background-color:
            var(--light-theme, linear-gradient(to bottom right, hsl(175, 82%, 15%), hsl(143, 63%, 38%)))
            var(--dark-theme, linear-gradient(to bottom right, hsl(175, 82%, 15%), hsl(143, 63%, 38%)));
    --call-to-action-color:
            var(--light-theme, white)
            var(--dark-theme, white);
    --call-to-action-hover-shadow-color:
            var(--light-theme, #1f1f1f)
            var(--dark-theme, #1f1f1f);

    --menu-link-decoration-color:
            var(--light-theme, hsla(180deg 100% 27.25% / .2))
            var(--dark-theme, hsla(180deg 100% 27.25% / .2));
    --menu-separator-color:
            var(--light-theme, lightgrey)
            var(--dark-theme, lightgrey);
    --menu-background-color:
            var(--light-theme, hsla(0 0% 100% / .7))
            var(--dark-theme, hsla(0 0% 30% / .7));
    --menu-items-separator-color:
            var(--light-theme, hsl(180deg 29.23% 87.25%))
            var(--dark-theme, hsl(180deg 29.23% 87.25%));

    --main-heading-color:
            var(--light-theme, linear-gradient(to bottom right, #0d776e, #38ef7d))
            var(--dark-theme, linear-gradient(to bottom right, #0d776e, #38ef7d));
    --landing-text-color:
            var(--light-theme, white)
            var(--dark-theme, white);

    --footer-separator-color:
            var(--light-theme, hsla(180deg 100% 27.25% / .2))
            var(--dark-theme, hsla(180deg 100% 27.25% / .2));
    --footer-background-color:
            var(--light-theme, hsla(180deg 100% 27.25% / .05))
            var(--dark-theme, hsla(180deg 100% 27.25% / .05));

    --label-background-color:
            var(--light-theme, var(--background-color))
            var(--dark-theme, var(--background-color));
    --input-border-color:
            var(--light-theme, var(--primary-color))
            var(--dark-theme, var(--primary-color));
    --input-background-color:
            var(--light-theme, var(--background-color))
            var(--dark-theme, var(--background-color));

    --aside-border-color:
            var(--light-theme, var(--primary-color))
            var(--dark-theme, var(--primary-color));

    --selection-background-color:
            var(--light-theme, var(--primary-color))
            var(--dark-theme, var(--primary-color));
    --selection-text-color:
            var(--light-theme, white)
            var(--dark-theme, white);
    --call-to-action-selection-background-color:
            var(--light-theme, white)
            var(--dark-theme, white);
    --call-to-action-selection-text-color:
            var(--light-theme, var(--primary-color))
            var(--dark-theme, var(--primary-color));

    --before-after-background-color:
            var(--light-theme, var(--background-color))
            var(--dark-theme, var(--background-color));
    --before-after-border-color:
            var(--light-theme, black)
            var(--dark-theme, white);
    --code-keyword-color:
            var(--light-theme, var(--primary-color))
            var(--dark-theme, var(--primary-color));
    --code-string-color:
            var(--light-theme, blue)
            var(--dark-theme, red);
    --code-tag-color:
            var(--light-theme, hsl(143, 80%, 26%))
            var(--dark-theme, hsl(143, 80%, 26%));
}

[data-theme="dark"] {
    --theme-mixin: var(--dark-theme);
    --button-style: var(--button-knobs);
}
@media (prefers-color-scheme: dark) {
    :root {
        --theme-mixin: var(--dark-theme);
        --button-style: var(--button-knobs);
    }
}
[data-theme="light"] {
    --theme-mixin: var(--light-theme);
    --button-style: var(--button-magic);
}
@media (prefers-color-scheme: light) {
    :root {
        --theme-mixin: var(--light-theme);
        --button-style: var(--button-magic);
    }
}

@media (forced-colors: active) {
    :root {
        --menu-background-color: Canvas;
        --call-to-action-color: ActiveText;
    }
}
@media (prefers-contrast: more) {
    --discrete-text-color: var(--text-color);
}
@media (prefers-contrast: less) {
    --text-color: hsl(0 0 50%);
}

:root, [data-theme] {
    background-color: var(--background-color);
    color: var(--text-color);
}
:root {
    scroll-behavior: smooth;
    & * {
        scroll-margin-block: 10dvh;
    }
}
* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, sans-serif;
    margin: 0;
}

:target h2::before {
    content: "# ";
    opacity: .5;
    font-weight: normal;
}

h1 {
    color: transparent;
    background: var(--main-heading-color);
    background-clip: text;
    font-size: 3.5rem;
    width: fit-content;
}

h2 {
    font-size: 2.5rem;
    font-weight: lighter;
}
h2:first-child {
    margin-top: 0;
}
h2:has(+ small) {
    margin-bottom: 0;
    & + small {
        display: block;
        margin-bottom: .83rem;
    }
}

small {
    color: var(--discrete-text-color);
}

strong, b, em {
    color: var(--important-text-color);
    font-weight: bolder;
}

section p::first-letter {
    font-size: 1.5em;
    color: var(--first-letter-color);
}

:any-link:not(.call-to-action) {
    color: var(--link-text-color);
    display: inline-block;
    --decoration-color: var(--link-decoration-color);

    menu & {
        --decoration-color: var(--menu-link-decoration-color);
    }

    text-decoration: none;
    position: relative;

    &:not([href^='#']):visited::before {
        /* For privacy reasons, unable to use variable here (https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector) */
        background-color: var(--visited-link-decoration-color);
    }

    &::before {
        position: absolute;
        content: "";
        background-color: var(--decoration-color);
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
    }
}

.call-to-action, button {
    border: none;
    font-weight: bolder;
    font-family: inherit;
    display: block;
    background: var(--call-to-action-background-color);
    color: var(--call-to-action-color);
    width: fit-content;
    padding: .75rem;
    text-decoration: none;
    &::after {
        /*content: "→" / "";*/
        /*margin-inline-start: .5rem;*/
        /*font-weight: bolder;*/
    }
}

nav ul,
menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

menu {
    border-bottom: 2px solid var(--menu-separator-color);
    backdrop-filter: blur(30px);
    background-color: var(--menu-background-color);
}

menu :any-link {
    display: block;
    padding: 1em;
    height: 100%;
    width: 100%;
}

menu li {
    position: relative;

    &:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 15%;
        bottom: 15%;
        border: 1px solid var(--menu-items-separator-color);
        border-radius: 50%;
        translate: 50%;
        z-index: 1;
    }
}

svg {
    height: 1lh;
    padding: 2px;
    fill: currentColor;
}

.landing {
    color: var(--landing-text-color);

    & > img {
        object-fit: cover;
        filter: blur(2px) brightness(55%);
    }
}

section {
    & > :not(.content) {
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }
    & .content {
        padding: 10%;
    }
}

footer {
    text-align: center;
    border-top: 2px solid var(--footer-separator-color);
    background-color: var(--footer-background-color);
    padding: 1em 5%;

    & nav li:has(> a:only-child > svg:only-child) {
        display: inline;
    }
    & small {
        color: inherit;
    }
}

label {
    position: relative;
    display: block;
    margin-left: 1ch;
    padding-inline: 1ch;
    z-index: 1;
    background-color: var(--label-background-color);
    width: fit-content;
    font-weight: bold;
}

textarea {
    resize: vertical;
}

input,
textarea {
    width: 100%;
    display: block;
    background-color: var(--input-background-color);
}

input,
textarea,
input:only-of-type + button {
    padding: 1em;
    border: 2px solid var(--input-border-color);
}

input,
input:only-of-type + button {
    height: 3em;
}

input:only-of-type:has(+ button) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
input:only-of-type + button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    padding: 0 2ch;
    margin-top: 0;
}

aside ul {
    padding: 0;
    list-style: none;
}

input[type="email"] {
    min-width: 30ch;
}

.before-after {
    position: relative;
    & > * {
        position: absolute;
        inset: 0;
    }
    & > :first-child {
        overflow: hidden;
        width: 50%;
        max-width: 100%;
        resize: horizontal;
        z-index: 1;
    }
    & pre {
        background-color: var(--before-after-background-color);
        border: 1px solid var(--before-after-border-color);
        margin: 0;
        clip: rect(0, auto, auto, 0);
        & code {
            position: fixed;
            display: block;
            inset: 0;
            align-content: center;
            text-align: center;
        }
        .theme {
            display: inline-block;
            text-align: center;
            width: 5ch;
        }
    }
}

aside {
    border: 1px solid var(--aside-border-color);
    border-radius: 0 25px;
    &:nth-child(2n + 1) {
        border-radius: 25px 0;
    }
    padding: 25px;

    & h2 {
        margin: 0;
    }

    width: fit-content;
    justify-self: center;
}

::selection {
    background-color: var(--selection-background-color);
    color: var(--selection-text-color);
}
:any-link::selection {
    text-decoration: underline;
}
.call-to-action::selection {
    text-decoration: none;
    background-color: var(--call-to-action-selection-background-color);
    color: var(--call-to-action-selection-text-color);
}

*[hidden] {
    display: none;
}

/* region code highlighting */
code .keyword {
    color: var(--code-keyword-color);
}
code .string {
    color: var(--code-string-color);
    font-weight: lighter;
}
code .tag {
    color: var(--code-tag-color);
    font-weight: bolder;
}
/* endregion */

/* region animations */
.landing {
    view-timeline: --squash block;
    animation-timeline: --squash;

    animation-name: squash;
    animation-fill-mode: both;
    animation-duration: 1ms;
    animation-range: exit 0% exit 100%;
}

@keyframes squash {
    from {
        min-height: 100dvh;
    }
    to {
        /* FIXME (GAFI 14-06-2024): Add variable ? */
        min-height: 50dvh;
    }
}

section > :not(.content) {
    view-timeline: --subjectReveal block;
    animation-timeline: --subjectReveal;

    animation-name: sharpen;
    animation-fill-mode: both;
    animation-duration: 1ms;
    animation-range: entry contain;
}

@keyframes sharpen {
    from {
        filter: blur(10px);
    }
    to {
        filter: blur(0);
    }
}

.call-to-action, button {
    background-size: 200%;
    transition: background-position 100ms linear,
    box-shadow 100ms linear;

    &:hover, &:focus-visible {
        background-position: 100% 100%;
        box-shadow: inset 0 0 8px var(--call-to-action-hover-shadow-color);
    }
}

:any-link:not(.call-to-action) {
    z-index: 0;
    &::before {
        z-index: -1;
        transition: height 100ms linear;
    }

    &:hover::before,
    &:focus-visible::before {
        height: 100%;
    }

    &:hover,
    &:focus-visible,
    &:hover *,
    &:focus-visible * {
        color: var(--link-hover-text-color);
    }
}
/*endregion*/

/* region layout */
body {
    --gutter-width: 10%;

    display: grid;
    grid-template-columns:
            [full-width-start left-gutter-start]
            var(--gutter-width)
            [left-gutter-end content-start]
            1fr
            [content-end right-gutter-start]
            var(--gutter-width)
            [right-gutter-end full-width-end];

    & > * {
        grid-column: content;
    }

    & > header,
    & > footer {
        grid-column: full-width;
    }
}

main {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;

    & > * {
        grid-column: content;
    }
}

nav {
    grid-column: full-width;
    top: 0;
    z-index: 1;
    @media (width > 115ch) {
        & {
            position: sticky;
        }
        & menu {
            display: flex;
            justify-content: center;
            padding: 0 10%;
        }
    }
}

section .call-to-action {
    margin-left: auto;
}

.landing {
    --gutter-width: 1fr;
    grid-column: full-width;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--gutter-width) [content-start] minmax(300px, 3fr) [content-end] 3fr var(--gutter-width);
    align-items: center;
    margin: 0;

    & > .content {
        grid-column: content;
        display: flex;
        flex-direction: column;
    }

    z-index: 0;
    position: relative;
    & > img {
        grid-column: 1 / -1;
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
}

main > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5ch;
    & > * {
        flex: 1;
    }
    margin-block: 2rem;
}

section {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
    align-items: center;
    & > :not(.content) {
        grid-column: full-width;
    }
    & > .content {
        grid-column: content;
    }
    @media (min-aspect-ratio: 1/1) {
        & {
            grid-template-columns: [image-start] 50% [image-end content-start] 1fr [content-end];
            justify-items: start;

            &:nth-of-type(2n) {
                grid-template-columns: [content-start] 1fr [content-end image-start] 50% [image-end];
            }

            & > :not(.content) {
                grid-row: 1/-1;
                grid-column: image;
            }
        }
    }
}

footer {
    display: flex;
    flex-direction: column;
    gap: 1em;
    & nav > ul {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
}

form button:not([type]:not([type="submit"])) {
    margin-left: auto;
}

form {
    --label-inset: -.6em;
    & button {
        margin-top: calc(1lh + var(--label-inset));
    }
    & label {
        margin-bottom: var(--label-inset);
    }
}

form:has(input:only-of-type + button) {
    display: grid;
    grid-template-columns:
        [full-content-start input-start]
        1fr
        [input-end button-start]
        auto
        [button-end full-content-end];
    & > * {
        grid-column: full-content;
    }
    & > input:only-of-type {
        grid-column: input;
    }
    & > input:only-of-type + button {
        grid-column: button;
    }
}
/* endregion */