:root {
    /* Primary */
    --color-primary-0-rgb: 255 255 255;
    --color-primary-50-rgb: 232 239 255;
    --color-primary-100-rgb: 202 219 255;
    --color-primary-200-rgb: 163 194 255;
    --color-primary-300-rgb: 115 163 255;
    --color-primary-400-rgb: 70 132 255;
    --color-primary-500-rgb: 1 71 255; /* basic */
    --color-primary-600-rgb: 0 63 230;
    --color-primary-700-rgb: 0 52 190;
    --color-primary-800-rgb: 0 41 145;
    --color-primary-900-rgb: 0 30 100;
    /* Secondary */
    --color-secondary-0-rgb: 255 255 255;
    --color-secondary-50-rgb: 250 250 251;
    --color-secondary-100-rgb: 245 245 246;
    --color-secondary-200-rgb: 236 236 238;
    --color-secondary-300-rgb: 230 230 232;
    --color-secondary-400-rgb: 225 225 227;
    --color-secondary-500-rgb: 227 227 229; /* basic */
    --color-secondary-550-rgb: 213 213 216;
    --color-secondary-600-rgb: 199 199 202;
    --color-secondary-700-rgb: 162 162 166;
    --color-secondary-800-rgb: 119 119 124;
    --color-secondary-900-rgb: 77 77 82;
    /* Neutral (Fonts) */
    --color-neutral-0-rgb: 255 255 255;
    --color-neutral-50-rgb: 245 247 247;
    --color-neutral-100-rgb: 226 230 231;
    --color-neutral-200-rgb: 196 202 203;
    --color-neutral-300-rgb: 161 168 170;
    --color-neutral-400-rgb: 120 127 129;
    --color-neutral-500-rgb: 82 90 92;
    --color-neutral-600-rgb: 55 62 63;
    --color-neutral-700-rgb: 33 38 39;
    --color-neutral-800-rgb: 18 21 21;
    --color-neutral-900-rgb: 0 16 17; /* basic */
    /* Warning */
    --color-yellow-0-rgb: 255 255 255;
    --color-yellow-50-rgb: 255 250 235;
    --color-yellow-100-rgb: 254 243 199;
    --color-yellow-200-rgb: 253 230 138;
    --color-yellow-300-rgb: 252 211 77;
    --color-yellow-400-rgb: 251 191 36;
    --color-yellow-500-rgb: 246 195 67; /* basic */
    --color-yellow-600-rgb: 234 179 8;
    --color-yellow-700-rgb: 202 138 4;
    --color-yellow-800-rgb: 161 98 7;
    --color-yellow-900-rgb: 133 77 14;
    /* Success */
    --color-green-0-rgb: 255 255 255;
    --color-green-50-rgb: 236 253 245;
    --color-green-100-rgb: 209 250 229;
    --color-green-200-rgb: 167 243 208;
    --color-green-300-rgb: 110 231 183;
    --color-green-400-rgb: 52 211 153;
    --color-green-500-rgb: 16 185 129; /* basic */
    --color-green-600-rgb: 5 150 105;
    --color-green-700-rgb: 4 120 87;
    --color-green-800-rgb: 6 95 70;
    --color-green-900-rgb: 6 78 59;
    /* Error */
    --color-red-0-rgb: 255 255 255;
    --color-red-50-rgb: 254 242 242;
    --color-red-100-rgb: 254 226 226;
    --color-red-200-rgb: 254 202 202;
    --color-red-300-rgb: 252 165 165;
    --color-red-400-rgb: 248 113 113;
    --color-red-500-rgb: 239 68 68; /* basic */
    --color-red-600-rgb: 220 38 38;
    --color-red-700-rgb: 185 28 28;
    --color-red-800-rgb: 153 27 27;
    --color-red-900-rgb: 127 29 29;
    /* Mask - Shade */
    --color-mask-shade-0: rgba(0 16 17 / 0.00);
    --color-mask-shade-5: rgba(0 16 17 / 0.05);
    --color-mask-shade-10: rgba(0 16 17 / 0.10);
    --color-mask-shade-15: rgba(0 16 17 / 0.15);
    --color-mask-shade-20: rgba(0 16 17 / 0.20);
    --color-mask-shade-30: rgba(0 16 17 / 0.30);
    --color-mask-shade-40: rgba(0 16 17 / 0.40);
    --color-mask-shade-50: rgba(0 16 17 / 0.50);
    --color-mask-shade-60: rgba(0 16 17 / 0.60);
    --color-mask-shade-70: rgba(0 16 17 / 0.70);
    --color-mask-shade-80: rgba(0 16 17 / 0.80);
    --color-mask-shade-90: rgba(0 16 17 / 0.90);
    --color-mask-shade-100: rgba(0 16 17 / 1.00);
    /* Mask - Tint */
    --color-mask-tint-0: rgba(255 255 255 / 0.00);
    --color-mask-tint-5: rgba(255 255 255 / 0.05);
    --color-mask-tint-10: rgba(255 255 255 / 0.10);
    --color-mask-tint-20: rgba(255 255 255 / 0.20);
    --color-mask-tint-30: rgba(255 255 255 / 0.30);
    --color-mask-tint-40: rgba(255 255 255 / 0.40);
    --color-mask-tint-50: rgba(255 255 255 / 0.50);
    --color-mask-tint-60: rgba(255 255 255 / 0.60);
    --color-mask-tint-70: rgba(255 255 255 / 0.70);
    --color-mask-tint-80: rgba(255 255 255 / 0.80);
    --color-mask-tint-90: rgba(255 255 255 / 0.90);
    --color-mask-tint-100: rgba(255 255 255 / 1.00);
    /* SIZES */
    /* Site */
    --size-page-max-width: 1300px;
    /* Font */
    --size-font-h1: 2rem; /* 32px */
    --size-font-h2: 1.75rem; /* 28px */
    --size-font-h3: 1.5rem; /* 24px */
    --size-font-h4: 1.25rem; /* 20px */
    --size-font-emphasized: 1.125rem; /* 18px */
    --size-font-p: 1rem; /* 16px */
    --size-font-secondary: 0.875rem; /* 14px */
    --size-font-caption: 0.75rem; /* 12px */
    /* Line Height */
    --size-line-height-h1: 1.25; /* 40 / 32 */
    --size-line-height-h2: 1.2857; /* 36 / 28 */
    --size-line-height-h3: 1.3333; /* 32 / 24 */
    --size-line-height-h4: 1.4; /* 28 / 20 */
    --size-line-height-emphasized: 1.4444; /* 26 / 18 */
    --size-line-height-p: 1.5; /* 24 / 16 */
    --size-line-height-secondary: 1.4286; /* 20 / 14 */
    --size-line-height-caption: 1.3333; /* 16 / 12 */
    /* Radius */
    --size-radius-xl: 1rem; /* 16px */
    --size-radius-l: 0.75rem; /* 12px */
    --size-radius-base: 0.5rem; /* 8px  */
    --size-radius-s: 0.375rem; /* 6px  */
    --size-radius-xs: 0.25rem; /* 4px  */
    --size-radius-xxs: 0.1875rem; /* 3px  */
    /* Spacing */
    --size-spacing-0: 0; /* 0px */
    --size-spacing-2: 0.125rem; /* 2px */
    --size-spacing-4: 0.25rem; /* 4px */
    --size-spacing-5: 0.3125rem; /* 5px */
    --size-spacing-6: 0.375rem; /* 6px */
    --size-spacing-8: 0.5rem; /* 8px */
    --size-spacing-12: 0.75rem; /* 12px */
    --size-spacing-16: 1rem; /* 16px */
    --size-spacing-24: 1.5rem; /* 24px */
    --size-spacing-32: 2rem; /* 32px */
    --size-spacing-40: 2.5rem; /* 40px */
    --size-spacing-48: 3rem; /* 48px */
    /* FONT */
    --font-family-basic: 'Onest', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-regex: 'Geist Mono', sans-serif;
    /* TRANSITION */
    --transition-medium: 0.2s ease;
    --transition-small: 0.1s ease;
}

* {
    --text-color-basic-dark: rgb(var(--color-neutral-900-rgb));
    --text-color-basic-light: rgb(var(--color-neutral-0-rgb));
    --color-primary-default: rgb(var(--color-primary-500-rgb));
    --color-primary-hover: rgb(var(--color-primary-600-rgb));
    --color-primary-active: rgb(var(--color-primary-700-rgb));
    --color-primary-disabled: rgb(var(--color-primary-200-rgb));
    margin: 0;
    padding: 0;
    line-height: 1;
    border: 0;
    font-family: var(--font-family-basic);
    font-size: 16px;
    box-sizing: border-box;
}

h1 {
    font-size: var(--size-font-h1);
    line-height: var(--size-line-height-h1);
    font-weight: 600;
}

h2 {
    font-size: var(--size-font-h2);
    line-height: var(--size-line-height-h2);
    font-weight: 600;
}

h3 {
    font-size: var(--size-font-h3);
    line-height: var(--size-line-height-h3);
    font-weight: 600;
}

h4 {
    font-size: var(--size-font-h4);
    line-height: var(--size-line-height-h4);
    font-weight: 500;
}

.p-emphasized {
    font-size: var(--size-font-emphasized);
    line-height: var(--size-line-height-emphasized);
    font-weight: 500;
}

p {
    font-size: var(--size-font-p);
    line-height: var(--size-line-height-p);
    font-weight: 400;
}


.p-secondary {
    font-size: var(--size-font-secondary);
    line-height: var(--size-line-height-secondary);
    font-weight: 400;
}

.p-caption {
    font-size: var(--size-font-caption);
    line-height: var(--size-line-height-caption);
    font-weight: 400;
}


.no-select {
    user-select: none;
}

.no-handle {
    user-select: none;
    pointer-events: none;
}

.mouse-enter-wrapper {
    cursor: pointer;
}

.page-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--size-spacing-40) var(--size-spacing-16);
    height: fit-content;
    justify-content: center;
    align-items: center;
}

    .page-section.grey {
        background-color: rgb(var(--color-secondary-50-rgb));
        border-top: 1px solid var(--color-mask-shade-5);
        border-bottom: 1px solid var(--color-mask-shade-5);
    }

    .page-section-content {
        width: 100%;
        max-width: var(--size-page-max-width);
        height: fit-content;
    }

input {
    font-size: var(--size-font-p);
    line-height: var(--size-line-height-p);
    font-weight: 400;
}

    input::placeholder,
    textarea::placeholder{
        color: rgb(var(--color-neutral-200-rgb));
    }


.image-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(var(--color-secondary-400-rgb));
    background-color: rgb(var(--color-secondary-100-rgb));
    border-radius: var(--size-radius-base);
    box-shadow: 0 0 20px 0 var(--color-mask-shade-10);
}

.image {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: left top;
}