/*-- -------------------------- -->
<---           Blog             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #blog-1289 {
        padding: var(--sectionPadding);
    }
    #blog-1289 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #blog-1289 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #blog-1289 .cs-topper {
        color: var(--primary);
    }
    #blog-1289 .cs-title {
        color: var(--primary);
    }
    #blog-1289 .cs-text {
        color: var(--primary);
    }
    #blog-1289 .cs-flex-group {
        /* prevents flexbox from squishing it */
        flex: none;
    }

    #blog-1289 .cs-color {
        color: var(--primary);
    }

    #blog-1289 .cs-card-group {
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #blog-1289 .cs-item {
        list-style: none;
        grid-column: span 12;
    }
    #blog-1289 .cs-item:hover .cs-picture:before {
        opacity: 0.7;
    }
    #blog-1289 .cs-item:hover .cs-picture img {
        transform: scale(1.2);
        filter: grayscale(1);
    }
    #blog-1289 .cs-item:hover .cs-h3 {
        text-decoration: underline;
    }
    #blog-1289 .cs-highlight .cs-flex {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    #blog-1289 .cs-link {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    #blog-1289 .cs-picture {
        width: 100%;
        /* 200px - 270px */
        height: clamp(12.5rem, 25vw, 16.875rem);
        border-radius: 1rem;
        /* clips the corners of the img tag */
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 1;
    }
    #blog-1289 .cs-picture:before {
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 2;
        transition: opacity 0.3s;
    }
    #blog-1289 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        transition:
            transform 0.65s,
            filter 0.4s;
    }
    #blog-1289 .cs-date {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: left;
        font-weight: 700;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #blog-1289 .cs-h3 {
        /* 20px -25px */
        font-size: clamp(1.25rem, 2.2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
    }
    #blog-1289 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        text-align: inherit;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #blog-1289 .cs-container {
        max-width: 80rem;
    }
    #blog-1289 .cs-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
    }
    #blog-1289 .cs-title {
        margin: 0;
    }
    #blog-1289 .cs-flex-group {
        width: 50%;
    }
    #blog-1289 .cs-item {
        grid-column: span 4;
    }
    #blog-1289 .cs-highlight {
        grid-column: span 12;
    }
    #blog-1289 .cs-highlight .cs-link {
        flex-direction: row;
        align-items: stretch;
    }
    #blog-1289 .cs-highlight .cs-flex {
        align-self: center;
    }
    #blog-1289 .cs-highlight .cs-picture {
        /* 300px - 400px */
        min-height: clamp(18.75rem, 35vw, 25rem);
        height: auto;
        width: 50%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #blog-1289 .cs-highlight .cs-h3 {
        /* 25px - 39px */
        font-size: clamp(1.5625rem, 3vw, 2.4375rem);
    }
}

@media only screen and (min-width: 0rem) {
    .blog-container {
        margin: auto;
        max-width: 70em;
        width: 94%;
    }

    .blog-link {
        z-index: 1;
        position: relative;
        display: inline-block;
        border-radius: 0.25rem;
        margin: auto;
        background-color: var(--headerColor);
        min-width: 9.375rem;
        box-sizing: border-box;
        padding: 0 1.5rem;
        text-decoration: none;
        font-size: 1rem;
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        font-weight: 700;
        color: #fff;
        transition: color 0.3s;
        text-align: center;
    }

    .blog-link:before {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        opacity: 0;
        border: 1px solid var(--headerColor);
        border-radius: 0.25rem;
        background: #fff;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        transition: opacity 0.3s;
    }

    .blog-link:hover {
        color: var(--headerColor);
    }

    .blog-link:hover:before {
        opacity: 1;
    }
}

@media only screen and (min-width: 0rem) {
    #header {
        z-index: 1;
        position: relative;
    }

    #header .blog-container {
        padding: clamp(100px, 14vw, 200px) 0 clamp(50px, 11vw, 100px);
    }

    #header .blog-header {
        margin: 0;
        width: 100%;
        font-size: clamp(24px, 4vw, 48px);
        line-height: 1.2em;
        font-weight: 700;
        color: #fff;
        text-align: left;
    }

    #header .blog-bg {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        height: 100%;
        width: 100%;
    }

    #header .blog-bg img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #header .blog-bg:before {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        opacity: 0.6;
        display: block;
        background: #000;
        height: 100%;
        width: 100%;
    }
}

@media only screen and (min-width: 0rem) {
    #int-hero {
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 30vh;
        padding-top: 3.125rem;
    }

    #int-hero picture {
        z-index: -2;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    #int-hero picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #int-hero h1 {
        position: relative;
        margin: 0 auto;
        margin-top: 4.375rem;
        margin-bottom: 1.875rem;
        max-width: 31.25rem;
        width: 96%;
        font-size: 2.13333333rem;
        color: #fff;
        text-align: center;
    }

    #int-hero p {
        display: block;
        margin: auto;
        margin-bottom: 1.875rem;
        max-width: 25rem;
        width: 96%;
        color: #fff;
        text-align: center;
    }

    #int-hero:before {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        opacity: 0.7;
        display: block;
        background: #000;
        height: 100%;
        width: 100%;
    }
}

@media only screen and (min-width: 48rem) {
    #int-hero {
        font-size: 100%;
    }

    #int-hero h1 {
        font-size: 4rem;
    }
}

@media only screen and (min-width: 64rem) {
    #int-hero {
        background-attachment: fixed;
        min-height: 18.75rem;
        height: auto;
        padding-top: 11.25rem;
        font-size: inherit;
        padding-block-end: 6.25rem;}
}

@media only screen and (min-width: 0rem) {
    .blog-container {
        padding: clamp(60px, 7vw, 100px) 0;
        position: relative;
        z-index: 1;
    }

    .main-content-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 3.125em;
    }

    .main-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        row-gap: 3.125em;
    }
}
@media only screen and (min-width: 0rem) {
    .blog-article {
        display: block;
        max-width: 49.6875em;
        width: 100%;
    }

    .blog-article p {
        margin-top: 3.125em;
        color: var(--primary);
    }

    .blog-article .blog-mainImage {
        position: relative;
        display: block;
        border-radius: 0.5em;
        margin-bottom: 3.125em;
        height: clamp(200px, 30vw, 400px);
        width: 100%;
        overflow: hidden;
    }

    .blog-article .blog-mainImage img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .blog-article .blog-author-img {
        position: relative;
        display: block;
        border-radius: 50%;
        height: 2em;
        width: 2em;
        overflow: hidden;
    }

    .blog-article .blog-author-img img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        background-color: var(--primary);
    }

    .blog-article .blog-authorGroup {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
    }

    .blog-article .blog-author, .blog-article .blog-date {
        font-size: 0.875rem;
        line-height: 1.5em;
        color: var(--primary);
    }

    .blog-article .blog-dot {
        display: block;
        border-radius: 50%;
        background-color: var(--primary);
        height: 3px;
        width: 3px;
    }

    .blog-article .blog-h1 {
        margin: 1rem 0;
        max-width: 34.375rem;
        font-size: clamp(20px, 5vw, 39px);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--primary);
    }

    .blog-article #blog-content {
        border-top: 1px solid var(--primary);
        margin-top: 1em;
        padding-top: 1.5625em;
    }

    .blog-article #blog-content iframe {
        margin-bottom: 2rem;
    }

    .blog-article #blog-content h1 {
        margin-bottom: 1rem;
        font-size: 2.25rem;
        line-height: 1.2em;
        font-weight: 700;
        color: var(--primary);
    }

    .blog-article #blog-content h2 {
        border-left: 4px solid var(--primaryLight);
        margin-bottom: 1rem;
        padding-left: 1.25rem;
        font-size: 1.75rem;
        line-height: 1.2em;
        font-weight: 700;
        color: var(--primary);
    }

    .blog-article #blog-content h3 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
        line-height: 1.5em;
        font-weight: 700;
        color: var(--primary);
    }

    .blog-article #blog-content strong {
        color: var(--primary);
        font-weight: 700;
    }

    .blog-article #blog-content h4, .blog-article #blog-content h5, .blog-article #blog-content h6 {
        margin-bottom: 1rem;
        font-size: 1.25rem;
        line-height: 1.5em;
        font-weight: 700;
        color: var(--primary);
    }

    .blog-article #blog-content p {
        margin: 0;
        margin-bottom: 1rem;
        font-size: 1rem;
        line-height: 1.6em;
        color: var(--primary);
    }

    .blog-article #blog-content a {
        text-decoration: underline;
        font-size: inherit;
        color: var(--secondary);
    }

    .blog-article #blog-content strong {
        color: var(--primaryLight);
    }

    .blog-article #blog-content ul, .blog-article #blog-content ol {
        margin: 1rem 0;
        padding-left: 2.5rem;
    }

    .blog-article #blog-content ul li, .blog-article #blog-content ol li {
        margin-bottom: 1rem;
        list-style: circle;
        font-size: 1rem;
        line-height: 1.6em;
        color: var(--bodyTextColor);
    }

    .blog-article #blog-content img {
        display: block;
        border-radius: 0.5rem;
        margin: 1rem 0;
        height: auto;
        width: 100%;
    }

    .blog-article #blog-content img.half {
        display: inline;
        width: 49%;
    }

    .blog-article #blog-content pre {
        max-height: 18.75rem;
    }

    .blog-article #blog-content code[class*="language-"], .blog-article #blog-content pre[class*="language-"] {
        background: 0 0;
        word-break: normal;
        word-wrap: normal;
        word-spacing: normal;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
        white-space: pre;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        font-size: 1em;
        line-height: 1.5;
        color: #f8f8f2;
        text-align: left;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
    }

    .blog-article #blog-content pre[class*="language-"] {
        border-radius: 0.3em;
        margin: 0.5em 0;
        overflow: auto;
        padding: 1em;
    }

    .blog-article #blog-content :not(pre) > code[class*="language-"], .blog-article #blog-content pre[class*="language-"] {
        background: #272822;
    }

    .blog-article #blog-content :not(pre) > code[class*="language-"] {
        border-radius: 0.3em;
        padding: 0.1em;
        white-space: normal;
    }

    .blog-article #blog-content .token.cdata, .blog-article #blog-content .token.comment, .blog-article #blog-content .token.doctype, .blog-article #blog-content .token.prolog {
        color: #8292a2;
    }

    .blog-article #blog-content .token.punctuation {
        color: #f8f8f2;
    }

    .blog-article #blog-content .token.namespace {
        opacity: 0.7;
    }

    .blog-article #blog-content .token.constant, .blog-article #blog-content .token.deleted, .blog-article #blog-content .token.property, .blog-article #blog-content .token.symbol, .blog-article #blog-content .token.tag {
        color: #f92672;
    }

    .blog-article #blog-content .token.boolean, .blog-article #blog-content .token.number {
        color: #ae81ff;
    }

    .blog-article #blog-content .token.attr-name, .blog-article #blog-content .token.builtin, .blog-article #blog-content .token.char, .blog-article #blog-content .token.inserted, .blog-article #blog-content .token.selector, .blog-article #blog-content .token.string {
        color: #a6e22e;
    }

    .blog-article #blog-content .language-css .token.string, .blog-article #blog-content .style .token.string, .blog-article #blog-content .token.entity, .blog-article #blog-content .token.operator, .blog-article #blog-content .token.url, .blog-article #blog-content .token.variable {
        color: #f8f8f2;
    }

    .blog-article #blog-content .token.atrule, .blog-article #blog-content .token.attr-value, .blog-article #blog-content .token.class-name, .blog-article #blog-content .token.function {
        color: #e6db74;
    }

    .blog-article #blog-content .token.keyword {
        color: #66d9ef;
    }

    .blog-article #blog-content .token.important, .blog-article #blog-content .token.regex {
        color: #fd971f;
    }

    .blog-article #blog-content .token.bold, .blog-article #blog-content .token.important {
        font-weight: 700;
    }

    .blog-article #blog-content .token.italic {
        font-style: italic;
    }

    .blog-article #blog-content .token.entity {
        cursor: help;
    }
}

@media only screen and (min-width: 0rem) {
    .cs-codestitch {
        width: 100%;
    }

    .cs-codestitch .cs-picture {
        width: 100%;
        height: auto;
        border-radius: 0.5rem;
        overflow: hidden;
        display: block;
        position: relative;
        z-index: 1;
    }

    .cs-codestitch .cs-picture img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0.5rem;
    }

    .cs-codestitch .cs-info {
        padding: 1rem;
        box-sizing: border-box;
    }

    .cs-codestitch .cs-h3 {
        margin-bottom: 1rem;
        line-height: 1.2em;
    }
}