@font-face {
    font-family: "Spectral";
    src:
        url("/fonts/Spectral/spectral-light.woff2") format("woff2"),
        url("/fonts/Spectral/spectral-light.woff") format("woff"),
        url("/fonts/Spectral/spectral-light.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Spectral";
    src:
        url("/fonts/Spectral/spectral-regular.woff2") format("woff2"),
        url("/fonts/Spectral/spectral-regular.woff") format("woff"),
        url("/fonts/Spectral/spectral-regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Spectral";
    src:
        url("/fonts/Spectral/spectral-italic.woff2") format("woff2"),
        url("/fonts/Spectral/spectral-italic.woff") format("woff"),
        url("/fonts/Spectral/spectral-italic.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: italic;
}
@font-face {
    font-family: "Spectral";
    src:
        url("/fonts/Spectral/spectral-medium.woff2") format("woff2"),
        url("/fonts/Spectral/spectral-medium.woff") format("woff"),
        url("/fonts/Spectral/spectral-medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Spectral";
    src:
        url("/fonts/Spectral/spectral-semibold.woff2") format("woff2"),
        url("/fonts/Spectral/spectral-semibold.woff") format("woff"),
        url("/fonts/Spectral/spectral-semibold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Spectral";
    src:
        url("/fonts/Spectral/spectral-bold.woff2") format("woff2"),
        url("/fonts/Spectral/spectral-bold.woff") format("woff"),
        url("/fonts/Spectral/spectral-bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Metropolis";
    src:
        url("/fonts/Metropolis/Metropolis-Light.woff2") format("woff2"),
        url("/fonts/Metropolis/Metropolis-Light.woff") format("woff"),
        url("/fonts/Metropolis/Metropolis-Light.ttf") format("truetype");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Metropolis";
    src:
        url("/fonts/Metropolis/Metropolis-Regular.woff2") format("woff2"),
        url("/fonts/Metropolis/Metropolis-Regular.woff") format("woff"),
        url("/fonts/Metropolis/Metropolis-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Metropolis";
    src:
        url("/fonts/Metropolis/Metropolis-Medium.woff2") format("woff2"),
        url("/fonts/Metropolis/Metropolis-Medium.woff") format("woff"),
        url("/fonts/Metropolis/Metropolis-Medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Metropolis";
    src:
        url("/fonts/Metropolis/Metropolis-SemiBold.woff2") format("woff2"),
        url("/fonts/Metropolis/Metropolis-SemiBold.woff") format("woff"),
        url("/fonts/Metropolis/Metropolis-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Metropolis";
    src:
        url("/fonts/Metropolis/Metropolis-Bold.woff2") format("woff2"),
        url("/fonts/Metropolis/Metropolis-Bold.woff") format("woff"),
        url("/fonts/Metropolis/Metropolis-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 700;
    src:
        url("/fonts/Geist-Bold.woff2") format("woff2"),
        url("/fonts/Geist-Bold.woff") format("woff");
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 600;
    src:
        url("/fonts/Geist-SemiBold.woff2") format("woff2"),
        url("/fonts/Geist-SemiBold.woff") format("woff");
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 500;
    src:
        url("/fonts/Geist-Medium.woff2") format("woff2"),
        url("/fonts/Geist-Medium.woff") format("woff");
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400;
    src:
        url("/fonts/Geist-Regular.woff2") format("woff2"),
        url("/fonts/Geist-Regular.woff") format("woff");
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 300;
    src:
        url("/fonts/Geist-Light.woff2") format("woff2"),
        url("/fonts/Geist-Light.woff") format("woff");
}

@font-face {
    font-family: "SNPro";
    font-style: normal;
    font-weight: 700;
    src:
        url("/fonts/SNPro-Bold.woff2") format("woff2"),
        url("/fonts/SNPro-Bold.woff") format("woff");
}
@font-face {
    font-family: "SNPro";
    font-style: normal;
    font-weight: 600;
    src:
        url("/fonts/SNPro-SemiBold.woff2") format("woff2"),
        url("/fonts/SNPro-SemiBold.woff") format("woff");
}
@font-face {
    font-family: "SNPro";
    font-style: normal;
    font-weight: 500;
    src:
        url("/fonts/SNPro-Medium.woff2") format("woff2"),
        url("/fonts/SNPro-Medium.woff") format("woff");
}
@font-face {
    font-family: "SNPro";
    font-style: normal;
    font-weight: 400;
    src:
        url("/fonts/SNPro-Regular.woff2") format("woff2"),
        url("/fonts/SNPro-Regular.woff") format("woff");
}
@font-face {
    font-family: "SNPro";
    font-style: italic;
    font-weight: 400;
    src:
        url("/fonts/SNPro-Italic.woff2") format("woff2"),
        url("/fonts/SNPro-Italic.woff") format("woff");
}
@font-face {
    font-family: "SNPro";
    font-style: normal;
    font-weight: 300;
    src:
        url("/fonts/SNPro-Light.woff2") format("woff2"),
        url("/fonts/SNPro-Light.woff") format("woff");
}

@font-face {
    font-family: "HankenGrotesk";
    font-weight: 800;
    src:
        url("/fonts/HankenGrotesk-ExtraBold.woff2") format("woff2"),
        url("/fonts/HankenGrotesk-ExtraBold.woff") format("woff");
}
@font-face {
    font-family: "HankenGrotesk";
    font-weight: 700;
    src:
        url("/fonts/HankenGrotesk-Bold.woff2") format("woff2"),
        url("/fonts/HankenGrotesk-Bold.woff") format("truetype");
}
@font-face {
    font-family: "HankenGrotesk";
    font-weight: 600;
    src:
        url("/fonts/HankenGrotesk-SemiBold.woff2") format("woff2"),
        url("/fonts/HankenGrotesk-SemiBold.woff") format("woff");
}
@font-face {
    font-family: "HankenGrotesk";
    font-weight: 500;
    src:
        url("/fonts/HankenGrotesk-Medium.woff2") format("woff2"),
        url("/fonts/HankenGrotesk-Medium.woff") format("woff");
}
@font-face {
    font-family: "HankenGrotesk";
    font-weight: 400;
    src:
        url("/fonts/HankenGrotesk-Regular.woff2") format("woff2"),
        url("/fonts/HankenGrotesk-Regular.woff") format("woff");
}

body {
    font-family: "HankenGrotesk", Arial, Helvetica, sans-serif;
}