@font-face {
    font-family: FSBlake;
    src: url("../fonts/FSBlake-Heavy.otf") format("opentype");
    font-weight: 800;
}

@font-face {
    font-family: "Zalando Sans";
    src: url("../fonts/ZalandoSans-VariableFont_wdth,wght.ttf") format("opentype");

}

h1,
p {
    margin: 0;
}

html {
    /* Color */
    --contrast-color: #a1a1a1
    /* Font Size */
    --fs-sm: clamp(0.83rem, 0.1vi + 0.81rem, 0.89rem);
    --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --fs-md: clamp(1.2rem, 0.7vi + 1.03rem, 1.58rem);
    --fs-lg: clamp(1.44rem, 1.22vi + 1.14rem, 2.11rem);
    --fs-xl: clamp(1.73rem, 1.97vi + 1.23rem, 2.81rem);
    --fs-xxl: clamp(2.07rem, 3.05vi + 1.31rem, 3.75rem);
    --fs-xxxl: clamp(2.49rem, 4.56vi + 1.35rem, 5rem);
}

html,
body {
    height: 100%;
}

body {
    font-family: "Zalando Sans", sans-serif;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

}

h1 {
    font-family: FSBlake, sans-serif;
    font-size: var(--fs-xxxl);
    text-transform: uppercase;
}

.top {
    text-transform: uppercase;
    margin-bottom: 32px;

    p {
        font-size: var(--fs-xl);
        font-weight: 600;
    }
}

.middle {
    font-family: FSBlake, sans-serif;
    font-size: var(--fs-xl);
    font-weight: 900;
    margin-bottom: 54px;
}

.contact {
    font-size: var(--fs-md);
    font-weight: 300;
}

a {
    color: var(--contrast-color);
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}