@font-face {
    font-family: "Avus";
    src: url("/assets/fonts/AvusProRegular.woff2") format("woff2"),
    url("/assets/fonts/AvusProRegular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Avus";
    src: url("/assets/fonts/AvusProBold.woff2") format("woff2"),
    url("/assets/fonts/AvusProBold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

:root {
    --primary-color: #E9FF00;
    --primary-color-rgb: 233, 255, 0;
    --secondary-color: #91896D;
    --black: #000000;

    --spacer-lg: 1.5rem;
    --spacer-md: .8rem;
    --spacer-sm: .45rem;
    --spacer-xs: .3rem;

    --font-size-xl: 1.5rem;
    --font-size-lg: 1.2rem;
    --font-size-md: 1.1rem;
    --font-size-sm: .85rem;

    /* Route timeline variables */
    --route-dot-size: 32px;
    --route-info-dot-size: 10px;
}


@media (max-width: 900px) {
    :root {
        --spacer-lg: 1.3rem;
        --spacer-md: .7rem;
        --spacer-sm: .4rem;
        --spacer-xs: .3rem;

        --font-size-xl: 1.2rem;
        --font-size-lg: 1.05rem;
        --font-size-md: 1rem;
        --font-size-sm: .85rem;
    }
}


html {
    font-size: 110%;
    height: 100dvh;
    width: 100dvw;
    overflow: hidden;
    font-family: Avus, sans-serif;
}

body {
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h1 {
    margin-bottom: var(--spacer-md);
}

h2, h3, h4, h5, p {
    margin-bottom: var(--spacer-md);
    line-height: 125%;
    padding-right: var(--spacer-md);
}

p:has(small) {
    line-height: 105%;
}

p {
    font-size: var(--font-size-md);
    white-space: pre-wrap;
    padding-right: var(--spacer-md);
}

@media (min-width: 901px) {
    p {
        padding-right: var(--spacer-lg);
    }
}

a {
    text-decoration: none;
    color: var(--black);
}

a:hover {
    color: var(--secondary-color)
}


small {
    font-size: var(--font-size-sm);
    line-height: 110%;
}

h1 {
    font-size: var(--font-size-xl);
    font-family: "brevia", sans-serif;
    font-weight: 800;
    letter-spacing: -0.06rem;
}

h2, h3, h4, h5 {
    font-size: var(--font-size-lg);
    font-family: "brevia", sans-serif;
    font-weight: 800;
    letter-spacing: -0.04rem;
    line-height: 120%;
}


@media (max-width: 900px) {
    html {
        font-size: 95%;
    }
}