:root {
    --clr-body-bg: #1f0033;
    --img-body-bg: url(/assets/cassettebeasts/images/cassettebeasts-bg.jpg);
    --clr-body-txt: #333333;
    --clr-content-bg: #ffffff;

    --clr-main-heading: #333333;
    --clr-sub-heading: #000000;
    --clr-title-border: #7629db;
    --clr-bold-txt: #f8560b;
    --clr-link: #7629db;
    --clr-link-hover: #270e48;
    --clr-quote-bg: #f3f2f2;
    --clr-quote-border: #414141;

    --clr-code-bg: #f3f2f2;
    --clr-code-border: #414141;
    --clr-dates: rgb(58, 150, 255);

    --clr-link-btn-bg: #873eb5;
    --clr-link-btn-txt: white;
    --clr-link-btn-hover: #241445;

    --clr-main-header-bg: #9b59b6;
    --clr-navbar-bg: #9b59b6;
    --clr-navbar-link: white;

    --clr-main-footer-bg: #9b59b6;
}

.hero img {
    object-fit: cover;
    object-position: top;
}

@media only screen and (min-width: 60rem) {
    .hero img {
        object-position: top -4.5rem right 0;
    }
}

.footer {
    color: var(--clr-navbar-link);
}

.footer a {
    color: var(--clr-navbar-link);
}