:root {
    --bw-root-font-size: 10px;

    /* Fonts */
    --mont-font: "Mont Font 400", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --bw-font-primary-reg: "Inter Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --bw-font-primary-semibold: "Inter SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --bw-font-primary-bold: "Inter Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --bw-font-primary-extrabold: "Inter ExtraBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --bw-font-primary-medium: var(--bw-font-primary-semibold);

    --bw-backend-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Colors */
    --bw-primary-color: #2900cc;
    --bw-secondary-color: #a5e234;
    --bw-tertiary-color: #28a745;
    --bw-gold: #ffde68;
    --bw-surface-90: #303030;
    --bw-surface-100: #1a1a1a;
    --bw-sponge-bob: #f4ca22;
    --bw-surface-0: #ffffff;
    --bw-asdte: #3858e9;
    --bw-primary-brand: rgba(128, 58, 233, 0.85);

    /* Color extras */
    --bw-primary-alt: #0052a3;
    --bw-primary-opacity-005: rgba(0, 102, 204, 0.05);
    --bw-surface-50: #f8f9fa;
    --bw-color-base-800: #495057;
    --bw-color-base-900: #212529;

    /* Spacing */
    --bw-spacing-1: 0.1rem;
    --bw-spacing-2: 0.2rem;
    --bw-spacing-3: 0.3rem;
    --bw-spacing-4: 0.4rem;
    --bw-spacing-8: 0.8rem;
    --bw-spacing-10: 1rem;
    --bw-spacing-12: 1.2rem;
    --bw-spacing-16: 1.6rem;
    --bw-spacing-24: 2.4rem;
    --bw-spacing-32: 3.2rem;
    --bw-spacing-40: 4rem;
    --bw-spacing-48: 4.8rem;
    --bw-spacing-56: 5.6rem;
    --bw-spacing-64: 6.4rem;
    --bw-spacing-72: 7.2rem;
    --bw-spacing-88: 8.8rem;
    --bw-spacing-96: 9.6rem;
    --bw-spacing-112: 11.2rem;
    --bw-spacing-section: 14rem;
    --bw-spacing-200: 20rem;

    --bw-spacing-section-responsive: clamp(7.2rem, 0rem + 9.375vw, 12rem);
    --bw-spacing-md: clamp(6.4rem, -0.8rem + 9.375vw, 11.2rem);

    /* Border Radius */
    --bw-radius-round-subtle: 0.4rem;
    --bw-radius-round-s: 1rem;
    --bw-radius-round-m: 1.6rem;
    --bw-radius-round-l: 3.2rem;
    --bw-radius-round-100: 10rem;
    --bw-radius-round-full: 999rem;

    /* Strokes */
    --bw-stroke-thin: 1;
    --bw-stroke-thick: 3;

    /* Font Sizes */
    --bw-font-size-display: clamp(3.6rem, -6rem + 12.5vw, 9rem);
    --bw-font-size-dropcap: 6.4rem;
    --bw-font-size-quote: clamp(4.2rem, 1rem + 4.1667vw, 6rem);
    --bw-font-size-quote-text: clamp(2.2rem, 1.4889rem + 0.9259vw, 2.6rem);
    --bw-font-size-h1: clamp(3.6rem, 0.0444rem + 4.6296vw, 5.6rem);
    --bw-font-size-h2: 3.6rem;
    --bw-font-size-h3: 3rem;
    --bw-font-size-h4: clamp(1.8rem, 0.3778rem + 1.8519vw, 2.6rem);
    --bw-font-size-h5: clamp(2rem, 0.3778rem + 1.8519vw, 2.4rem);
    --bw-font-size-h6: 1.8rem;
    --bw-font-size-body-lg: 2.2rem;
    --bw-font-size-body: 2rem;
    --bw-font-size-body-md: 1.8rem;
    --bw-font-size-body-sm: 1.6rem;
    --bw-font-size-body-xs: 1.4rem;
    --bw-font-size-body-xxs: 1.2rem;

    /* Fixed font sizes */
    --bw-body-26: 2.6rem;
    --bw-body-18: 18px;
    --bw-body-16: 16px;
    --bw-body-14: 14px;
    --bw-body-12: 12px;

    /* Line Heights */
    --bw-line-height-display: clamp(4.6rem, -3.2222rem + 10.1852vw, 9rem);
    --bw-line-height-h1: clamp(4rem, 2.9333rem + 1.3889vw, 4.6rem);
    --bw-line-height-dropcap: clamp(4.2rem, 2.578rem + 2.778vw, 5.6rem);
    --bw-line-height-quote: clamp(4.6rem, 2.1111rem + 3.2407vw, 6rem);
    --bw-line-height-quote-text: clamp(3rem, 1.9333rem + 1.3889vw, 3.6rem);
    --bw-line-height-h2: clamp(3.8rem, 2.711rem + 1.389vw, 4.4rem);
    --bw-line-height-h3: 3.8rem;
    --bw-line-height-h4: clamp(3rem, 1.533rem + 1.852vw, 3.6rem);
    --bw-line-height-body-lg: 3rem;
    --bw-line-height-body-md: 2.8rem;
    --bw-line-height-h5: var(--bw-line-height-h4);
    --bw-line-height-h6: var(--bw-line-height-body-md);
    --bw-line-height-body-26: 3.6rem;
    --bw-line-height-body: 2.4rem;
    --bw-line-height-body-sm: 2.2rem;
    --bw-line-height-body-xs: 2rem;
    --bw-line-height-body-xxs: 1.8rem;

    --bw-container-width: 1216px;
    --bw-sm-container-width: 1008px;

    --bw-letter-spacing-display: -1.28px;

    --bw-box-shadow: 6px 6px 0 0 rgba(0, 102, 204, 0.09);
    --bw-box-shadow-hover: 0 0 0 0 rgba(0, 102, 204, 0.09);
    --bw-box-shadow-subtle: 8px 9px 0 0 rgba(0, 102, 204, 0.09);

    --bw-btn-bg: linear-gradient(95deg, var(--bw-primary-color) 1.88%, var(--bw-primary-color) 96.72%);
    --bw-hover-btn-bg: linear-gradient(95deg, var(--bw-primary-color) 1.88%, var(--bw-primary-alt) 96.72%);
}

::selection {
    background-color: var(--bw-primary-color);
    color: var(--bw-surface-0);
}

html {
    font-size: var(--bw-root-font-size);
}

body {
    font-family: var(--bw-font-primary-reg);
    font-size: var(--bw-font-size-body);
    line-height: var(--bw-line-height-body);
    color: var(--bw-surface-100);
    background-color: var(--bw-surface-0);
}

h1 {
    font-family: var(--bw-font-primary-bold);
    font-size: var(--bw-font-size-display);
    font-weight: 700;
    line-height: var(--bw-line-height-h1);
    color: var(--bw-surface-100);
}

h2 {
    font-family: var(--bw-font-primary-bold);
    font-size: var(--bw-font-size-h2);
    font-weight: 700;
    line-height: var(--bw-line-height-h2);
    color: var(--bw-surface-100);
    letter-spacing: -0.68px;
}

h3 {
    font-family: var(--bw-font-primary-bold);
    font-size: var(--bw-font-size-h3);
    font-weight: 700;
    line-height: var(--bw-line-height-h3);
    color: var(--bw-surface-100);
    letter-spacing: -0.68px;
}

h4 {
    font-family: var(--bw-font-primary-bold);
    font-size: var(--bw-font-size-h4);
    font-weight: 700;
    line-height: var(--bw-line-height-h4);
    color: var(--bw-color-base-900);
}

h5 {
    font-family: var(--bw-font-primary-bold);
    font-size: var(--bw-font-size-h2);
    font-weight: 700;
    line-height: var(--bw-line-height-h4);
    color: var(--bw-color-base-900);
}

h6 {
    font-family: var(--bw-font-primary-bold);
    font-size: var(--bw-font-size-h41);
    font-weight: 700;
    line-height: var(--bw-line-height-h4);
    color: var(--bw-color-base-900);
}

p {
    font-family: var(--bw-font-primary-reg);
    font-size: var(--bw-font-primary-reg1);
    font-style: normal;
    font-weight: 400;
    line-height: var(--bw-line-height-body-md);
    color: var(--bw-surface-100);
    margin-bottom: 0;
}

blockquote {
    position: relative;
    border-left: 4px solid var(--bw-primary-alt) !important;
    padding: var(--bw-spacing-48) 0 0 var(--bw-spacing-40) !important;
    margin: var(--bw-spacing-48) 0 var(--bw-spacing-48) 0 !important;
    letter-spacing: -0.6px;
    background: url("../images/quote.svg") !important;
    background-repeat: no-repeat !important;
    background-position-x: var(--bw-spacing-40) !important;
}

blockquote p {
    font-size: var(--bw-font-size-h3) !important;
    font-family: var(--bw-font-primary-bold) !important;
    line-height: var(--bw-line-height-h3) !important;
}

ul li,
ol li {
    font-family: var(--bw-font-primary-reg);
    font-size: var(--bw-font-size-body-lg);
}

.main-post-section {
    margin-inline: 0;
}

.site-footer.grid-container {
    width: 100%;
    max-width: 100%;
}

.site-footer.grid-container > div[class^="gb-element-"],
.main-post-section > div[class^="gb-element-"] {
    padding-inline: var(--bw-spacing-16);
}

.has-drop-cap:not(:focus)::first-letter,
.has-drop-cap:focus::first-letter {
    font-family: var(--bw-font-primary-medium);
    font-size: var(--bw-font-size-dropcap);
    line-height: var(--bw-line-height-dropcap);
    float: left;
}

@media screen and (min-width: 1563px) {
    .wide-image {
        left: 50%;
        max-width: var(--gb-container-width) !important;
        position: relative;
        transform: translateX(-50%);
        width: var(--gb-container-width) !important;
    }
}

@media screen and (min-width: 1025px) {
    .main-post-section {
        margin-inline: var(--bw-spacing-24);
    }
    .site-footer.grid-container {
        width: calc(100% - (2 * var(--bw-spacing-24)));
        max-width: calc(100% - (2 * var(--bw-spacing-24)));
        margin-left: var(--bw-spacing-24);
        margin-right: var(--bw-spacing-24);
    }

    .site-footer.grid-container > div[class^="gb-element-"],
    .main-post-section > div[class^="gb-element-"] {
        padding-inline: 0;
    }
}