body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    background-color: #2b2f32;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'navarea'
        'mainarea'
        'footerarea'
}

.navarea {
    grid-area: navarea;
    padding: 2em;
}

.mainarea {
    grid-area: mainarea;
}

.footerarea {
    grid-area: footerarea;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    justify-content: center;
    padding: min(50px, 7%);
}

.grid-container .card {
    padding: 2em;
    border: 1px solid rgb(75, 82, 92);
    border-radius: 10px;
    background-color: #222429;
    text-align: center;
}

.grid-container .card .nav-link {
    text-decoration: underline;
}