:root {
    /*--body-color: #3b0510;*/
    /*--body-color: #000;*/
    --body-color: rgb(60, 25, 30);
    --popup-text-color: #3B111A;

    --hover-text-color: #FFF;
    --hover-text-color-opacity-link: rgba(256, 256, 256, 0.7);

    --h1-line-height: normal;
    --h1-letter-spacing: 4px;
    --h1-font-weight: 800;
    --h1-font-size: 48px;

    --h2-line-height: normal;
    --h2-letter-spacing: 3px;
    --h2-font-weight: 600;
    --h2-font-size: 32px;

    --h3-line-height: normal;
    --h3-letter-spacing: 3px;
    --h3-font-weight: 500;
    --h3-font-size: 32px;

    --link-line-height: normal;
    --link-letter-spacing: 10%;
    --link-font-weight: 300;
    --link-font-size: 20px;

    --span-letter-spacing: 3px;
    --span-line-height: normal;
    --span-font-weight: 300;
    --span-font-size: 20px;

    --mobile-display: none;
    --transition: .7s;

    --content-block-gap: 50px;

    --container-bottom-gap: 137px;
}

body {
    background: var(--body-color);
    position: relative;
    margin: 0;
}

main {
    background-image: url("/static/carempire/imgs/nav/background.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

h1 {
    letter-spacing: var(--h1-letter-spacing);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
    text-transform: uppercase;
}

h2 {
    letter-spacing: var(--h2-letter-spacing);
    line-height: var(--h2-line-height);
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size);
    text-transform: uppercase;
}

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

h1, h2, h3, span {
    font-family: "Raleway", Arial, sans-serif;
}

.hover_text {
    letter-spacing: var(--link-letter-spacing);
    font-family: "Inter", Arial, sans-serif;
    line-height: var(--link-line-height);
    font-weight: var(--link-font-weight);
    font-size: var(--link-font-size);
    color: var(--hover-text-color);
    text-decoration: none;
}

.hover_text:hover {
    text-decoration: underline;
}

.hidden {
    display: none;
}

span {
    letter-spacing: var(--span-letter-spacing);
    line-height: var(--span-line-height);
    font-weight: var(--span-font-weight);
    font-size: var(--span-font-size);
    white-space: break-spaces;
}

@media only screen and (max-width: 1240px) {
    :root {
        --h1-font-size: 36px;

        --h2-font-size: 26px;

        --h3-font-weight: 400;
        --h3-font-size: 26px;
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --link-font-size: 18px;
        --content-block-gap: 30px;
        --h3-font-weight: 400;
        --h3-font-size: 22px;
    }
}

@media only screen and (max-width: 760px) {
    :root {
        --mobile-display: flex;
        --content-block-gap: 20px;
        --h1-letter-spacing: 3px;
        --h2-letter-spacing: 2px;
        --h1-font-size: 28px;
        --h2-font-size: 20px;

        --span-letter-spacing: 2px;
        --span-font-size: 18px;

    }
}

@media only screen and (max-width: 480px) {
    :root {
        --span-font-size: 14px;
    }
}

@media only screen and (max-width: 415px) {
    :root {
        --h1-font-size: 22px;
        --h2-font-size: 18px;
    }

    h2 {
        text-transform: none;
    }
}