* {
    box-sizing: border-box;
}

html {
    font-family:
        Verdana,
        Geneva,
        Tahoma,
        sans-serif;
    color: whitesmoke;
    font-size: .85rem;
}

html,
body {
    position: relative;
    margin: 0 auto;
    padding: 0;
}

body,
main {
    display: grid;
}

body,
.navbar {
    min-width: 250px;
}

body {
    grid-template-rows: auto clamp(550px, 33.333vw, 1100px) auto 1fr;
    grid-template-areas:
        "nav"
        "header"
        "content"
        "footer";
    width: 100%;
    height: 100vh;
    background-color: whitesmoke;
}

h1,
h2,
h3,
p {
    margin: 0;
    padding: 0;
}

p {
    line-height: 1.35em;
}

/* GRID AREAS */
.navbar {
    grid-area: nav
}

.featured-post {
    grid-area: header
}

.front-page-card-display {
    grid-area: content
}

footer {
    grid-area: footer
}

/* NAVIGATION */

.navbar,
.navbar>* {
    display: flex;
    align-items: center;
    color: whitesmoke
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 4.5rem;
    justify-content: space-between;
    padding: 0 clamp(.5em, 8vw, 5em);
    /* background-color: #222222; */
    background-image: linear-gradient(#181818, #202020d0, #22222270, transparent);
    text-wrap: nowrap;
    z-index: 1;
    /* border-radius: 0 0 10vw 10vw */
}

.navbar_title {
    justify-content: start;
    gap: .5em
}

.navbar .icon {
    display: block;
    width: 2.735rem;
    border-radius: 35%;
}

.navbar_buttons {
    justify-content: space-between;
    gap: clamp(.5em, 1vw, 1.5em);
}

.navbar p {
    font-weight: bold;
}

.navbar a {
    text-decoration: none;
    color: whitesmoke;
    cursor: pointer;
    transition: .2s ease;
}

.navbar a:hover,
.navbar a:focus {
    text-shadow: 0 0 clamp(1.5px, .2vw, 3px) rgb(243, 255, 134);
    transition: .2s ease;
}

/* HEADER */

.featured-post {
    position: relative;
    display: grid;
    width: 100%;
    justify-content: stretch;
    background-color: #222222;
    cursor: pointer;
}

.featured-post-link {
    color: whitesmoke
}

.featured-post_details {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .5em;
    width: 100%;
    margin: 0;
    padding: 2em 3vw;
    background-image: linear-gradient(transparent, #2222227a, #222222);
}

.featured-post_details>* {
    max-width: 85ch;
    margin: 0;
}

.featured-post_image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.featured-post_image,
.featured-post_image-wrapper a {
    position: absolute;
    display: block;
    width: inherit;
    height: inherit;
    object-fit: cover;
}

/* JOURNAL CARDS */

.front-page-card-display {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75em;
    justify-content: center;
    /* margin: 0 calc(8vw - 1.6em); */
    padding: 2em .5em 0;
    background-color: whitesmoke;
}

.journal-card {
    display: grid;
    margin: 0;
    padding: 0;
    border-radius: 4.6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 1px #444444;
}

.journal-card a,
.journal-card img {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    text-decoration: none;
}

.journal-card_details {
    align-self: end;
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: .5em;
    /* background-image: linear-gradient(transparent, #282828); */
    padding: .75em 1em;
}

.journal-card_details p,
.journal-card_details h2 {
    margin: 0;
    color: #222222;
    /* text-shadow: 0 0 2px #282828; */
}

/* RECENT POSTS */

.recent-posts-wrapper {
    display: flex;
    gap: 1em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    justify-self: center;
    /* margin-inline: calc(20vw - 4em); */
}

.recent-posts-display {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75em;
    width: 100%;
    justify-content: center;
    color: whitesmoke;
    background-color: whitesmoke;
}

/* FOOTER */

footer {
    display: flex;
    align-self: end;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 100%;
    margin-top: 2em;
    padding: 1em 0;
    border-radius: 10vw 10vw 0 0;
    background-color: #222222;
}

footer h3,
footer p {
    margin: 0;
    color: whitesmoke
}

/* MEDIA QUERIES */

@media (max-width: 350px) {
    footer {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
    .navbar_title p {
        display: none;
    }
}

@media (min-width: 500px) {

    .header-card_details {
        padding: 2em clamp(.5em, 4vw, 5em);
    }

    .front-page-card-display {
        grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    }

}

@media (min-width: 1250px) {
    .front-page-card-display {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}

@media (min-width: 2950px) {
    .front-page-card-display {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }
}