@font-face {
    font-family: Codec-Pro;
    src: url(../fonts/Codec-Pro-Bold.woff2) format("woff2"),
    url(../fonts/Codec-Pro-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Codec-Pro;
    src: url(../fonts/Codec-Pro-Extrabold.woff2) format("woff2"),
    url(../fonts/Codec-Pro-Extrabold.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html {
    color: #fff;
}

body {
    background-color: rgb(24, 24, 26);
}

p,
.prose p {
    font-size: 1rem;
}

h1,
.prose h1 {
    font-size: 2.25rem;
}

h2,
.prose h2 {
    font-size: 2rem;
}

h3,
.prose h3 {
    font-size: 1.725rem;
}

h4,
.prose h4 {
    font-size: 1.5rem;
}

h5,
.prose h5 {
    font-size: 1.25rem;
}

h6,
.prose h6 {
    font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    border-left-color: rgb(44,48,211);
}

/* * Archives * */
.post-featured-image {
    object-fit: cover;
    aspect-ratio: 16/10;
}

.featured h3 {
    font-size: 1.7rem !important;
}

.search-field {
    background-color: rgb(43,43,43);
    color: #e1e1e1;
    padding: 4px 8px;
    font-size: 1.5em;
    outline: none;
    border-top-width: 0px;
    border-top-color: #000000;
    border-left-width: 0px;
    border-bottom-width: 0;
    border-right-width: 0;
}

.search-submit {
    background-color: #000000;
    color: #cfcfcf;
    padding: 4px 8px;
    font-size: 1.5rem;
    margin-left: 4px;
}

.search-field:focus {
    border-width: 0;
}

.bread-title {
    max-width: 8rem;
}

@media (min-width: 768px) {
    .bread-title {
        max-width: 12rem;
    }
}

@media (min-width: 1024px) {
    .bread-title {
        max-width: 18rem;
    }
}

@media (min-width: 1280px) {
    .bread-title {
        max-width: 22rem;
    }
}

@media (min-width: 768px) {
    .featured .btm-box {
        padding: 1rem;
    }
}