@layer default.font {
    @font-face {
        font-family: "IvyPresto Display Thin Italic";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("IvyPresto Display Thin"),
            url("./fonts/fonnts.com-Ivy-Presto-Display-Thin.otf")
                format("opentype");
    }
    @font-face {
        font-family: "IvyPresto Display Light Italic";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("IvyPresto Display Light"),
            url("./fonts/fonnts.com-Ivy-Presto-Display-Light.otf")
                format("opentype");
    }
    @font-face {
        font-family: "IvyPresto Text Thin";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("IvyPresto Text Thin"),
            url("./fonts/fonnts.com-Ivy-Presto-Text-Thin.otf")
                format("opentype");
    }
    @font-face {
        font-family: "IvyPresto Text Light";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("IvyPresto Text Light"),
            url("./fonts/fonnts.com-Ivy-Presto-Text-Light.otf")
                format("opentype");
    }
    @font-face {
        font-family: "Neue Haas Unica Light";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("Neue Haas Unica Light"),
            url("./fonts/NeueHaasUnicaPro-Light.ttf") format("truetype");
    }
    @font-face {
        font-family: "Neue Haas Unica Light Italic";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("Neue Haas Unica Light Italic"),
            url("./fonts/NeueHaasUnicaPro-LightIt.ttf") format("truetype");
    }
    @font-face {
        font-family: "Neue Haas Unica Medium";
        font-style: normal;
        font-weight: normal;
        font-display: swap;
        src: local("Neue Haas Unica Medium"),
            url("./fonts/NeueHaasUnicaPro-Medium.ttf") format("truetype");
    }
}

@layer default {
    :root {
        --gap: 1rem;
        --fluid-size: clamp(10px, 0.8rem + 0.8vw, 3rem);
        --time: 0.3s;
        --timing: cubic-bezier(0.645, 0.045, 0.355, 1);
        --headerHeight: 10px;
        --title-italic-thin: "IvyPresto Display Thin Italic", serif;
        --title-italic: "IvyPresto Display Light Italic", serif;
        --title-normal: "IvyPresto Text Thin", serif;
        --title: "IvyPresto Text Light", serif;
        --paragraph: "Neue Haas Unica Light", Arial, Helvetica, sans-serif;
        --paragraph-italic: "Neue Haas Unica Light Italic", Arial, Helvetica,
            sans-serif;
        --paragraph-medium: "Neue Haas Unica Medium", Arial, Helvetica,
            sans-serif;

        --pad-big: 5.5%;
        --pad-big-inner: 4.5%;
        --pad-vertical: 4.25em;
    }
    @media screen and (min-width: 45em) {
        :root {
            --pad-big: 10.5%;
            --pad-big-inner: 8.5%;
        }
    }

    html {
        font-size: 16px;
        /* @media screen and (min-width: 45em) {
        font-size: 16px;
    } */
    }
    body {
        font-family: var(--paragraph);
        font-size: var(--fluid-size);
        line-height: 1.27;
        /* font-size: 1em; */
        /* font-variation-settings: "wght" 300; */
        /* letter-spacing: .02em; */
    }

    em {
        font-family: var(--paragraph-italic);
        font-style: normal;
    }

    h1,
    h2,
    h3,
    .H3,
    h4,
    h5,
    h6 {
        font-family: var(--title-normal);
        font-weight: normal;
        letter-spacing: calc(-1em / 100);
    }
    h1 > em,
    h2 > em,
    h3 > em,
    .H3 > em,
    h4 > em,
    h5 > em,
    h6 > em {
        font-family: var(--title-italic);
        font-style: normal;
        letter-spacing: normal;
        text-rendering: geometricPrecision;
    }

    h1 {
        font-size: 4.36em;
        line-height: 1;
        text-rendering: geometricPrecision;
    }
    h2 {
        font-size: 2.63em;
        line-height: 1.2;
        text-rendering: geometricPrecision;
    }
    h3,
    .H3 {
        font-size: 1.97em;
        line-height: 1.2;
    }

    strong,
    .strong {
        font-family: var(--paragraph-medium);
        font-weight: normal;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    nav {
        ul {
            list-style: none;
            padding-inline-start: 0;
        }
    }

    body > header:first-of-type,
    main > *,
    [data-header] {
        padding-inline: .8rem;
    }
    /* main > * {
    padding-block: calc(var(--headerHeight) / 2);
} */
    @media screen and (min-width: 45em) {
        body > header:first-of-type {
            padding-inline: 3.125rem;
        }
        main > *,
        [data-header] {
            padding-inline: 3.125rem;
        }
        /* main > * {
        padding-block: var(--headerHeight);
    } */
    }
}

@layer themes {
    :root {
        --white: #fefdfc;
        --black: #111111;
        --accent: #ed1c7d;

        --Ochre: #e7c71e;
    }

    @layer themes.color {
        body {
            color: var(--black);
            background-color: var(--white);
            a {
                color: inherit;
            }
        }
        [data-main-menu] li:last-of-type a {
            color: var(--accent);
        }
    }

    a {
        background-color: transparent;
        text-decoration: none;
        /* border-block-end: 1px solid transparent; */
        /* transition: border 333ms; */
        /* &:not(:has(svg)):hover {
        border-color: currentColor;
        &::after {
            content: '';
            display: block;
            position: relative;
            top: 2ch;
            box-shadow: 0px 1px 0 0 var(--white), 0px 2px 0 0 var(--white), 0px 3px 0 0 var(--white);
            height: 0.1px;
        }
    } */
    }
    *:focus-visible {
        outline-color: var(--accent);
    }

    button:hover {
        cursor: pointer;
    }

    video {
        --ratio: 1/1;
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: var(--ratio);
        @media screen and (min-width: 45em) {
            --ratio: 16/9;
        }
    }

    .btn {
        display: inline-block;
        font-family: var(--paragraph-medium);
        font-size: 0.74em;
        border: none;
        border-radius: 2lh;
        /* padding: 0.625em 1em; */
        padding: 1.2em 1.8em;
        background-color: var(--Ochre);
        color: var(--black);
        transition: background-color 0.3s, color 0.3s;
    }
    .btn:hover,
    .btn:focus-visible {
        color: var(--Ochre);
        background-color: var(--black);
    }
}

@layer layouts {
    body {
        > header:first-of-type {
            /* position: sticky;
        top: 0;
        z-index: 2;
        background-color: var(--white); */

            padding-block: 0.6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .logo {
                width: clamp(140px, 30lvw, 230px);
                cursor: default;
                a {
                    border: none;
                }
                svg {
                    width: 100%;
                    height: auto;
                    vertical-align: middle;
                }
            }
        }
        main {
            min-height: 100svh;
        }
    }

    body > footer {
        padding-block: 0 6.25em;

        section > div[style] {
            padding-inline: var(--pad-big);
            padding-block: 5.33em;
        }

        h1 {
            font-size: 2.66em;
            letter-spacing: calc(-1em * 5 / 100);
            font-family: var(--title);

            + p {
                font-size: 1.66em;
                margin-block-start: 0.8em;
            }
        }

        [data-header] {
            margin-block-start: 5.33em;
            .logo svg {
                width: clamp(130px, 20lvw, 14.3rem);
                height: auto;
            }
            nav {
                border-block-start: 1px solid;
                margin-block-start: 0.5em;
            }
            [data-menu] {
                flex-direction: column;
                inline-size: fit-content;
                margin-inline: auto 0;
                padding-block-start: 1.3em;
            }
        }
        [data-form] {
            background-color: #27a176;
            padding-block: 2.66em;
            text-align: center;
            border-block-end: 1em solid #1c62ed;
            h1,
            h2 {
                font-family: var(--paragraph-medium);
                font-size: 2em;
                margin-block-end: 0.2em;
            }
        }
    }
    form[name] {
        position: relative;
        inline-size: fit-content;
        margin-inline: auto;

        label {
            display: block;
            span {
                font-size: 0.66em;
            }
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea,
        select {
            width: 100%;
            border: none;
            border-radius: 0.5em;
            background-color: var(--white);
            color: var(--black);
            font-size: 0.666em;
            padding: 0.666em 1em;
            box-sizing: border-box;
            display: block;
            min-width: 20ch;
        }
        textarea {
            min-height: 22ch;
        }
        /* button {
        border: none;
        border-radius: 5px;
        background-color: var(--Ochre);
        font-size: 0.66em;
        text-transform: uppercase;
        padding: 0.65em 1em;
        max-width: 12.5rem;
        margin-inline: auto 0;
        transition: background-color .3s, color .3s, outline .3s;
    } */
        /* button:hover, button:focus-visible {
        color: var(--accent);
        background-color: var(--black);
        outline: 1px solid var(--accent);
    } */

        > div {
            display: grid;
            gap: 2rem;
            margin-block: 1.31em;
        }
        i.required {
            font-style: normal;
            font-size: 1.4em;
            line-height: 0;
        }
        [data-surname] {
            position: absolute;
            top: -10000000em;
        }
    }
    #log {
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        background: var(--black);
        color: var(--white);
        padding: 3em;
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.2s linear;
        border-radius: 0.3em;
    }
    #log:empty {
        opacity: 0;
        z-index: -1;
    }
    form[name="contact"] {
        width: auto;
        padding-inline: max(1em, 18%);

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea,
        select {
            border-radius: 0.25em;
            padding-block: 1.4em;
        }

        select {
            padding-block: 1.2em;
        }

        ::placeholder {
            color: var(--black);
        }

        label span {
            position: absolute;
            padding-inline-start: 1.1em;
            font-size: 0.6em;
            line-height: 1.7;
        }

        > div {
            text-align: start;
            gap: 0.66em;
        }
        label:has(:placeholder-shown) {
            span {
                visibility: hidden;
            }
        }

        @media screen and (min-width: 45em) {
            > div {
                grid-template-columns: 50% 50%;
            }
            label:has(select, textarea) {
                grid-column: span 2;
            }
        }
    }

    [data-menu] {
        display: flex;
        gap: 0.3em 0.625em;
        .active {
            pointer-events: none;
            background-color: var(--Ochre);
        }
        li {
            font-family: var(--paragraph-medium);
            font-size: 0.66em;
        }
        a {
            display: block;
            text-rendering: geometricPrecision;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    [data-main-menu] a {
        padding: 0.52em 0.5em 0.7em;
        border-radius: 0.31em;
    }

    [style*="--BGimg:"] {
        background-image: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 50.02%,
                rgba(0, 0, 0, 0.5) 75%
            ),
            var(--BGimg);
        background-size: cover;
        background-repeat: no-repeat;
        color: var(--white);
    }
    [style*="--ratio:"] {
        aspect-ratio: var(--ratio, none);
    }
    [style*="--imgs:"] {
        background-image: var(--imgs);
        background-repeat: no-repeat;
    }
    [style*="--imgs-pos:"] {
        background-position: var(--imgs-pos);
    }
    [style*="--imgs-size:"] {
        background-size: var(--imgs-size);
    }
    [style*="--BGcol:"] {
        background-color: var(--BGcol);
    }

    /* .size48 {
        font-size: 1.97em;
    }
    .size40 {
        font-size: 1.65em;
    }
    .size32 {
        font-size: 1.316em;
    }
    p.size32 {
        line-height: 1.31;
    }
    .size24 {
        font-size: 1em;
    }
    .size20 {
        font-size: 0.82em;
    }
    .size16 {
        font-size: 0.66em;
    }
    .size14 {
        font-size: 0.58em;
    } */
}

@layer page {
    [name="signup"] [name="user-email"] {
        inline-size: clamp(23ch, 30lvw, 27rem);
        padding: 0.666em 1em;
        text-align: center;
    }
}