:root {
    /* Rounded border radii */
    --rounded-none: 0px;
    --rounded-xs: 6px;
    --rounded-sm: 12px;
    --rounded-md: 18px;
    --rounded-lg: 32px;
    --rounded-full: 100%;

    /* Border */
    --no-border: 0px;
    --border: 1px solid;

    /* Colors */
    --transparent: transparent;
    --white: #FFFFFF;
    --error: #C7032A;

    --red-25: #FFFCFD;
    --red-50: #E9DBDE;
    --red-100: #D3B6BD;
    --red-200: #C59EA7;
    --red-300: #B68692;
    --red-400: #A76D7C;
    --red-450: #995566;
    --red-500: #8A3D50;
    --red-600: #6D0C24;
    --red-700: #570A1D;
    --red-800: #410716;
    --red-900: #21040B;
    --red-950: #0B0104;
    --red-highlight: #570A1D55;

    /* Font sizes */
    --text-4xs: 8px;
    --text-3xs: 9px;
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 30px;
    --text-3xl: 40px;
    --text-4xl: 56px;
    --text-5xl: 70px;

    /* Spacing */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-15: 60px;
    --space-20: 80px;
    --space-25: 100px;
    --space-35: 140px;
    --space-45: 180px;

    /* Block width */
    --block-width-xs: 90px;
    --block-width-sm: 270px;
    --block-width-md: 360px;
    --block-width-lg: 480px;
    --block-width-xl: 560px;

    /* Icon */
    --icon-dimensions: 60px;
    --icon-dimensions-sm: 50px;
    --icon-font: 44px;
    --icon-font-sm: 34px;

    /* Background */
    --background: var(--red-50);

    /* Fonts */
    --font-default: Blithe;
    --font-text: BelovedSans-Bold;

    /* Transform */
    --default-transition: transform 0.3s ease;

    /* General configurations */
    --overall-min-width: 325px;
    --overall-max-width: 1400px;

    /* Paddings */
    --padding-x: var(--space-10);
    --padding-y: var(--space-5);
}

    @media (width <= 600px) {
        :root {
            --padding-x: var(--space-8);
            --padding-y: var(--space-4);
        }
    }

    @media (width <= 415px) {
        :root {
            --padding-x: var(--space-6);
            --padding-y: var(--space-3);
        }
    }

@font-face {
    font-family: Blithe;
    src: url("Blithe.woff2");
}

@font-face {
    font-family: BelovedSans-Bold;
    src: url("BelovedSansBold.woff2");
}

@font-face {
    font-family: Baskervville-Regular;
    src: url("Baskervville-Regular.ttf");
}

@font-face {
    font-family: Baskervville-Italic;
    src: url("Baskervville-Italic.ttf");
}

* {
    box-sizing: border-box;
    margin: var(--space-0);
    padding: var(--space-0);
    -webkit-tap-highlight-color: var(--red-highlight);
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--background);
    font-family: var(--font-text);
    font-size: var(--text-md);
    color: var(--red-950);
    text-align: center;
    min-width: var(--overall-min-width);
    min-height: 100%;
}

main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--space-10);
}

header {
    position: sticky;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: 100;
}

    #header-content {
        display: flex;
        align-items: center;
        justify-content: end;
        position: relative;
        width: 100%;
        height: fit-content;
        transition: opacity 0.5s ease-in-out;
        font-size: var(--text-lg);
        padding: 12px 50px;
        column-gap: min(5%, 65px);
    }

        #header-background {
             position: absolute;
             width: 100%;
             height: 100%;
             background-color: var(--red-25);
             left: 0px;
             z-index: -1;
             transition: opacity 0.5s ease-in-out;
        }

            header.transparent #header-background {
                 opacity: 0.4;
            }

        #header-logo-content {
            flex: 1;
            display: flex;
        }

            #header-content a#header-logo {
                padding: var(--space-0) !important;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                #header-logo > div {
                    width: 120px;
                    height: 60px;
                    background-image: url(/images/logo_small.webp);
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }

    @media (width <= 800px) {
        #header-content a {
            font-size: var(--text-sm) !important;
        }
    }

    @media (width <= 700px) {
        #header-content {
            padding: 12px 30px;
            column-gap: min(3%, 65px);
        }
    }

    @media (width <= 600px) {
        #header-content a {
            font-size: var(--text-xs) !important;
            padding: var(--space-0) var(--space-2) !important;
            padding-top: var(--space-1) !important;
        }

            #header-logo > div {
                width: 90px;
                height: 45px;
            }
    }

    @media (width <= 545px) {
        #header-content {
            column-gap: min(2%, 65px);
        }

            #header-content a {
                font-size: var(--text-2xs) !important;
            }
    }

    @media (width <= 475px) {
        #header-content {
            padding: 12px 10px;
            column-gap: var(--space-2);
            justify-content: space-evenly;
        }

            #header-content a {
                font-size: var(--text-2xs) !important;
            }

            #header-logo > div {
                width: 72px;
                height: 36px;
            }
    }

    @media (width <= 450px) {
        #header-content {
            column-gap: var(--space-1);
        }

            #header-content a {
                font-size: var(--text-3xs) !important;
            }
    }

    @media (width <= 400px) {
        #header-content a {
            font-size: var(--text-4xs) !important;
            padding: var(--space-0) 6px !important;
            padding-top: var(--space-1) !important;
        }

        #header-logo > div {
            width: 48px;
            height: 24px;
        }
    }

svg {
    fill: var(--red-800);
}

input:disabled, textarea:disabled, button:disabled {
    cursor: not-allowed;
}

textarea {
    resize: none;
    width: 100%;
    height: 100%;
    border: none;
    padding: var(--space-2);
}

    div:has(> textarea) {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-1);
        background-color: var(--red-25);
    }

input, div:has(> textarea) {
    border: var(--border) var(--red-600);
    border-radius: var(--rounded-sm);
}

input {
    padding: var(--space-3);
}

textarea, input {
    font-family: Baskervville-Regular;
    outline: none;
    font-size: var(--text-md);
    caret-color: var(--red-950);
    box-shadow: 0px 0px 0px 300px var(--red-150) inset !important;
}

    input:not(placeholder-shown), textarea:not(placeholder-shown) {
        -webkit-text-fill-color: var(--red-950);
    }

    input:placeholder-shown, textarea:placeholder-shown {
        -webkit-text-fill-color: var(--red-400);
    }

    div:has(> textarea:focus-visible), input:focus-visible {
        outline: var(--border) var(--red-600);
    }

a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red-950);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    outline: none;
    outline-offset: 0px;
    border-radius: var(--rounded-sm);
    padding: var(--space-1);
    letter-spacing: 0.5px;
    font-family: var(--font-text);
    text-transform: capitalize;
}

    @media (hover: hover) and (pointer: fine) {
        a:hover {
            color: var(--red-600);
        }
    }

    a:active {
        color: var(--red-500);
    }

    a:focus-visible {
        outline: var(--border) var(--red-950);
    }

.header-link {
    background-color: var(--red-50);
    padding: var(--space-1) var(--space-3);
    letter-spacing: 1.3px;
    column-gap: var(--space-2);
    font-size: var(--text-md);
    padding-top: var(--space-2);
}

button, #link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-text);
    font-size: var(--text-md);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--rounded-sm);
    outline: none;
    text-transform: capitalize;
    cursor: pointer;
    letter-spacing: 1.3px;
    column-gap: var(--space-2);
    padding-top: var(--space-2);
}

.button, #link-button {
    background-color: var(--red-600);
    border: var(--border) var(--red-700);
    color: var(--red-50);
}

    @media (hover: hover) and (pointer: fine) {
        .button:hover, #link-button:hover {
            background-color: var(--red-500);
        }
    }

    .button:active, #link-button:active {
        background-color: var(--red-400);
    }

    .button:focus-visible, #link-button:focus-visible {
        outline: var(--border) var(--red-700);
        border: var(--border) var(--red-50);
    }

    .button:disabled, #link-button:disabled {
        background-color: var(--red-400);
    }

.scroll {
    scrollbar-color: var(--red-300) var(--transparent);
}

.scroll::-webkit-scrollbar {
    width: 5px;
    margin-right: var(--space-1);
}

.scroll::-webkit-scrollbar-thumb {
    background-color: var(--red-600);
    border-radius: var(--rounded-sm);
}

.hidden {
    display: none !important;
}

.text {
    font-family: Baskervville-Regular;
    font-size: var(--text-xl);
}

.content {
    font-family: Baskervville-Regular;
    font-size: var(--text-xl);
    padding: var(--padding-y) var(--padding-x);
    text-align: center;
}

    @media (width <= 600px) {
        .text, .content {
            font-size: var(--text-lg);
        }
    }

    @media (width <= 415px) {
        .text, .content {
            font-size: var(--text-md);
        }
    }

.left {
    text-align: left;
}

.italic {
    font-family: Baskervville-Italic;
}

ul {
    padding-left: calc(2 * var(--padding-x));
    padding-right: var(--padding-x);
}

    li {
        margin: var(--space-4) var(--space-0);
    }

        @media (width <= 600px) {
            li {
                margin: var(--space-2) var(--space-0);
            }
        }

label {
    font-family: Baskervville-Regular;
    margin-bottom: var(--space-1);
}

img {
    object-fit: cover;
    object-position: center;
}

footer {
    width: 100%;
    background-color: var(--red-700);
    color: var(--red-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Baskervville-Regular;
    padding: var(--space-5) var(--space-20);
}

    #insta-link {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: start;
    }

    #insta-link > a > svg {
        fill: var(--red-50);
    }

    #address {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: end;
    }

        #address > a {
            display: flex;
            align-items: start;
            justify-content: center;
            flex-direction: column;
            color: var(--red-50);
            font-family: Baskervville-Regular;
        }

    @media (width <= 555px) {
        footer {
            font-size: var(--text-sm);
            padding: var(--space-3) var(--space-10);
        }
    }

    @media (width <= 415px) {
        footer {
            font-size: var(--text-xs);
            padding: var(--space-3) var(--space-6);
        }
    }