:root {
    --b-radius: 15px;
    --c-strong-red: #e00000;
    --c-text: #101010;
    --ie-width: calc(100vw - var(--page-margins) * 2);
    --ie-width-medium: calc((100vw - var(--page-margins) * 2) * 0.85);
    --ie-width-short: calc((100vw - var(--page-margins) * 2) * 0.75);
    --ie-width-micro: calc((100vw - var(--page-margins) * 2) * 0.5);
    --ie-width-nano: calc((100vw - var(--page-margins) * 2) * 0.35);
    --padd: 10px;
    --page-margins: 10vw;
    --space: 25px;
}

body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space) * 2);
}

a, span, p, button {
    color: var(--c-text);
}
p {
    line-height: 150%;
}

strong { font-weight: 700; }

em > a { 
    position: relative;
    text-decoration: solid;

    &::after {
        content: "";

        display: block;
        position: absolute;
        bottom: -5px;

        width: 100%;
        height: 2px;

        background-color: #101010;
    }
 }

a.cta_button {
    background-color: var(--c-strong-red);

    color: white;

    padding: var(--padd);
    border-radius: var(--b-radius);

    font-weight: 900;
}
button {
    cursor: pointer;

    background: transparent;

    border: none;
}

h1 {
    font-size: clamp(1.75rem, 0.85rem + 3.6vw, 4rem);
    font-weight: 900;
    width: var(--ie-width-short);
    text-align: center;
}

h2 {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
}

img {
    &.i_icon {
        display: flex;
        width: var(--space);
    }
}

@media screen and (max-width: 850px) {
    h1 {
        width: var(--ie-width-medium);
    }
}

@media screen and (max-width: 600px) {
    h1 {
        width: var(--ie-width);
    }
}