:root {
    --container-width: min(90vw, 2000px);
    --content-padding: clamp(1rem, 4vw, 3rem);
    --header-height: 80px;

}

html {
    background-color: var(--bg);
}

body {
    color: var(--text);
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    --outline-color: var(--accent);
}

body>header {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--accent);

    position: sticky;
    top: 0;
    z-index: 100;


    height: var(--header-height);
    display: flex;
    align-items: center;

    &>div{
        width: var(--container-width);
        margin: 0 auto;
        padding: 0 var(--content-padding);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

body>main {
    flex: 1;
    padding-top: 2rem;
}

body>footer {
    margin-top: auto;
}

main>section {
    width: var(--container-width);
    margin: 0 auto;
    padding: 4rem var(--content-padding);
}

section>.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 0 auto;
    /*margin-top: 3rem;*/
}



@media(prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* somehow does not work! */
@media(prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
    }
}

a {
    --selection-text-decoration: underline;
    --link-color: var(--accent);

    --_color: var(--link-color, rgba(255, 255, 255, 0.5));
    --_underline-color: var(--underline-color, currentColor);
    --_thickness: 2px;
    --_offset: 0.05em;
    --_hover-color: oklch(from var(--link-color) 80% c h);

    color: var(--_color);

    text-decoration-line: var(--selection-text-decoration);
    text-decoration-color: var(--_underline-color);
    text-decoration-thickness: var(--_thickness);
    text-underline-offset: var(--_offset);

    padding: max(0.25rem, 0.1em) 0;

    display: inline-block;

    @media (prefers-reduced-motion: no-preference) {
        transition:
            color 0.15s ease-in-out,
            text-decoration 0.15s,
            transform 0.1s ease-in-out;
    }
    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }
    @media (forced-colors: active) {
        forced-color-adjust: none;
        color: LinkText;
        text-decoration-color: LinkText;
    }

    &:hover,
    &:focus-visible {
        --_color: var(--_hover-color);

        --_underline-color: rgba(255, 255, 255, 0.5);

        /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

        transform: translateY(-1px);*/
    }

    &:active {
        --_color: oklch(from var(--link-color) 75% c h);

        /*transform: translateY(1px);*/
    }
}

/* Inline Link */
p > a {
    text-decoration: underline;
    border:none;

    /*&::after {
        content: ' ↗';
    }*/
}