@font-face {
    font-family: "Abel";
    src: url("fonts/abel-v18-latin-regular.woff2") format("woff2");
    font-weight: normal;
    font-display: swap;
}

html {
    font-family: "Abel", sans-serif;
    font-size: 24px;
}

.bigtext {
    font-size: 2rem;
    font-weight: bold;
}

nav {
    ul {
        position: fixed;
        justify-self: center;
        display: flex;
        gap: 24px;
        list-style: none;
    }

    a {
        text-decoration: none;
        font-weight: 600;
        color: #ffffff;
        background-color: #000000;
        line-height: 1;
    }
}

#hero {
    display: grid;
    grid-template-columns: 50% 50%;
    article {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

#overview {
    margin: 2rem;
    display: flex;
    justify-content: space-evenly;

    .card {
        width: 20%;
        height: auto;
        padding: 1rem;
        border-radius: 0.5rem;
        align-content: flex-end;
        background-color: cadetblue;
    }
}