@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --font: "Raleway", "Open Sans", sans-serif, system-ui;
    --text-size-mega: clamp(2.027rem, 5vw + 1rem, 3.815rem);
    --text-size-huge: clamp(1.802rem, 4vw + 1rem, 3.052rem);
    --text-size-xlarge: clamp(1.602rem, 3vw + 1rem, 2.441rem);
    --text-size-large: clamp(1.424rem, 2.5vw + 1rem, 1.953rem);
    --text-size-medium: clamp(1.266rem, 2vw + 1rem, 1.563rem);
    --text-size-small: clamp(1.125rem, 1.5vw + 1rem, 1.25rem);
    --text-size-base: 1rem;
    --neutral-50: #fbfbfc;
    --neutral-100: #f3f3f5;
    --neutral-200: #e8e8ea;
    --neutral-300: #dcdce0;
    --neutral-400: #d1d1d6;
    --neutral-500: #b2b2ba;
    --neutral-600: #a0a0b0;
    --neutral-700: #565660;
    --neutral-800: #2b2b30;
    --neutral-900: #161618;
    --primary-500: #2a7ae4;
    --secondary-500: #eaf3fc;
    --error-50: #ffdddb;
    --error-100: #ffbbb7;
    --error-200: #ff9a93;
    --error-300: #ff786e;
    --error-400: #ff564a;
    --error-500: #ff3426;
    --error-600: #f41000;
    --error-700: #c30d00;
    --error-800: #930900;
    --error-900: #620600;
    --success-50: #eefcd2;
    --success-100: #ddf8a6;
    --success-200: #ccf579;
    --success-300: #bbf14d;
    --success-400: #aaee20;
    --success-500: #8fce10;
    --success-600: #77ac0d;
    --success-700: #5f890b;
    --success-800: #486708;
    --success-900: #304505;
    --warning-50: #fff9d5;
    --warning-100: #fff4ac;
    --warning-200: #ffee82;
    --warning-300: #ffe858;
    --warning-400: #ffe32f;
    --warning-500: #ffdd05;
    --warning-600: #eece00;
    --warning-700: #d9bb00;
    --warning-800: #c3a800;
    --warning-900: #ad9600;
    --info-50: #dff9fe;
    --info-100: #bff2fd;
    --info-200: #9eecfd;
    --info-300: #7ee5fc;
    --info-400: #5edefb;
    --info-500: #3ed8fa;
    --info-600: #0bcef9;
    --info-700: #05a7cb;
    --info-800: #047d98;
    --info-900: #035465;
    --box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0px 6px 12px 0px rgba(0, 0, 0, 0.25);
    --border-radius-out: 5px;
    --border-radius-in: 2.5px;
    --max-width: 1136px;
}

::-webkit-scrollbar {
    width: 0.2rem;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #888888;
    border-radius: 2rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555555;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background-color: var(--neutral-50);
    color: var(--neutral-900);
}

:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 400;
    line-height: 1.25;
    text-wrap: balance;
    letter-spacing: -0.025em;
    break-after: avoid-page;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-kerning: normal;
    font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}

p,
blockquote {
    font-weight: 300;
    font-size: var(--text-size-base);
    line-height: 1.75;
    word-spacing: 0.05em;
    text-wrap: pretty;
    max-width: 65ch;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body > .container,
body > .container > main {
    display: flex;
    flex-direction: column;
}

body > .container {
    position: relative;
    min-height: 100dvh;
    overflow: clip;
}

body > .container > main {
    flex: 1;
    gap: 1rem;
    background-color: var(--neutral-100);
}