: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;
    
    --blue-50: #F5FFFF;
    --blue-100: #F0FFFE;
    --blue-200: #B5FFFB;
    --blue-300: #84FFF9;
    --blue-500: #00A79F;
    --blue-700: #00F0E4;
    --blue-900: #001413;

    --main-blue: var(--blue-900);
    --background: var(--blue-50);

    /* Font sizes */
    --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;

    /* 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;

    /* Fonts */
    --font-default: "Roboto Slab";

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

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

@font-face {
    font-family: Roboto Slab;
    src: url("../fonts/RobotoSlab-VariableFont_wght.ttf");
}

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

* {
    box-sizing: border-box;
    margin: var(--space-0);
    padding: var(--space-0);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background);
    font-family: var(--font-default);
    font-size: var(--text-md);
    letter-spacing: 0.3px;
    text-align: center;
    min-width: var(--overall-min-width);
}

svg {
    fill: var(--main-blue);
}

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

textarea {
    resize: none;
}

textarea, input {
    box-shadow: 0px 0px 0px 300px var(--main-blue) inset !important;
}

textarea, input {
    border: var(--border) var(--main-blue);
    padding: var(--space-3);
    font-family: var(--font-text);
    border-radius: var(--rounded-sm);
    outline: none;
    font-size: var(--text-md);
    caret-color: var(--main-blue);
}

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

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

    textarea:focus-visible, input:focus-visible {
        outline: var(--border) var(--main-blue);
    }

a {
    color: var(--blue-50);
    cursor: pointer;
    user-select: none;
    text-decoration: underline;
    outline: none;
    border-radius: var(--rounded-sm);
    padding: var(--space-1);
    letter-spacing: 1px;
    font-family: var(--font-text);
    font-weight: 400;
    text-transform: capitalize;
}

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

    a:active {
        color: var(--blue-300);
    }

    a:focus-visible {
        outline: var(--border) var(--blue-200);
    }

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

.button {
    background-color: var(--green-500);
    border: var(--border) var(--green-600);
    color: var(--green-100);
}

    @media (hover: hover) and (pointer: fine) {
        .button:hover {
            background-color: var(--green-400);
        }
    }

    .button:active {
        background-color: var(--green-300);
    }

    .button:focus-visible {
        outline: var(--border) var(--green-600);
        border: var(--border) var(--green-100);
    }

    .button:disabled {
        background-color: var(--green-300);
    }

#main-content {
    width: 100%;
}

header {
    display: flex;
    align-items: end;
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    background-color: var(--main-blue);
    color: var(--blue-50);
    font-size: var(--text-lg);
    padding: 12px 50px;
    column-gap: min(5%, 65px);
    height: 65px;
}

    #main-link {
        display: block !important;
        font-size: var(--text-xl);
        text-decoration: none;
        font-weight: 500;
    }

        #main-link::after {
            content: "Anholt Gin Plukkeuge";
        }

    #header-right-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: end;
        height: 100%;
    }

        #header-right-wrapper > img {
            height: 60px;
        }

    @media (width <= 710px) {
        .secondary-link {
            display: none;
        }
    }

    @media (width <= 900px) {
        #main-link::after {
            content: "Plukkeuge";
        }
    }

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--main-blue);
    color: var(--blue-50);
    padding: var(--space-5) var(--space-20);
    white-space: nowrap;
}