@font-face {
    font-family: "axiforma-light";
    src: url("../fonts/axiforma/5615693/46dc12be-fc58-4b97-acf3-9d2f96b3579a.woff2") format("woff2"), url("../fonts/axiforma/5615693/4fc134b5-f319-41ae-8ca8-73f8b2fb6992.woff") format("woff");
}

:root {
    --fontFamily: "axiforma-light", sans-serif;
}

html,
body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    background: url("../assets/background.jpeg");
    background-size: cover;
    background-position: center;
}

main {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}

main .hstack > .image {
    height: 26px;
}

.scale\:extralarge {
    --inlineSize: 35rem;
}

.scale\:extrasmall {
    --inlineSize: 1rem;
}

.foreground\:mohrblue {
    --foregroundColor: 221, 100%, 51%;
}

footer .grouping + .grouping {
    gap: 10px;
}

@media (max-width: 1300px) {
    
    main .hstack {
        flex-direction: column !important;
        gap: 2.25rem;
    }
    
    main .width\:four {
        width: 70%;
    }
    
    .scale\:extralarge {
        --inlineSize: 20rem;
    }
    
    footer .hstack {
        flex-direction: column !important;
    }
    
    footer .width\:four {
        width: 70%;
    }
    
    footer .width\:five {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}