:root {
    --midnight: #0e0b2a;
    --midnight-hover: rgba(26, 27, 31, .7);
    --off-midnight: #1d1c3b;
    --dark-gray: #231f20;
    --medium-gray: #9295a1;
    --light-gray: #ebeff5;
    --off-white: #f4f7fb;
    --white: #fff;
    --white-hover: hsla(0, 0%, 100%, .75);
    --blue: #149cf4;
    --blue-rgb: 20, 156, 244;
    --red: #f54c40;
    --orange: #ffa02b;
    --yellow: #fed556;
    --green: #58d06d;
    --teal: #48c1bf;
    --light-blue: #8dd1f4;
    --purple: #6574cd;
    --lilac: #bf9ff6;
    --border-light: #d5d9df;
    --border-dark: #3d3b5c;
    --text: var(--midnight);
    --text-hover: var(--midnight-hover);
    --body-text: rgba(26, 27, 31, .85);
    --background: var(--white);
    --off-background: var(--light-gray);
    --border: var(--border-light)
}

@media (prefers-color-scheme:dark) {
    :root {
        --text: var(--white);
        --text-hover: var(--white-hover);
        --body-text: hsla(0, 0%, 100%, .85);
        --background: var(--midnight);
        --off-background: var(--off-midnight);
        --border: var(--border-dark)
    }
}

:root {
    --padding: 80px;
    --screen-full: 1500px;
    --screen: calc(var(--screen-full) - var(--padding)*2);
    --1-col: 30%;
    --2-col: 65%;
    --h-gap: 5%;
    --v-gap: 60px;
    --gap: var(--v-gap) var(--h-gap)
}

@media screen and (max-width:1640px) {
    :root {
        --padding: 60px;
        --screen-full: 1400px
    }
}

@media screen and (max-width:1080px) {
    :root {
        --1-col: 47%;
        --2-col: 100%;
        --h-gap: 6%;
        --v-gap: 50px
    }
}

@media screen and (max-width:767px) {
    :root {
        --padding: 30px
    }
}

@media screen and (max-width:660px) {
    :root {
        --1-col: 100%;
        --h-gap: 0;
        --v-gap: 30px
    }
}

body {
    background: var(--background);
    color: var(--text);
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.4em;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    position: relative
}

a,
a>* {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    transition: all .1s
}

b,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: 600
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.35em;
    margin: 0 0 10px
}

img {
    max-width: 100%
}

pre {
    text-wrap: wrap
}

.body-container {
    margin: 0 auto;
    max-width: var(--screen);
    padding: 0 var(--padding);
    width: calc(100% - var(--padding)*2)
}

.cta_button,
.stoplight-post-body a.cta_button,
a.cta_button {
    background: var(--blue) !important;
    border-radius: 5px !important;
    color: var(--white) !important;
    display: inline-block !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.4em !important;
    padding: 11px 20px 10px !important
}