:root{


    --color-dark-standard-primary-50: #ffede8;
    --color-dark-standard-primary-100: #ffded6;
    --color-dark-standard-primary-200: #ffbda8;
    --color-dark-standard-primary-300: #ff9566;
    --color-dark-standard-primary-400: #f57400;
    --color-dark-standard-primary-500: #cc5f00;
    --color-dark-standard-primary-600: #a14a00;
    --color-dark-standard-primary-700: #7c3700;
    --color-dark-standard-primary-800: #562400;
    --color-dark-standard-primary-900: #351400;
    --color-dark-standard-primary-950: #220a00;

    --color-dark-standard-secondary-50: #f7f6f5;
    --color-dark-standard-secondary-100: #ecebe9;
    --color-dark-standard-secondary-200: #d5d2cd;
    --color-dark-standard-secondary-300: #b9b4ad;
    --color-dark-standard-secondary-400: #9d968e;
    --color-dark-standard-secondary-500: #847d75;
    --color-dark-standard-secondary-600: #6a645d;
    --color-dark-standard-secondary-700: #514c47;
    --color-dark-standard-secondary-800: #393633;
    --color-dark-standard-secondary-900: #23211f;
    --color-dark-standard-secondary-950: #121110;

    --color-dark-standard-bg-50: #f2f2f2;
    --color-dark-standard-bg-100: #e6e6e6;
    --color-dark-standard-bg-200: #cccccc;
    --color-dark-standard-bg-300: #b3b3b3;
    --color-dark-standard-bg-400: #999999;
    --color-dark-standard-bg-500: #808080;
    --color-dark-standard-bg-600: #666666;
    --color-dark-standard-bg-700: #4d4d4d;
    --color-dark-standard-bg-800: #333333;
    --color-dark-standard-bg-850: #262626;
    --color-dark-standard-bg-900: #1a1a1a;
    --color-dark-standard-bg-950: #121212;


    --color-dark-standard-text-50: #ffffff;
    --color-dark-standard-text-100: #f2f2f2;
    --color-dark-standard-text-200: #e0e0e0;
    --color-dark-standard-text-300: #cccccc;
    --color-dark-standard-text-400: #b3b3b3;
    --color-dark-standard-text-500: #999999;
    --color-dark-standard-text-600: #808080;
    --color-dark-standard-text-700: #666666;
    --color-dark-standard-text-800: #4d4d4d;
    --color-dark-standard-text-900: #333333;
    --color-dark-standard-text-950: #1a1a1a;

    --color-success-500: #10b981;
    --color-success-bg: #ecfdf5;
    --color-success-text: #064e3b;

    --color-error-500: #ef4444;
    --color-error-bg: #fef2f2;
    --color-error-text: #7f1d1d;


    --primary: var(--color-dark-standard-primary-500);
    --primary-hover: var(--color-dark-standard-primary-400);

    --on-primary: var(--color-dark-standard-primary-950);

    --secondary: var(--color-dark-standard-secondary-400);
    --secondary-hover: var(--color-dark-standard-secondary-600);

    --bg: var(--color-dark-standard-bg-950);
    --bg-ui-subtle: var(--color-dark-standard-bg-900);

    --surface: var(--color-dark-standard-bg-850);
    --surface-elevated: var(--color-dark-standard-bg-800);
    --surface-hover: var(--color-dark-standard-bg-700);

    --border: var(--color-dark-standard-bg-700);
    --border-elevated: var(--color-dark-standard-bg-600);

    --text: var(--color-dark-standard-text-100);
    --text-muted: var(--color-dark-standard-secondary-400);

    --font-size-xs: .64rem;
    --font-size-s: .8rem;
    --font-size-m: 1rem;
    --font-size-l: 1.25rem;
    --font-size-xl: 1.563rem;
    --font-size-xxl: 2.441rem;
    --font-size-xxxl: 3.052rem;
    --font-size-xxxxl: 3.815rem;

    --font-company: "Montserrat", sans-serif, system-ui, -apple-system;
    --font-body: "Poppins", sans-serif, system-ui, -apple-system;

    --header-height: 100px;
}

@media screen and (max-width: 600px) {
    :root{
        --header-height: 80px;
    }
}

body{
    padding: 0;
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
}

html {
    font-size: 16px;
    font-family: var(--font-body), sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-company), sans-serif;
}


.not-found{
    width: 100%;
    height: 100dvh;
    min-height: fit-content;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#bg-404{
    position: absolute;
    font-size: 40rem;
    color: var(--text-muted);
    opacity: .25;
    line-height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: -1;
}

.not-found h1{
    color: var(--primary-hover);
    font-size: var(--font-size-xxxl);
    z-index: 100;
    box-sizing: border-box;
    padding: 0 1rem;
    text-align: center;
}

.not-found h2 {
    color: var(--text);
    z-index: 100;
    box-sizing: border-box;
    padding: 0 1rem;
    text-align: center;
}

.not-found a {
    margin-top: 5%;
    text-decoration: none;
}

@media (max-width: 1300px) {
    #bg-404 {
        font-size: 30rem;
    }
}

@media (max-width: 900px) {
    #bg-404 {
        font-size: 20rem;
    }
}

@media (max-width: 650px) {
    #bg-404 {
        font-size: 15rem;
    }
}

@media (max-width: 480px) {
    #bg-404 {
        font-size: 10rem;
    }
}