:root {
    --primary-color: #769d3e;
    --primary-color-hover: #668539;
}

h1 {
    /* Title only used at top of page beside picture */
    font-size: 30px;
    color: #192e1d;
    font-weight: 600;
    line-height: 1.25;
}

h2 {
    /* Style for section headers*/
    font-size: 20px;
    font-weight: 700;
    color: #192e1d;
    line-height: 1.25;
}

h3 {
    /* Style for subsection headers*/
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    color: #192e1d;
}

body>main>div.split-view>div.main div.divider {
    /* Divider that separates and groups unrelated content */
    border-top: 1px solid #ccc;
    width: 100%;
    margin: 40px 0;
}

/* --------------- single use stuff --------------------- */


/* --------------- top of article --------------------- */
body>main>div.split-view>div.main div.page-top-details {
    /* Title and picture section */
    display: grid;
    grid-template-columns: 175px 1fr;
    gap: 20px;
}

@media screen and (max-width:675px) {
    body>main>div.split-view>div.main div.page-top-details {
        grid-template-columns: 1fr;
    }
}

body>main>div.split-view>div.main div.page-top-details>img.img {
    /* Page main picture */
    width: 175px;
    height: 175px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

@media screen and (max-width:675px) {
    body>main>div.split-view>div.main div.page-top-details>img.img {
        width: 125px;
        height: 125px;
        display: none;
    }
}

body>main>div.split-view>div.main div.page-top-details>div.details {
    /* Page details stack */
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 10px;
}

body>main>div.split-view>div.main div.page-top-details>div.details>p.breadcrumbs {
    /* Page breadcrumbs holder */
    color: #646464;
    font-size: 14px;
    line-height: 1.35;
}

body>main>div.split-view>div.main div.page-top-details>div.details>p.breadcrumbs>a {
    /* Links in page breadcrumbs */
    color: var(--primary-color);
    font-size: 14px;
}

body>main>div.split-view>div.main div.page-top-details>div.details>p.breadcrumbs>a:hover {
    /* Hover links in page breadcrumbs */
    color: var(--primary-color-hover);
    text-decoration: none;
}

body>main>div.split-view>div.main div.page-top-details>div.details>h1 {
    /* Specific styling for h1 in the page details stack */

}

body>main>div.split-view>div.main div.page-top-details>div.details>p.value-statement {
    /* Page value statement under the h1, explains what the page will do */
    font-size: 14px;
    color: #363636;
    line-height: 1.75;
}

/* --------------- inline cta --------------------- */

body>main>div.split-view>div.main div.inline-cta {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ccc;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px solid #ccc;
}

body>main>div.split-view>div.main div.inline-cta>p.headline {
    font-size: 16px;
    line-height: 1.75;
    color: #646464
}

body>main>div.split-view>div.main div.inline-cta>p.link {
    color: #ccc;
    line-height: 1.75;
}

body>main>div.split-view>div.main div.inline-cta>p.link>a {
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.75;
}

body>main>div.split-view>div.main div.inline-cta>p.link>a:hover {
    color: var(--primary-color-hover);
    text-decoration: none;
}

/* --------------- calculator --------------------- */

body>main>div.split-view>div.main div.calculator {
    /* main calculator container */
    width: 100%;
    border: 1px solid #192e1d;
    border-radius: 10px;
    padding: 20px 20px 30px 20px;
    box-sizing: border-box;
    background-color: #f3f3f3;
}

/* calculator inputs */

body>main>div.split-view>div.main div.calculator>div.flex-wrapped-inputs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

body>main>div.split-view>div.main div.calculator div.input-row {
    /* Input row holds a stack of input label on top, and the inputs/selects on the bottom row */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

body>main>div.split-view>div.main div.calculator div.input-row>p.label {
    /* label that says what the input is for */
    font-size: 14px;
    color: #646464;
}

body>main>div.split-view>div.main div.calculator div.input-row>div.inputs {
    /* horizontal row of related inputs */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

body>main>div.split-view>div.main div.calculator div.input-row>div.inputs>p {
    /* the p tag for beside an input when the "unit" cannot be changed by a select */
    font-size: 18px;
    color: #ccc;
}

body>main>div.split-view>div.main div.calculator select {
    /* main select input style*/
    font-size: 18px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    color: #000;
    box-sizing: border-box;
    height: 44.4px;
    /* fixes weird ios height inconsistency*/

    font-weight: 500;
    cursor: pointer;
}

body>main>div.split-view>div.main div.calculator input {
    /* main text input */
    font-size: 18px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    box-sizing: border-box;
    font-weight: 500;
    height: 44.4px;
}

body>main>div.split-view>div.main div.calculator input.indented {
    padding-left: 25px;
}

body>main>div.split-view>div.main div.calculator input.indented-back {
    padding-right: 25px;
}

body>main>div.split-view>div.main div.calculator div.input-row>div.inputs>div.input {
    position: relative;
}

body>main>div.split-view>div.main div.calculator div.input-row>div.inputs>div.input>p.front {
    position: absolute;
    left: 10px;
    top: 13px;
    color: #ccc;
    font-size: 18px;
}

body>main>div.split-view>div.main div.calculator div.input-row>div.inputs>div.input>p.back {
    position: absolute;
    right: 10px;
    top: 12px;
    color: #ccc;
    font-size: 18px;
}

/* calculator controls */

body>main>div.split-view>div.main div.calculator>div.controls {
    /* container for calculate and reset buttons */
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

body>main>div.split-view>div.main div.calculator>div.controls>button {
    /* standard button style in the controls row */
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    display: inline-block;
    cursor: pointer;
    border: none;
}

body>main>div.split-view>div.main div.calculator>div.controls>button.primary {
    /* primary button to stand out (usually calculate button)*/
    background-color: var(--primary-color);
    color: #fff;
}

body>main>div.split-view>div.main div.calculator>div.controls>button.primary:hover {
    /* primary button hover */
    background-color: var(--primary-color-hover);
}

body>main>div.split-view>div.main div.calculator>div.controls>button.secondary {
    /* secondary button that doesn't need to stand out (reset, etc)*/
    background-color: #5f5f5f;
    color: #fff;
}

body>main>div.split-view>div.main div.calculator>div.controls>button.secondary:hover {
    /* secondary button hover */
    background-color: #474747;
}

/* Calculator results */

body>main>div.split-view>div.main div.calculator>div.results {
    /* calculator results container */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 20px;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack {
    /* Single calculator result stack */
    display: flex;
    flex-direction: column;
    border: 1px solid #192e1d;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    flex-grow: 1;
    gap: 5px;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack>p.label {
    /* label for calculator result inside a stack*/
    line-height: 1.75;
    margin-top: 0px;
    font-size: 14px;
    color: #646464;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack>p.calculated-value {
    /* calculator result value */
    font-size: 22px;
    font-weight: 600;
    line-height: 1.65;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack>p.calculated-value>span.shape {
    /* shape that goes beside the calculator result for validation types. Default is hidden */
    display: none;
}

/* YES */
body>main>div.split-view>div.main div.calculator>div.results>div.stack.good {
    /* stack green border when result is ok */
    border: 1px solid green;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack.good>p.calculated-value {
    /* result green text when result is ok */
    color: green;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack.good>p.calculated-value>span.shape {
    /* green shape to left of result to signify ok*/
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: green;
    border-radius: 100%;
    margin-right: 5px;
}

/* NO */
body>main>div.split-view>div.main div.calculator>div.results>div.stack.bad {
    /* stack red border when result is not ok*/
    border: 1px solid red;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack.bad>p.calculated-value {
    /* red result text when result is not ok*/
    color: red;
}

body>main>div.split-view>div.main div.calculator>div.results>div.stack.bad>p.calculated-value>span.shape {
    /* red shape to left of result to signify not ok*/
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 20%;
    margin-right: 5px;
}

/* calculator cta */
body>main>div.split-view>div.main>div.calculator-attached-cta {
    /* container for cta attached to bottom of calculator result*/
    display: flex;
    flex-direction: column;
}

body>main>div.split-view>div.main>div.calculator-attached-cta>div.connectors {
    /* container for the two connecting bars between the bottom of calculator and top of cta*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
}

body>main>div.split-view>div.main>div.calculator-attached-cta>div.connectors>div.column {
    /* vertical bar that connects the calculator and cta visually*/
    height: 10px;
    width: 60px;
    background-color: #192e1d;
    border-radius: 1px;
}

body>main>div.split-view>div.main>div.calculator-attached-cta>div.cta {
    /* container for the cta (block of dark green) */
    display: flex;
    border-radius: 10px;
    flex-direction: column;
    background-color: #192e1d;
    padding: 30px 20px;
    align-items: center;
}

body>main>div.split-view>div.main>div.calculator-attached-cta>div.cta>p.question {
    /* call to action question */
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

body>main>div.split-view>div.main>div.calculator-attached-cta>div.cta>p.answer {
    /* call to action answer*/
    color: #ffffffc4;
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
}

body>main>div.split-view>div.main>div.calculator-attached-cta>div.cta>a.link {
    /* Link that relates to the cta answer*/
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    align-self: center;
    margin-top: 15px;
}

body>main>div.split-view>div.main>div.calculator-attached-cta>div.cta>a.link:hover {
    /* hover style for cta link*/
    background-color: var(--primary-color-hover);
}

/* example scenario */
body>main>div.split-view>div.main>div.example-scenario {
    /* single example scenario container */
    display: flex;
    flex-direction: column;
    border: 1px solid #192e1d;
    border-radius: 10px;
    background-color: #fbfbfb;
    margin-top: 20px;
    padding: 20px;
}

body>main>div.split-view>div.main>div.example-scenario>h3:not(:first-of-type) {
    /* only the h3s that aren't first get extra margin-top */
    margin-top: 40px;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation {
    /* basic example explanation text used in each step */
    font-size: 16px;
    color: #646464;
    line-height: 1.75;
    margin-top: 10px;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation.intro {
    font-weight: 500;
    color: #363636;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation.conclusion {
    font-weight: 500;
    color: #192e1d;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation.conclusion>span.shape {
    display: none;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation.conclusion.good {
    color: green;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation.conclusion.bad {
    color: red;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation.conclusion.good>span.shape {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: green;
    border-radius: 100%;
    margin-right: 5px;
}

body>main>div.split-view>div.main>div.example-scenario>p.explanation.conclusion.bad>span.shape {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 20%;
    margin-right: 5px;
}

body>main>div.split-view>div.main>div.example-scenario>p.highlighted-explanation {
    /* highlighted explanation for people skimming the website */
    background-color: #f3f3f3;
    padding: 15px;
    margin: 10px 10px 0 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
}

body>main>div.split-view>div.main>div.example-scenario>div.img-explanation {
    /* indented image to align with the highlighted explanation for anything that needs a picture */
    width: 200px;
    height: 200px;
    background-color: orange;
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 10px;
}

/* photos gallery */
body>main>div.split-view>div.main>div.photo-gallery {
    /* grid photo gallery container */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

@media screen and (max-width: 600px) {
    body>main>div.split-view>div.main>div.photo-gallery {
        /* grid photo gallery container */
        grid-template-columns: 1fr 1fr;

    }
}

body>main>div.split-view>div.main>div.photo-gallery>img.img {
    /* individual image in grid */
    background-color: gray;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #ccc;
}

/* request a feature cta */
body>main>div.split-view>div.main>div.cta-request-a-feature {
    /* request a feature cta container */
    display: flex;
    flex-direction: column;
    align-items: center;
}

body>main>div.split-view>div.main>div.cta-request-a-feature>h2 {
    /* question */
    text-align: center;
}

body>main>div.split-view>div.main>div.cta-request-a-feature>a.link {
    /* link to request a feature */
    padding: 10px 20px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.cta-request-a-feature>a.link:hover {
    /* link hover */
    background-color: var(--primary-color-hover);
}

body>main>div.split-view>div.main>div.cta-request-a-feature>p.response-time {
    /* 24hr response time caption under button */
    font-style: italic;
    color: #363636;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.75;
}

/* Data sources */
body>main>div.split-view>div.main>div.data-sources {
    /* data citation sources grid container */
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-top: 20px;
}

@media screen and (max-width: 600px) {
    body>main>div.split-view>div.main>div.data-sources {
        grid-template-columns: 1fr;
    }
}

body>main>div.split-view>div.main>div.data-sources>div.title {
    /* source citation title container */
    border: 1px solid #192e1d;
    border-top: none;
    display: inline-flex;
    flex-direction: column;
    padding: 20px;
    background-color: #f3f3f3;
}

body>main>div.split-view>div.main>div.data-sources>div.title:first-of-type {
    /* first citiation title container in grid */
    border-top-left-radius: 10px;
    border-top: 1px solid #192e1d;
}

@media screen and (max-width: 600px) {
    body>main>div.split-view>div.main>div.data-sources>div.title:first-of-type {
        border-top-right-radius: 10px;
        border-top: 1px solid #192e1d;
    }
}

body>main>div.split-view>div.main>div.data-sources>div.title:nth-last-of-type(2) {
    /* second last div (last citation title) container in grid */
    border-bottom-left-radius: 10px;
}

@media screen and (max-width: 600px) {
    body>main>div.split-view>div.main>div.data-sources>div.title:nth-last-of-type(2) {
        /* second last div (last citation title) container in grid */
        border-bottom-left-radius: 0px;
    }
}

body>main>div.split-view>div.main>div.data-sources>div.table-details {
    /* citation details table container */
    border: 1px solid #192e1d;
    border-top: none;
    border-left: none;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    background-color: #fbfbfb;
}

@media screen and (max-width: 600px) {
    body>main>div.split-view>div.main>div.data-sources>div.table-details {
        /* citation details table container */
        border-left: 1px solid #192e1d;
    }
}

body>main>div.split-view>div.main>div.data-sources>div.table-details:nth-of-type(2) {
    /* second div (first citation details table) container in grid */
    border-top-right-radius: 10px;
    border-top: 1px solid #192e1d;
}

@media screen and (max-width: 600px) {
    body>main>div.split-view>div.main>div.data-sources>div.table-details:nth-of-type(2) {
        /* second div (first citation details table) container in grid */
        border-top-right-radius: 0px;
        border-top: none;
    }
}

body>main>div.split-view>div.main>div.data-sources>div.table-details:last-of-type {
    /* last citation details table in grid */
    border-bottom-right-radius: 10px;
}

@media screen and (max-width: 600px) {
    body>main>div.split-view>div.main>div.data-sources>div.table-details:last-of-type {
        /* last citation details table in grid */
        border-bottom-left-radius: 10px;
    }
}


body>main>div.split-view>div.main>div.data-sources>div.table-details>p {
    /* one single text line in the details table*/
    font-style: italic;
    color: #646464;
    line-height: 1.75;
}

body>main>div.split-view>div.main>div.data-sources>div.table-details>p:not(:first-of-type) {
    /* all p tags except for the first one get 10px margin on top*/
    margin-top: 10px;
}

body>main>div.split-view>div.main>div.data-sources>div.table-details>p>span {
    /* the span inide the p tag (data value for the label beside it)*/
    color: #000;
}

body>main>div.split-view>div.main>div.data-sources>div.table-details>p>span>a {
    /* link inside the span inside the p tag (links to citation referenced */
    color: var(--primary-color);
    overflow-wrap: anywhere;
}

body>main>div.split-view>div.main>div.data-sources>div.table-details>p>span>a:hover {
    /* link hover style */
    color: var(--primary-color-hover);
    text-decoration: none;
}

/* cta four-pronged transition block */
body>main>div.split-view>div.main>div.cta-transition-block {
    /* cta transition block container */
    display: flex;
    flex-direction: column;
}

body>main>div.split-view>div.main>div.cta-transition-block>div.accent-bubbles {
    /* accent bubbles container top and bottom */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
}

body>main>div.split-view>div.main>div.cta-transition-block>div.accent-bubbles>img {
    /* accent bubble image*/
    width: 50px;
    margin: 0;
}

body>main>div.split-view>div.main>div.cta-transition-block>div.cta {
    /* dark green coloured cta block*/
    display: flex;
    border-radius: 10px;
    flex-direction: column;
    background-color: #192e1d;
    padding: 30px 20px;
    align-items: center;
}

body>main>div.split-view>div.main>div.cta-transition-block>div.cta>p.question {
    /* call to action question */
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

body>main>div.split-view>div.main>div.cta-transition-block>div.cta>p.answer {
    /* call to action answer */
    color: #ffffffc4;
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
}

body>main>div.split-view>div.main>div.cta-transition-block>div.cta>a.link {
    /* Link that relates to the cta answer*/
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    align-self: center;
    margin-top: 15px;
}

body>main>div.split-view>div.main>div.cta-transition-block>div.cta>a.link:hover {
    /* cta link hover color*/
    background-color: var(--primary-color-hover);
}

/* related pages */
body>main>div.split-view>div.main>ul.related-pages {
    /* bulletpoint list of related pages */
    list-style-type: disc;
    margin-top: 20px;
    margin-left: 32px;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}

body>main>div.split-view>div.main>ul.related-pages>li {
    /* individual page */
    line-height: 1.75;
    color: #363636;
    font-size: 16px;
}

body>main>div.split-view>div.main>ul.related-pages>li>a {
    /* page link */
    color: var(--primary-color);
}

body>main>div.split-view>div.main>ul.related-pages>li>a:hover {
    /* page link hover color style */
    color: var(--primary-color-hover);
    text-decoration: none;
}

/* frequently asked questions */
body>main>div.split-view>div.main>div.faqs {
    /* container for faq blocks */
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.faqs>details {
    /* details element, no style needed */
}

body>main>div.split-view>div.main>div.faqs>details>summary {
    /* attached question block */
    border: 1px solid #192e1d;
    padding: 20px 10px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.35;
}

body>main>div.split-view>div.main>div.faqs>details:not(:first-of-type)>summary {
    /* every faq block other than the first one */
    border-top: none;
}

body>main>div.split-view>div.main>div.faqs>details>p {
    /* attached answer block*/
    border: 1px solid #192e1d;
    border-top: none;
    font-size: 16px;
    color: #363636;
    padding: 20px 10px;
    padding-left: 20px;
    background-color: #fbfbfb;
    line-height: 1.75;
}

body>main>div.split-view>div.main>div.faqs>details>p>a {
    color: var(--primary-color);
}

body>main>div.split-view>div.main>div.faqs>details>p>a:hover {
    color: var(--primary-color-hover);
    text-decoration: none;
}

/* when this calculator can't help you */
body>main>div.split-view>div.main>p.when-this-page-cant-help-you {
    /* explainer paragraph */
    margin-top: 20px;
    line-height: 1.75;
    color: #363636;
    font-size: 16px;
}

body>main>div.split-view>div.main>p.when-this-page-cant-help-you>a {
    /* link in explainer paragraph*/
    color: var(--primary-color);
}

body>main>div.split-view>div.main>p.when-this-page-cant-help-you>a:hover {
    /* hover style for link */
    color: var(--primary-color-hover);
    text-decoration: none;
}

/* ebay listings */
body>main>div.split-view>div.main>p.ebay-explainer {
    /* paragraph explaining the relevance of the ebay listings */
    font-size: 16px;
    font-weight: 400;
    color: #363636;
    line-height: 1.75;
    margin-top: 20px;
}

body>main>div.split-view>div.main>p.ebay-affiliate-disclaimer {
    /* affiliate legal disclosure */
    font-size: 14px;
    font-weight: 400;
    color: #646464;
    line-height: 1.75;
    margin-top: 10px;
}

body>main>div.split-view>div.main>p.ebay-affiliate-disclaimer>span {
    /* boldens the "affiliate disclaimer" text */
    font-weight: 500;
}

body>main>div.split-view>div.main>p.ebay-affiliate-disclaimer>a {
    /* link inside the affiliate disclaimer */
    color: var(--primary-color);
}

body>main>div.split-view>div.main>p.ebay-affiliate-disclaimer>a:hover {
    /* link hover style */
    color: var(--primary-color-hover);
    text-decoration: none;
}

body>main>div.split-view>div.main>div.ebay-listings {
    /* ebay listings div container */
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing {
    /* individual ebay listing */
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    border: 1px solid #192e1d;
    padding: 20px;
    gap: 20px;
    box-shadow: 5px 5px #f3f3f3;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.img {
    /* ebay listing image */
    min-width: 125px;
    width: 125px;
    height: 125px;
    border-radius: 10px;
    background-image: url('https://i.ebayimg.com/images/g/Gg4AAeSwr-VpN897/s-l500.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details {
    /* ebay listing details */
    display: flex;
    flex-direction: column;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>h3 {
    /* ebay listing title */
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35;
    background-color: #f3f3f3;
    border-radius: 10px;
    padding: 10px;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>p.date-condition {
    /* ebay listing upload date and condition */
    color: #646464;
    font-size: 14px;
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>p.priceline {
    /* ebay listing price */
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 10px;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>p.priceline>span {
    /* ebay listing "+ shipping" darkening to put emphasis on price only */
    color: #646464;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>a.listing-button {
    /* ebay listing button */
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 15px;
    align-self: flex-start;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>a.listing-button:hover {
    /* ebay listing button hover */
    background-color: var(--primary-color-hover);
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>p.postalcode {
    /* ebay listing seller postal code */
    color: #646464;
    font-weight: 500;
    font-size: 18px;
    align-self: flex-end;
    margin-top: 10px;
}

body>main>div.split-view>div.main>div.ebay-listings>div.listing>div.details>p.seller {
    /* ebay listing seller experience */
    color: #646464;
    align-self: flex-end;
    font-size: 14px;
    font-style: italic;
    margin-top: 10px;
}

/* changelog */
body>main>div.split-view>div.main>div.changelog {
    /* changelog container */
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.changelog>div.commit {
    /* individual changelog commit stack*/
    display: flex;
    flex-direction: column;
}

body>main>div.split-view>div.main>div.changelog>div.commit>h3 {
    /* date of the commit */
}

body>main>div.split-view>div.main>div.changelog>div.commit>div.changes {
    /* stack of features and bug fixes */
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
    padding-bottom: 20px;
    margin-top: 10px;

}

body>main>div.split-view>div.main>div.changelog>div.commit>div.changes>h4 {
    /* defines whether the changes listed below it relate to features or fixes  */
    margin-top: 10px;
    font-size: 16px;
    font-style: italic;
    color: #646464;
}

body>main>div.split-view>div.main>div.changelog>div.commit>div.changes>h4:not(:first-of-type) {
    /* all except for thr first in the stack get margin-top */
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.changelog>div.commit>div.changes>ul {
    /* the unordered list of actual changes, whether bug fixes or new features */
    list-style-type: disc;
    padding-left: 40px;
    margin-top: 10px;
}

body>main>div.split-view>div.main>div.changelog>div.commit>div.changes>ul>li {
    /* the bullet point in the list */
    color: #363636;
    font-size: 16px;
    line-height: 1.75;
}

/* pitfalls to avoid */
body>main>div.split-view>div.main>div.pitfalls-to-avoid {
    /* pitfalls widget container */
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 20px;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall {
    /* individual pitfall widget */
    border: 1px solid #192e1d;
    border-radius: 10px;
    background-color: #fbfbfb;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>div.icon {
    /* red flag icon outer circle */
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>div.icon>svg {
    /* white flag in red circle */
    fill: #fff;
    width: 20px;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>p.label {
    /* label separating each of the text blocks*/
    font-size: 14px;
    color: #646464;
    line-height: 1.75;
    margin-top: 20px;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>h3 {
    /* quick description of the pitfall to watch for */
    font-size: 20px;
    font-weight: 500;
    margin-top: 5px;
    background-color: #f3f3f3;
    padding: 10px;
    border-radius: 10px;
    align-self: flex-start;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>p.because {
    /* why the pitfall needs to be avoided */
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>p.further {
    /* further more detailed explanation on how the pitfall works and why it is bad */
    line-height: 1.75;
    color: #363636;
    margin-top: 5px;
    font-size: 15px;
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>p.further>a {
    /* link inside the pitfall further explanation */
    color: var(--primary-color);
}

body>main>div.split-view>div.main>div.pitfalls-to-avoid>div.pitfall>p.further>a:hover {
    /* hover style for link inside the pitfall explanation */
    color: var(--primary-color-hover);
    text-decoration: none;
}