:root {
    /* Setting color variables */
    --color-red: #8c2217ff;
    --color-secondary: #534733;
    --color-gold: #e3c628;
    --color-pale-red: #763214ff;
    --color-cream: #c4b190;
    --color-cream-light: wheat;
    --color-onyx: #28302cff;
    --color-shadow: #0002;
}

/* Containers */

.container {
    width: min(65em, 100%);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.content-container {
    max-width: 35rem;
}

/* General Button Styles */

.btn {
    display: inline-block;
    padding: 0.55em 1.5em 0.5em;
    background-color: var(--color-gold);
    border: 0.125rem solid var(--color-onyx);
    color: #000;
    border-radius: 0.25em;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.btn:hover,
.btn:focus-visible {
    background-color: var(--color-onyx);
    border-color: var(--color-gold);
    color: #fff;
}

.site__icon {
    width: 8rem;
}

/* ========== TYPOGRAPHY S ========== */

h1 {
    font-size: 2.027rem;
    font-weight: 700;
    color: var(--color-gold);
}

h2 {
    color: var(--color-onyx);
    font-size: 1.802rem;
}

h3 {
    font-size: 1.602rem;
    margin-bottom: 0;
    color: var(--color-pale-red);
}

p {
    font-size: 1rem;
}

a {
    color: var(--color-red);
}

small {
    font-size: 0.889rem;
}

/* ========== BLOG PAGE ========== */

.page-content .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ========= START OF NAVBAR ========= */

.nav-container {
    background-color: var(--color-red);
    color: #fff;
    border-top: 0.2rem solid var(--color-gold);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* NAVBAR LOGO STYLES */
.nav__logo {
    display: flex;
    align-self: center;
}

.nav__title {
    font-size: 1.5rem;
    font-weight: bold;
}

/* NAVBAR STYLES */
.navbar {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.nav__list {
    padding: 0;
    margin: 0;
    line-height: 3rem;
    list-style-type: none;
}

.nav__link {
    color: #fff;
    text-decoration: none;
}

/* HOVER STATES */
.nav__list li:hover,
.nav__list li:focus {
    background-color: var(--color-onyx);
    cursor: pointer;
}

.nav__link:hover,
.nav__link:focus {
    color: #fff;
}

/* Start of main content section */

/* ========== START OF HERO BANNER ========== */

/* Background Images */

.banner-home {
    background-image: linear-gradient(to bottom, #0009, #0009),
        url("../images/4k-tod-cover-art.jpg");
    background-position: center;
    background-size: cover;
}

.banner-about {
    background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1),
            rgba(0, 0, 0, 0)
        ),
        url("../images/blog-image-adventurers.jpg");
    background-position: bottom;
    background-size: cover;
}

/* Banner Container */

.banner .container {
    min-height: 65vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Banner Styles */

.banner__content .btn {
    color: #000;
}

.banner__title {
    font-size: 1.756rem;
    line-height: 1.3;
    color: var(--color-gold);
}

.banner__text {
    font-size: 1.15rem;
    color: #fff;
}

.banner__link {
    color: var(--color-gold);
}

.tag-group {
    padding: 1.5rem 0 0 1.5rem;
}

.tag {
    width: 12rem;
    margin-bottom: 0.5rem;
    list-style-type: disc;
    padding: 0.55em 1.5em 0.5em;
    background-color: var(--color-pale-red);
    border: 0.125rem solid var(--color-gold);
    color: #fff;
    border-radius: 0.25em 1rem 0.25rem 1rem;
    cursor: default;
    list-style-type: none;
}

/* Banner Hover State */

.banner__content .btn:hover,
.banner__content .btn:focus {
    color: #fff;
    border-color: var(--color-gold);
}

.banner__link:hover,
.banner__link:focus {
    color: var(--color-red);
}

/* ========== START OF CARD ITEMS SECTION ========== */

/* Cards Container */

.card-group .container {
    padding: 4rem 1.5rem 4rem 1.5rem;
}

.card-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0;
}

/* Card Styles */

.card-group {
    display: flex;
    align-items: center;
    background-color: var(--color-secondary);
}

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-cream-light);
    width: 16rem;
    color: var(--color-gold);
    border-radius: 0.55rem;
    box-shadow: 0 0.25rem 0.75rem var(--color-shadow);
    list-style: none;
    flex-grow: 1;
    transition: transform 0.3s ease;
    text-decoration: none;
    overflow: hidden;
}

.card__image img {
    border-radius: 0.55rem;
    width: 100%;
    object-fit: contain;
}

.card__image {
    background-color: var(--color-onyx);
}

.card__content {
    height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.5rem;
    color: var(--color-secondary);
}

.card__text {
    flex-grow: 2;
}

.card__title {
    color: var(--color-secondary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Card Hover States */

.card:hover,
.card:focus-visible {
    box-shadow: 0 0.55rem 0.55rem var(--color-shadow);
    cursor: pointer;
    transform: translateY(-5px);
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0.3rem 1rem rgba(172, 1, 10, 0.835);
}

/* Callout Section */

.callout--group,
.article--footer {
    background-color: var(--color-cream-light);
    padding: 1.5rem 2rem 1.5rem 2rem;
    border-radius: 0.55rem;
    border-bottom: 0.22rem solid var(--color-onyx);
}

.callout--title {
    border-bottom: 0.22rem solid var(--color-onyx);
}

/* Article - Blog Page */

.article--intro {
    padding: 2.5rem 0 2.5rem 0;
}

.article-title {
    border-bottom: 0.22rem solid var(--color-onyx);
}

.article--content {
    padding: 1.5rem 2rem 1.5rem 2rem;
}

.article--image {
    padding: 0 0 1.5rem 0;
}

/* ========== START OF ABOUT SECTION ========== */

/* About Section Styles */

.about {
    background-color: var(--color-cream);
    color: var(--color-secondary);
}

.about-container {
    padding: 4rem 1.5rem 4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about__content {
    justify-content: center;
    max-width: 35em;
}

.about__content .btn {
    color: var(--color-onyx);
}

.about__content .btn:hover,
.about__content .btn:focus {
    background-color: var(--color-onyx);
    border-color: var(--color-gold);
    color: #fff;
}

/* ========== START OF BLOG POSTS ========== */

/* Blog Posts Styles */

.blog--grid,
.blog-posts--grid {
    display: grid;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.blog-posts--grid {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.blog-posts {
    background-color: var(--color-secondary);
    padding-bottom: 3.5rem;
}

.blog-posts--secondary {
    background-color: #fff;
    gap: 0;
}

.blog-posts--group {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    background-color: var(--color-cream);
    border-radius: 0.5rem;
    margin-bottom: 3.5rem;
}

.blog__title {
    color: var(--color-gold);
    padding: 1.5rem 0 1.5rem 1.5rem;
    margin-bottom: 0;
}

.blog__title--main {
    padding-left: 0;
}

.post {
    display: flex;
    flex-direction: column;
    background-color: var(--color-cream-light);
    color: var(--color-onyx);
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.75rem var(--color-shadow);
    list-style: none;
    padding: 1rem;
    width: auto;
}

.post--blog {
    border-bottom: 0.22rem solid #000;
}

.author {
    margin-top: auto;
}

.post__text {
    color: var(--color-onyx);
    font-weight: bold;
}

/* Blog Post Hover */

.post:hover,
.post:focus {
    color: var(--color-onyx);
    box-shadow: 0 0.3rem 1rem var(--color-gold);
}

/* ========== START OF FOOTER =========== */

.footer-container {
    background-color: var(--color-red);
    color: #fff;
    border-bottom: 0.5rem solid var(--color-gold);
    padding: 3rem 1.5rem 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: auto;
}

.footer__logo {
    display: flex;
    align-items: center;
}

.footer__list {
    padding-left: 0;
    margin: 0;
    border-left: 0.125rem solid var(--color-gold);
    list-style-type: none;
    flex-direction: column;
}

.footer__list li {
    padding: 0.2rem 1rem 0.2rem 1rem;
}

.footer__link {
    color: #fff;
    text-decoration: none;
}

.footer__small {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer__copyright {
    margin-bottom: 0.5rem;
}

.small__link {
    color: #fff;
    text-decoration: none;
}

/* Footer Hover States */

.footer__list li:hover,
.footer__list li:focus {
    background-color: var(--color-onyx);
    cursor: pointer;
}

.footer__link:hover,
.footer__link:focus {
    color: #fff;
}

.small__link:hover,
.small__link:focus {
    color: var(--gold);
    text-decoration: underline;
}

/* ========== START OF MEDIA QUERIES ========== */

@media only screen and (min-width: 45em) {
    /* NAVBAR MEDIUM */
    .nav-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        list-style-type: none;
    }
    .nav__logo {
        flex-direction: row;
        padding-bottom: 0;
    }
    .nav__list li {
        display: inline-flex;
        padding: 0.75rem;
        justify-content: center;
    }

    .nav__link {
        flex-direction: row;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* ABOUT SECTION MEDIUM */

    .about-container {
        flex-direction: row;
        align-items: center;
    }

    /* BLOG SECTION MEDIUM */

    .blog--grid .blog-grid--grid {
        grid-template-columns: 1fr 1fr;
    }

    .post3 {
        grid-column: span 2;
    }

    /* FOOTER MEDIUM */

    .footer-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        list-style-type: none;
    }

    .footer__list {
        display: inline-flex;
        flex-direction: row;
        justify-content: flex-start;
        border-left: none;
        border-bottom: 0.125rem solid var(--color-gold);
    }

    .footer__list li {
        padding: 1rem;
    }

    /* ========== TYPOGRAPHY M ========== */

    h1 {
        font-size: 2.986rem;
    }

    h2 {
        font-size: 2.488rem;
    }

    h3 {
        font-size: 2.074rem;
    }

    small {
        font-size: 0.833rem;
    }
}

@media only screen and (min-width: 65rem) {
    /* NAVBAR LARGE*/

    .nav-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        list-style-type: none;
    }

    .nav__logo {
        flex-direction: row;
        padding-bottom: 0;
    }

    .nav__list li {
        display: inline-flex;
        padding: 0.75rem;
        justify-content: center;
    }

    .nav__link {
        flex-direction: row;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    /* BANNER LARGE */

    .banner__title {
        font-size: 2.444rem;
    }

    .banner__text,
    .btn--large {
        font-size: 1.25rem;
    }

    /* ARTICLE */

    .article {
        margin-bottom: 4rem;
    }

    /* BLOG POSTS */

    .blog--grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .post3 {
        grid-column: auto;
    }

    /* BLOG PAGE STYLES */

    .page-content .container {
        grid-template-columns: 2fr 1fr;
    }

    .blog-posts--group {
        position: sticky;
        align-self: start;
        top: 10rem;
        color: #fff;
        border-radius: 0.5rem;
        margin-bottom: 4rem;
    }

    /* ========== TYPOGRAPHY L ========== */

    h1 {
        font-size: 3.815rem;
    }

    h2 {
        font-size: 3.052rem;
    }

    h3 {
        font-size: 2.441rem;
    }

    small {
        font-size: 0.8rem;
    }
}