:root {
    background-color: white;
    color: black;
}
: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: linear-gradient(to bottom right, #0d776e, #38ef7d);
    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: grey;
}

strong, b, em {
    color: hsl(143, 63%, 26%);
    font-weight: bolder;
}

section p::first-letter {
    font-size: 1.5em;
    color: hsl(143, 63%, 26%);
}

:any-link:not(.call-to-action) {
    color: inherit;
    display: inline-block;
    --decoration-color: hsl(215 100% 50%);

    menu & {
        --decoration-color: hsla(180deg 100% 27.25% / .2);
    }

    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: hsl(246, 100%, 80%);
    }

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

.call-to-action, button {
    border-radius: 10px;
    border: none;
    font-weight: bolder;
    font-family: inherit;
    display: block;
    background: linear-gradient(to bottom right, hsl(175, 82%, 15%), hsl(143, 63%, 38%));
    color: white;
    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 lightgrey;
    backdrop-filter: blur(30px);
    background-color: hsla(0 0% 100% / .7);
}

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 hsl(180deg 29.23% 87.25%);
        border-radius: 50%;
        translate: 50%;
        z-index: 1;
    }
}

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

.landing {
    color: white;

    & > 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 hsla(180deg 100% 27.25% / .2);
    background-color: hsla(180deg 100% 27.25% / .05);
    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: white;
    width: fit-content;
    font-weight: bold;
}

textarea {
    resize: vertical;
}

input,
textarea {
    width: 100%;
    display: block;
}

input,
textarea,
input:only-of-type + button {
    padding: 1em;
    border-radius: 10px;
    border: 2px solid hsl(143, 63%, 26%);
}

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: white;
        border: 1px solid black;
        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 hsl(143, 63%, 26%);
    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: hsl(143, 63%, 26%);
    color: white;
}
:any-link::selection {
    text-decoration: underline;
}
.call-to-action::selection {
    text-decoration: none;
    background-color: white;
    color: hsl(143, 63%, 26%);
}

*[hidden] {
    display: none;
}

/* region code highlighting */
code .keyword {
    color:  hsl(143, 63%, 26%);
}
code .string {
    color:  blue;
    font-weight: lighter;
}
code .tag {
    color:  hsl(143, 80%, 26%);
    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 #1f1f1f;
    }
}

: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: inherit;
    }
}
/*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 */