: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%);
    --black: #0c0c0c;
    --white: #f9f9f9;

    --personalBestColor: rgba(101, 235, 135, 0.5);

    --away-color-prim: var(--white);
    --home-color-prim: var(--black);
	
    --away-background-prim: #0061cf;
    --home-background-prim: #e4e2df;

    --away-color-sec: var(--black);
    --home-color-sec: var(--black);
	
    --away-background-sec: #B2E9FF;
    --home-background-sec: var(--white);

    --font-medium: 1.2em;
    --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));

    --width-unit: .84em;
    --height-unit: 1.2em;

    --gap-small: calc(var(--font-small) / 3);
    --gap-medium: calc(var(--font-medium) / 3);
    --gap-large: calc(var(--font-large) / 3);
    --gap-xlarge: calc(var(--font-xlarge) / 3);
}

html {
    font-family: roboto;
    font-size: var(--font-medium);
    font-variant-ligatures: none;
    background: none;
    padding: 0;
    margin: 0;
    overflow-y: hidden;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: none;
    font-family: roboto;
    display: flex;
    flex-direction: row;
    font-variant-ligatures: none;
}

h1 h2 h3 h4 h5 h6 {
    font-family: velodroma-wide;
}


@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;
}