:root {
    --bg-main: #1b1b1b;
    --bg-boxed: #fff7f5;
    --bg-second: #7d0000;

    --color-text: #ffffff;
    --color-second: #ffffff;

    --border-radius: 8px;
    --border-color: #2b2a2a;

    --shadow-default: 0px 0px 20px 10px rgb(0 0 0 / 50%);
    --shadow-small: 0px 0px 20px 0px rgb(0 0 0 / 50%);
    
    --indent: 20px;
    --indent-button: 15px;

    --header-height: 90px;

    --font-size: 18px;
    --font-size-small: 0.8rem;
    --font-size-medium: 1.3rem;
    --font-size-large: 2.8rem;
    --font-size-ultra: 4.4rem;

    --font-weight: 500;
    --font-weight-semi: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}

@media (width < 1200px) {
    :root {
        --header-height: 90px;
    }
}
@media (576px <= width) {
    :root {
        --indent-block: 100px;
    }
}
@media (width < 576px) {
    :root {
        --indent-block: 50px;
        --font-size-ultra: 3.5rem;
    }
}