@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed 300';
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/roboto-condensed/roboto-condensed-v27-latin-300.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed 400';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/roboto-condensed/roboto-condensed-v27-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed 500';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/roboto-condensed/roboto-condensed-v27-latin-500.woff2') format('woff2');
}


* {
    font-family: "Roboto Condensed 300", sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    flex-flow: column;
}

main {
    background-color: #d2052a;
    color: white;
    flex-grow: 1;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-bottom: 8rem;
}
main .btn-primary {color: white; border-color: white; width: 100%; background-color: #d2052a; }
main .btn-primary:hover, main .btn-primary:active, main .btn-primary:focus {color: #d2052a; border-color: white; background: white; }

.header { padding: 5rem; }
.header h1 { margin: 0; font-family: "Roboto Condensed 500", sans-serif; }
.header a { font-size: 16pt; color: white; }

.links {
    list-style: none;
    padding: 0;
    margin: auto;

    display: flex;
    flex-flow: column;
    gap: 2rem;

    height: 100%;
    width: fit-content;

    font-family: "Roboto Condensed 400", sans-serif;
}

footer {
    display: flex;
    justify-content: center;
    padding: 2rem;
}