/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.333,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl|s-l|l-2xl&g=s,l,xl,12 */

:root {
    /* For Font */
    --step--2: clamp(0.7035rem, 0.8083rem + -0.1353vw, 0.7813rem);
    --step--1: clamp(0.9375rem, 0.9374rem + 0.0004vw, 0.9377rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.24rem + 0.55vw, 1.6663rem);
    --step-2: clamp(1.62rem, 1.4109rem + 1.0454vw, 2.2211rem);
    --step-3: clamp(1.944rem, 1.5904rem + 1.7682vw, 2.9607rem);
    --step-4: clamp(2.3328rem, 1.7715rem + 2.8067vw, 3.9467rem);
    --step-5: clamp(2.7994rem, 1.9432rem + 4.281vw, 5.2609rem);
    --step-6: clamp(3.3592rem, 2.0884rem + 6.354vw, 7.0128rem);

    /* For padding, margin */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

    /* Custom pairs */
    --space-s-xl: clamp(1.125rem, 0.212rem + 4.5652vw, 3.75rem);
    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
    --space-l-2xl: clamp(2.25rem, 1.2935rem + 4.7826vw, 5rem);

    --size-step-0: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
    --size-step-1: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);

    --border-radius-small: var(--size-step-0);
    --border-radius: var(--size-step-1);

    --base-font: 'Roboto', sans-serif;

    --color-fg: rgb(37 42 49);
    --color-fg-opacity: rgba(0, 0, 0, 0.7);
    --color-fg-second: rgb(37 48 49);
    --color-bg: #f5f5f7;

    --color-cards: #252525;

    --color-dark-text: #1d1d1f;
    --color-light-text: #f5f5f7;

    --color-primary: #D2E0FB;
    --color-primary-hover: #5b90f8;

    --color-secondary: #79AC78;
    --color-secondary-hover: #1eac1b;

    --color-link: #008bfd;

}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--base-font);
    color: var(--color-light-text);
    background-color: var(--color-fg);
}

h1 {
    font-size: var(--step-5);
}

h2 {
    font-size: var(--step-3);
}

h3 {
    font-size: var(--step-2);
}

h1 h2 h3 {
    font-weight: 700;
}

p {
    font-size: var(--step-1);
    font-weight: 400;
}

a {
    font-size: var(--step-1);
    font-weight: 400;
    color: var(--color-link);
    text-decoration: none;
}

/*
button {
    border-style: none;
    border-radius: 1rem;
    padding: 10px;
    font-size: var(--step-1);
    background-color: var(--color-secondary);
    transition: 0.8s;
}

button:hover {
    background-color: var(--color-secondary-hover);
}
    */