:root {
    --pink: #ff245e;
    --pink-gradient: linear-gradient(90deg, #ff0107 0%, #ff13b8 100%);
    --green: #33FF85;
    --green-gradient: linear-gradient(90deg, #00ff74 0%, #00ffde 100%);
    --blue: #2cd7ff;
    --blue-gradient: linear-gradient(90deg, #00ffe8 0%, #0007ff 100%);
    --orange: #FF7C24;
    --orange-gradient: linear-gradient(90deg, #ff7c24 0%, #ffd608 100%);
    --black: #0c0c0c;
    --white: #f9f9f9;

    --font-medium: 18pt;
    --font-multiplier: 1.6;
    --font-small: calc(var(--font-medium) / var(--font-multiplier));
    --font-large: calc(var(--font-medium) * var(--font-multiplier));
    --font-xlarge: calc(var(--font-large) * var(--font-multiplier));

    --edge-padding: 25px;
    --edge-hero-padding: 125px;
    --max-width: 1200px;
}

@media screen and (max-width: 721px) {
    .cta {
        padding: .3rem 1rem;
    }
    :root {
        --font-medium: 14pt;
        --font-small: 10pt;
        --font-large: 20pt;
        --font-xlarge: 30pt;
    }
}

@media screen and (max-width: 421px) {
    .cta {
        padding: .2rem 0.8rem;
    }
    :root {
        --font-medium: 12pt;
        --font-small: 8pt;
        --font-large: 18pt;
        --font-xlarge: 26pt;
    }
}

html {
    overflow-x: hidden;
    background: var(--pink);
    font-family: velodroma-regular;
    font-size: var(--font-medium);
    color: var(--black);
    font-variant-ligatures: none;

    padding: 0; margin: 0;
    scroll-behavior: smooth;
}

body {
    position: relative;
    padding: 0;
    margin: 0;
}

h1 {
    font-family: velodroma-wide;
    font-size: var(--font-xlarge);
    padding: 0; margin: 0;
}
h2 {
    font-family: roboto-bold;
    font-size: var(--font-large);
    padding: 0; margin: 0;
}
h3 {
    font-family: roboto-bold;
    font-size: var(--font-medium);
    padding: 0; margin: 0;
}
h4 {
    font-family: roboto-bold;
    font-size: var(--font-small);
    padding: 0; margin: 0;
}

.cta {
    font-family: velodroma-wide;
    padding: 1rem 5rem;
    background: var(--pink);
    color: var(--black);
    display: inline-flex;
    width: fit-content;
    transition: ease-in-out, .35s ease-in-out;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.cta:visited {
    color: inherit;
}

.cta:hover {
    background: var(--black);
    color: var(--white);
}

.cta::after {
    content: none;
}

a, a:link, a:visited {
    color: inherit;
    text-decoration: none;
    position: relative;
}

a::after {
    content: "";
    background: currentColor;
    color: inherit;
    width: 66%;
    height: 3px;
    display: block;
    position: absolute;
    transition: .33s ease-in-out;
    margin-top: -.2em;
}
a:hover::after {
    text-decoration: none;
    width: 100%;
}

@media screen and (max-width: 721px) {
    .cta {
        padding: .6rem 1.5rem;
    }
}

@font-face {
    font-family: velodroma-regular;
    src: url(../fonts/VelodromaBasic-Regular.otf);
    font-style: normal;
    font-variant-alternates: normal;

}

@font-face {
    font-family: velodroma-wide;
    src: url(../fonts/VelodromaBasic-Wide.otf);
    font-style: normal;
    font-variant-alternates: normal;

}

@font-face {
    font-family: velodroma-superwide;
    src: url(../fonts/VelodromaBasic-SuperWide.otf);
    font-style: normal;
    font-variant-alternates: normal;
}

@font-face {
    font-family: roboto;
    src: url(../fonts/Roboto-Regular.ttf);
    font-style: normal;
    font-variant-alternates: normal;
}

@font-face {
    font-family: roboto-bold;
    src: url(../fonts/Roboto-Bold.ttf);
    font-style: normal;
    font-variant-alternates: normal;
}

@font-face {
    font-family: roboto-light;
    src: url(../fonts/Roboto-Light.ttf);
    font-style: normal;
    font-variant-alternates: normal;
}

@font-face {
    font-family: roboto-black;
    src: url(../fonts/Roboto-Black.ttf);
    font-style: normal;
    font-variant-alternates: normal;
}

@font-face {
    font-family: roboto-medium;
    src: url(../fonts/Roboto-Medium.ttf);
    font-style: normal;
    font-variant-alternates: normal;
}

@font-face {
    font-family: roboto-thin;
    src: url(../fonts/Roboto-Thin.ttf);
    font-style: normal;
    font-variant-alternates: normal;
}