@layer reset, defaults, patterns, components, utilities, overrides;
@media not (prefers-reduced-motion:reduce) {
    @view-transition {
        navigation: auto;
    }
}

@layer reset {
    *, :before, :after {
        box-sizing: inherit;
        margin: unset;
        padding: unset;
    }

    dialog {
        height: auto;
        width: auto;
        max-height: 100vh;
        max-width: 100vw;
        offset: unset;
        place-self: center;
        offset: 0;
        overscroll-behavior: contain;
    }

    button {
        background: unset;
        border: unset;
        font-family: inherit;
        font-size: inherit;
    }

    img {
        display: block;
        max-width: 100%;
    }
}

@layer defaults {
    :root {
        color-scheme: dark light;
        --weight-mult: 1;
    }

    @media (prefers-color-scheme: light) {
        :root {
            --weight-mult: 1.25;
        }
    }

    :root {
        --text-color-1: light-dark(oklch(0% 0 0), oklch(100% 0 0));
        --text-color-2: light-dark(oklch(45% 0 0), oklch(75% 0 0));
        --accent-color: oklch(75% 0.1 230);
        --background-color: light-dark(oklch(100% 0 0), oklch(22% 0 0));
        --selection-text: oklch(0% 0 0);
        --selection-background: oklch(75% 0.1 230);
        --button-text-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
        --button-background-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
    }

    :root {
        --size-s: 1rem;
        --size-m: 2rem;
        --size-l: 4rem;
        --size-xl: 6rem;
        --weight-light: calc(250 * var(--weight-mult));
        --weight-norm: calc(450 * var(--weight-mult));
        --weight-med: calc(650 * var(--weight-mult));
        --weight-bold: calc(850 * var(--weight-mult));
        --font-fam-1: "Roboto", sans-serif;
        --font-sz-1: 1rem;
        --font-sz-2: 1rem;
        --font-sz-3: 1.25rem;
        --font-sz-4: 1.5rem;
        --font-sz-5: 1.75em;
        --font-sz-6: 2em;
        --font-sz-7: 2.25em;
        --font-sz-8: clamp(2.5em, 10vw, 4em);
        font-family: var(--font-fam-1);
        line-height: 1.25;
        font-weight: var(--weight-norm);
        quotes: '\201c' '\201d' '\2018' '\2019';
        interpolate-size: allow-keywords;
        background-color: var(--background-color);
        color: var(--text-color-1);
        overflow-x: clip;
        box-sizing: border-box;
        hyphens: auto;
    }

    * {
        scrollbar-width: thin;
    }

    @media (width <=20rem) {
        :root {
            word-break: break-all;
        }
    }

    body {
        font-size: clamp(1rem, 6vw - 2rem, 2rem);
        display: grid;
        grid-template-areas: "head" "main" "foot";

        > header {
            grid-area: head;
        }

        > main {
            grid-area: main;
        }

        > footer {
            grid-area: foot;
        }

        &:after {
            display: block;
            position: fixed;
            right: 0;
            bottom: 0;
            padding: 0.5rem;
            font-size: var(--font-sz-1);
            content: "CSS: 1.003";
            color: var(--text-color-2);
            writing-mode: sideways-lr;
            opacity: 0.25;
        }
    }

    @media (width >=60rch) {
        body {
            grid-template-columns: min-content 1fr;
            grid-template-areas: "head main" "head foot";

            > header {
                writing-mode: sideways-lr;
                max-height: 100vh;
            }
        }
    }

    ::selection {
        background-color: var(--selection-background);
        color: var(--selection-text);
    }

    :focus-visible {
        outline-color: var(--text-color-1);
        outline-offset: 0.125em;
    }

    dialog {
        opacity: 0;
        border: unset;
        background-color: var(--background-color);
        margin-inline: auto;

        &::backdrop {
            background-color: unset;
            opacity: 0;
            backdrop-filter: blur(4px);
            transition: opacity 400ms;
        }
    }

    @media not (prefers-reduced-motion: reduce) {
        dialog[open] {
            opacity: 1;

            @starting-style {
                opacity: 0;
            }

            &::backdrop {
                opacity: 1;

                @starting-style {
                    opacity: 0;
                }
            }
        }

        dialog {
            transition: opacity 500ms, display 550ms allow-discrete, overlay 500ms allow-discrete;
            opacity: 0;
        }
    }

    h1, h2, h3, h4, h5, h6, p {
        line-height: max(2rem, 1.5em);
    }

    hr {
        border: unset;
        border-top: solid 0.125rem var(--accent-color);
    }

    em {
        font-weight: bold;
        color: var(--text-color-1);
    }

    /* #region long form */
    h1, h2, h3, h4, h5, h6, p, img, blockquote, details, hgroup, ol, ul, dl, main footer, .longform, hr {
        margin-block-start: 6rem;
    }

    :where(h1, h2, h3, h4, h5, h6, hgroup) + p, summary + p {
        margin-block-start: 4rem;
    }

    p + p, li, li > :where(ol, ul, dl) {
        margin-block-start: 2rem;
    }

    *:first-child {
        margin-block-start: unset;
    }

    /* #endregion */
    /* #region links */
    a {
        font-family: "Roboto";
        font-weight: var(--weight-med);
        text-decoration-color: var(--accent-color);
    }

    a:where(:not(:hover, :focus-visible)) {
        text-decoration: unset;
        color: var(--text-color-1);
    }

    a:is(:hover, :focus-visible) {
        color: var(--text-color-2);
    }

    /* #endregion */
    /* #region paragraph */
    p {
        font-family: "Roboto Slab", sans-serif;
        color: var(--text-color-2);
    }

    /* #endregion */
    /* #region headding */
    h1, h2, h3, h4, h5, h6, hgroup > p {
        font-family: "Roboto", sans-serif;
        font-weight: var(--weight-light);
        color: var(--text-color-1);
    }

    h1, hgroup:has(h1) > p {
        font-size: var(--font-sz-8);
    }

    h2, hgroup:has(h2) > p {
        font-size: var(--font-sz-6)
    }

    h3, hgroup:has(h3) > p {
        font-size: var(--font-sz-5);
    }

    h4, hgroup:has(h4) > p {
        font-size: var(--font-sz-4);
    }

    h5, hgroup:has(h5) > p {
        font-size: var(--font-sz-3);
    }

    h6, hgroup:has(h6) > p {
        font-size: var(--font-sz-2);
    }

    hgroup {
        h1, h2, h3, h4, h5, h6 {
            font-size: var(--font-sz-1);
            font-weight: var(--weight-med);
            font-stretch: 100%;
            color: var(--text-color-2);
        }
    }

    /* #endregion */
    /* #region quote */
    :where(blockquote > p)::before, :where(blockquote > p)::after {
        color: var(--accent-color);
    }

    :where(blockquote > p)::before {
        content: open-quote;
        margin-inline-end: 0.5ch;
    }

    :where(blockquote > p)::after {
        content: close-quote;
        margin-inline-start: 0.5ch;
    }

    .brackets {
        quotes: '[' ']' '[' ']';

        &::before {
            content: open-quote;
            margin-inline-end: 0.5ch;
        }

        &::after {
            content: close-quote;
            margin-inline-start: 0.5ch;
        }

        &::before, &::after {
            color: var(--accent-color)
        }
    }

    /* #endregion */
    /* #region list */
    :where(ol, ul):where(:not([class])) {
        list-style: "->|  ";
        padding-inline-start: max(1rem, 1rem);
    }

    :where(ol, ul)[class] {
        padding: unset;
        list-style: "";
    }

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

    /* #endregion */
    /* #region details */
    details {
        display: grid;
        grid-template-columns: 1fr min-content;
    }

    details summary {
        grid-column: 1/2;
        grid-row: 1/2;
        cursor: pointer;
    }

    details::details-content {
        grid-column: 1 / -1;
    }

    details::before {
        background-image: url(../img/open.svg);
        background-position: center;
        background-repeat: no-repeat;
        content: "";
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        height: 1em;
        aspect-ratio: 1;
        align-self: center;
        justify-self: center;
        pointer-events: none;
    }

    details[open]::before {
        transform: rotate(45deg);
    }

    @media not (prefers-reduced-motion:reduce) {
        details::before {
            transition: transform 500ms ease;
            transition-delay: 0.25s;
        }

        details[open]::before {
            transition-delay: 0s;
        }

        details::details-content {
            block-size: 0;
            opacity: 0;
            transition: content-visibility allow-discrete, opacity, block-size;
            transition-duration: 0s, 500ms, 500ms;
            transition-delay: 1s, 0s, 0.25s;
        }

        details[open]::details-content {
            opacity: 1;
            block-size: auto;
            transition: content-visibility 500ms ease allow-discrete, opacity 1s ease, block-size 250ms ease;
            transition-delay: 0s, 0s, 0s;
        }
    }

    summary::marker {
        content: "";
    }

    /* #endregion */
}

@layer patterns {
    h1, h2, h3, h4, h5, h6, p {
        max-width: 60ch;
    }
}

@layer components {
    .size-bl-f {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* #region button */
    .button-bar {
        &.center {
            justify-content: center;
        }
    }

    button, [type=button], .button, .button-bar > * {
        display: inline-flex;
        padding: 0.5rem;
        border-radius: 0.25em;
        white-space: nowrap;
        cursor: pointer;
        font-weight: var(--weight-med);
        align-items: center;
        text-decoration: none;
        background-color: var(--background-color);
    }

    /* #endregion */
    /* #region icon */
    .icon, .icon-line {
        display: inline-block;
        background-image: var(--bgurl);
        background-repeat: no-repeat;
        background-position: center;
        aspect-ratio: 1 / 1;
        margin-inline: 0.5ch;
    }

    .icon {
        height: 1cap;
    }

    .icon-line {
        height: 1lh;
        vertical-align: middle;
    }

    /* #endregion */
}

@layer utilities {
    .flex {
        display: flex;

        > * {
            margin: unset;
        }

        &.middle {
            align-items: center;
        }

        &.end {
            justify-content: end;
        }

        &.gap {
            gap: 8rem;
        }

        &.grow > *, > .grow {
            flex-grow: 1;
        }

        &.center {
            justify-content: center;
        }

        &.space {
            justify-content: space-between;
        }

        &.wrap, &.split {
            flex-wrap: wrap;
        }

        &.split > * {
            flex: 1 1 max(40%, 40rch);
        }

        > .small {
            flex: 1 1 max(40%, 12rem);
        }

        &.reverse {
            flex-direction: row-reverse;
        }

        &.column {
            flex-direction: column;
        }
    }

    .frame {
        display: grid;
        grid-template-columns: minmax(auto, 160rch);
        justify-content: center;
    }

    /* #region theme */
    .background {
        background-color: var(--background-color);
    }

    .theme-1 {
        color-scheme: dark light;
        --text-color-1: light-dark(oklch(0% 0 0), oklch(100% 0 0));
        --text-color-2: light-dark(oklch(45% 0 0), oklch(75% 0 0));
        --accent-color: oklch(75% 0.1 230);
        --background-color: light-dark(oklch(100% 0 0), oklch(22% 0 0));
        --selection-text: oklch(0% 0 0);
        --selection-background: oklch(80% 0.2 128);
        --button-text-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
        --button-background-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
        background-color: var(--background-color);
    }

    .theme-2 {
        color-scheme: dark light;
        --text-color-1: light-dark(oklch(0% 0 0), oklch(100% 0 0));
        --text-color-2: light-dark(oklch(45% 0 0), oklch(75% 0 0));
        --accent-color: oklch(75% 0.1 230);
        --background-color: light-dark(oklch(96% 0 0), oklch(24% 0 0));
        --selection-text: oklch(0% 0 0);
        --selection-background: oklch(75% 0.1 230);
        --button-text-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
        --button-background-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
        background-color: var(--background-color);
    }

    .theme-3 {
        color-scheme: light;
        --text-color-1: oklch(0% 0 0);
        --text-color-2: oklch(0% 0 0);
        --accent-color: oklch(100% 0 0);
        --background-color: oklch(75% 0.1 230);
        --selection-text: oklch(0% 0 0);
        --selection-background: oklch(100% 0 0);
        --button-text-color: light-dark(oklch(0% 0 0), oklch(100% 0 0));
        --button-background-color: light-dark(oklch(100% 0 0), oklch(0% 0 0));
        background-color: var(--background-color);
    }

    /* #endregion */
}

@layer overrides {
    .scroll-inline {
        overflow-y: auto;
    }

    /* #region type */
    .font-s {
        font-size: var(--font-sz-1);
    }

    .font-n {
        font-size: var(--font-sz-2);
    }

    .font-m {
        font-size: var(--font-sz-3);
    }

    .font-l {
        font-size: var(--font-sz-4);
    }

    .font-xl {
        font-size: var(--font-sz-6);
    }

    .font-2xl {
        font-size: var(--font-sz-8);
    }

    .font-bold {
        font-weight: var(--weight-bold);
    }

    .text-left {
        --text-pos: 1;
        text-align: left;

        &:where(h1, h2, h3, h4, h5, h6, p, img) {
            margin-left: auto;
        }
    }

    .text-center {
        --text-pos: 2;
        text-align: center;

        &:where(h1, h2, h3, h4, h5, h6, p, img), > :where(h1, h2, h3, h4, h5, h6, p, img) {
            margin-inline: auto;
        }
    }

    .text-right {
        --text-pos: 3;
        text-align: right;

        &:is(h1, h2, h3, h4, h5, h6, p, img) {
            margin-left: auto;
        }
    }

    @container style(--text-pos: 2) {
        h1, h2, h3, h4, h5, h6, p, img {
            margin-inline: auto;
        }
    }

    @container style(--text-pos: 3) {
        h1, h2, h3, h4, h5, h6, p, img {
            margin-left: auto;
        }
    }

    .font-italic {
        font-style: italic;
    }

    @font-face {
        font-family: "Roboto";
        src: local('Roboto'), url('../font/Roboto.ttf') format('truetype');
        font-style: normal italic;
    }

    @font-face {
        font-family: "Roboto Slab";
        src: local('RobotoSlab'), url('../font/RobotoSlab.ttf') format('truetype');
        font-style: normal;
    }

    /* #endregion */
    /* #region color */
    .text-color-primary {
        color: var(--text-color-1);
    }

    .text-color-secondary {
        color: var(--text-color-1);
    }

    .text-color-accent {
        color: light-dark(var(--text-color-1), var(--accent-color));
    }

    /* #endregion */
    /* #region positioning */
    .layer-1 {
        position: relative;
        z-index: 10;
    }

    .layer-2 {
        position: relative;
        z-index: 20;
    }

    .stick-top {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .stick-bottom {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    /* #endregion */
    /* #region margin */
    .margin-v-2xl {
        margin-block: 18rem;
    }

    /* #endregion */
    /* #region padding */
    .padding-in-xs, :where(.padding-xs) {
        padding-inline: 0.5rem;
    }

    .padding-in-s, :where(.padding-s) {
        padding-inline: 2rem;
    }

    .padding-in-m, :where(.padding-m) {
        padding-inline: min(4, 10vw);
    }

    .padding-in-l, :where(.padding-l) {
        padding-inline: min(6rem, 10vw);
    }

    .padding-in-xl, :where(.padding-xl) {
        padding-inline: min(12rem, 10vw);
    }

    .padding-in-2xl, :where(.padding-2xl) {
        padding-inline: min(24rem, 10vw);
    }

    .padding-bl-xs, :where(.padding-xs) {
        padding-block: 0.5rem;
    }

    .padding-bl-s, :where(.padding-s) {
        padding-block: 2rem;
    }

    .padding-bl-m, :where(.padding-m) {
        padding-block: min(6rem, 20vh);
    }

    .padding-bl-l, :where(.padding-l) {
        padding-block: min(6rem, 20vh);
    }

    .padding-bl-xl, :where(.padding-xl) {
        padding-block: min(12rem, 20vh);
    }

    .padding-bl-2xl, :where(.padding-2xl) {
        padding-block: min(24rem, 20vh);
    }

    /* #endregion */
}

/* #region animation */
@media not (prefers-reduced-motion:reduce) {
    :target {
        animation: target 1s 500ms forwards;
    }

    @keyframes target {
        30% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    main :where(h1, h2, h3, h4, h5, h6, p, img, *:not(p) > a, button) {
        animation-name: slideup;
        animation-timing-function: linear;
        animation-timeline: view(block);
        animation-duration: 1ms;
        animation-range: entry 0% entry min(20rem, 25vh);
    }

    @keyframes slideup {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* #endregion */
/* #region carousel */
.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(max(33%, 60ch), 100%);
    gap: 2rem;
    overflow-x: auto;
    white-space: nowrap;
    padding: unset;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scroll-marker-group: after;
    anchor-name: --slide;
    contain: inline-size;

    &::scroll-marker-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 1rem;
        gap: 1rem;
        justify-content: center;
    }

    &::before, &::after {
        content: "";
    }

    &::scroll-button(*) {
        content: "";
        position: fixed;
        width: 1.5rem;
        aspect-ratio: 1;
        background-color: unset;
        background-repeat: no-repeat;
        background-position: center;
        position-anchor: --slide;
        border: unset;

        &:not(:disabled) {
            cursor: pointer;
        }

        &:hover {
            background-color: var(--button-background-color);
        }
    }

    &::scroll-button(*) {
        transition: opacity 500ms;
    }

    &::scroll-button(*):disabled {
        opacity: 0.25;
    }

    &::scroll-button(*):where(:active):not(:disabled) {
        background-color: var(--button-background-color);
    }

    &::scroll-button(left) {
        background-image: url(../img/back.svg);
        position-area: center left;
        transform: translateX(100%);
    }

    &::scroll-button(right) {
        background-image: url(../img/arrow.svg);
        position-area: center right;
        transform: translateX(-100%);
    }

    > * {
        margin-block-start: unset;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        padding: 2rem;
        container-type: scroll-state;

        > * {
            interactivity: inert;
            opacity: 0.25;
            transition: opacity 500ms;
        }

        @container scroll-state(snapped: inline) {
            > * {
                interactivity: auto;
                opacity: 1;
            }
        }

        &::scroll-marker {
            content: "";
            height: 1rem;
            aspect-ratio: 1;
            border: 1px solid var(--text-color-1);
            transition: transform 500ms;
        }

        &::scroll-marker:target-current {
            background: var(--accent-color);
            transform: scale(150%);
        }
    }
}

@supports selector(::scroll-button(*)) {
    .carousel {
        scrollbar-width: none;
    }
}

/* #endregion */