:root {
    --color-main: #029388;
    --color-main-110: #00776E;
    --color-main-10: rgba(2, 147, 136, 0.1);
    --color-background: #F0F4F4;
    --color-text: rgba(0, 0, 0, 0.70);
}

body {
    background: linear-gradient(#C5EBE8 0px, var(--color-background) 700px);
    background-repeat: no-repeat;
    color: var(--color-text);
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    margin: 0;
}

h1, h2, h3, h4, h5 {
    margin: 0;
}

.h-xl {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    color: #000;
    font-size: 60px;
    font-style: normal;
    font-weight: 300;
    line-height: 60px; /* 100% */
    letter-spacing: -2.4px;
}

.h-l {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    color: #000;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px; /* 120% */
    letter-spacing: -1.6px;
}

.h-m {
    color: #000;
    font-family: "Space Grotesk", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px; /* 130.769% */
    letter-spacing: -1.3px;
}

.h-s {
    color: rgba(0, 0, 0, 0.90);
    font-family: "Space Grotesk", sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 142.857% */
}

p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 26px; /* 162.5% */
}

@media screen and (max-width: 1023px) {
    .h-xl {
        font-size: 42px;
        font-weight: 400;
        line-height: 48px; /* 100% */
    }

    .h-l {
        font-size: 24px;
        line-height: 32px; /* 100% */
    }

    .h-m {
        font-size: 18px;
        line-height: 24px; /* 100% */
    }

    .h-s {
        font-size: 16px;
        line-height: 23px; /* 100% */
    }
}