/* This one */

:root {
    --gold: #DB9B27;
    --orange: #FFAA00;
    --green-green: #00B728;
    /* --dark-green: #004B1C; */
    --dark-green: #002b10;
    --electric: #00FF55;
    --light-green: #B5FFCE;
    --grey-green: #A3C1AD;
    /* --dark-grey-green: #3e5b48; */
    --dark-grey-green: #293d30;
    --yellow-green: #D4FF00;
    --darksmoke: #143e20;
    --alicegreen: #ECFFDB;

    color-scheme: light dark;
  }
  

body {
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
    /* line-height: 22px; */
    line-height: 22px;
    font-style: normal;
    /* color: black; */
    color: light-dark(var(--dark-green), var(--light-green));
    background-color: light-dark(white, var(--dark-green));
    font-weight: 300;
}


a {
    color: light-dark(var(--dark-green), var(--light-green));
}
a:hover {
    /* background-color: #DB9B27; */
    /* text-decoration: underline; */
    text-decoration: none;
    /* background-color: #00FF55; */
}
h1, h2, h3 {
    line-height: 1.2em;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 1.3em;
}
/* .blogpage h1 {
    font-weight: 600;
    margin-bottom: 2em;
    color: black;
} */

.blogpage h3 {
    font-size: 20px;
}

.blogpage section iframe {
    border: 1px solid lightgrey;
}

.mono, code {
    font-weight: 400;
    font-family: 'IBM Plex Mono';
}

code {
    font-size: 15px;
    border-radius: 3px;
    padding: 2px 6px;
    border: light-dark(var(--grey-green), var(--grey-green)) 1px solid;
}

.cond {
    font-family: 'IBM Plex Sans Condensed';
}

nav {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: light-dark(white, var(--dark-green));
    /* border-bottom: 1px solid #ccc; */
    min-height: 36px;
}

/* These are position like this so that the header title aligns with the article below it */
nav #logo {
    position: absolute;
    top: 27px;
    left: 30px;

    svg {
        width: 131px;
        height: 18px;
    }
    svg path {
        fill: light-dark(var(--dark-green), var(--light-green));
    }

    @media (max-width: 1000px) {
        svg {
            width: 100px;
        }
    }
}

nav ol {
    margin: 0;
    position: absolute;
    top: 20px;
    right: 30px;
}

nav li {
    display: inline-block;
    margin-left: 20px;
}

nav h1 {
    max-width: 750px;
    width: 100%;
    margin: auto;
    font-size: 16px;
    height: 36px;
    display: flex;
    align-items: center;
}

@media (max-width: 1080px) {
    nav #logo {
        left: 20px;
    }
    
    nav ol {
        right: 20px;
    }
    
    nav h1 {
        margin-top: 4em;
    }
}

@media (max-width: 800px) {
    nav {
      padding: 20px;
    }
  }

article {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    min-height: calc(100vh - 77px - 143px);
}


.help article img {
    border: 1px solid lightgrey;
}

.help article {
    margin-top: 2em;
}

.help article.no-heading {
    margin-top: 0;
}


@media (max-width: 1080px) {
    .help article {
        margin-top: 1em;
    }
    .help article.no-heading {
        margin-top: 1em;
    }
}

.help .full_width .img {
    margin-bottom: 1em;
}

.help h2 {
    font-size: 18px;
    margin-bottom: 0.5em;
    margin-top: 0;
}

.help h3 {
    font-size: 16px;
    margin-bottom: 0.5em;
}

.help h4 {
    font-size: 14px;
    margin-bottom: 0.5em;
}

.help h2 + p, .help h3 + p, .help h4 + p {
    margin-top: 0;
}


.help section {
    margin-top: 3em;
}

.help section .text p:first-of-type {
    margin-top: 6px;
}

.help section.callout {
    padding: 12px;
    margin-top: 2em;
}

.callout-antiquewhite {
    background-color: antiquewhite;
    border: 1px solid antiquewhite;
}

.callout-black-border {
    background-color: light-dark(white, var(--dark-green));
    border: 1px solid light-dark(lightgrey, var(--grey-green));
}

.help section.callout h3 {
    font-size: 12px;
    margin: 0 0 2px 0;
}

.help section.callout p:first-of-type {
    margin-top: 0;
}
.help section.callout p:last-of-type {
    margin-bottom: 0;
}

.help section ol {
    margin-top: 0.5em;
    padding-left: 1em;
}

/* body[class*="blog"] article {
    font-family:
     'IBM Plex Serif', serif;
} */

.blogindexpage .index_block {
    margin-top: 3em;
}

footer {
    margin-top: 40px;
    padding: 20px;
    /* border-top: 1px solid lightgrey; */
    border-top: 1px solid light-dark(#D9F2E2, var(--dark-grey-green));
}

footer .wrapper {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 20px auto;
    font-weight: 500;
    color: light-dark(var(--dark-green), var(--light-green));
    max-width: 1440px;
}

footer ol {
    display: flex;
    padding-left: 0;
    margin: 0;
}

footer li {
    list-style-type: none;
    padding: 0 12px;
}

@media (max-width: 400px) {
    footer ol {
        flex-flow: wrap;
    }
    footer li {
        /* padding: 0 8px; */
        padding: 0 8px 4px 8px;
    }
  }


/* footer a {
    text-decoration: none;
} */

/* Buttons */

.btn, a.btn {
	border-radius: 3px;
	padding: 8px 14px;
	font-size: 14px;
	line-height: 18px;
	cursor: pointer;
	display: block;
	text-decoration: none;
	font-family: 'IBM Plex Sans', sans-serif;
	height: fit-content;
	width: fit-content;
	text-align: center;
	font-weight: 600;
}

.btn-primary {
	background-color: light-dark(var(--dark-green), var(--light-green));
    color: light-dark(var(--light-green), var(--dark-green));
	border: 1px solid light-dark(var(--dark-green), var(--light-green));
}

.btn-primary a:hover {
    background-color: white;
}

.btn-standard {
    background-color: light-dark(white, var(--dark-green));
	color: light-dark(var(--dark-green), var(--light-green));
	border: 1px solid light-dark(var(--dark-green), var(--light-green));
}

.btn:hover {
    border: 1px solid var(--dark-green);
    /* background: var(--electric); */
    background: white;
    color: var(--dark-green);
    /* color: white; */
}

.btn-primary .btn-hover-opposite {
	background-color: var(--dark-green);
	color: white;
	border: 1px solid var(--dark-green);
}

.btn-standard:hover {
    background-color: light-dark(var(--dark-green), white);
    color: light-dark(white, var(--dark-green));
}

/* .btn-standard:active {
    background-color: var(--dark-green);
} */

.btn-borderless {
    background-color: light-dark(white, var(--dark-green));
    color: light-dark(var(--dark-green), var(--light-green));
    border: 1px solid light-dark(white, var(--dark-green));
}

/* Home page features */


.hero_image {
    /* border: 10px solid black; */
    border: 10px solid var(--dark-green);
    border-bottom: none;
    /* border-radius: 32px 32px 0 0; */
    border-radius: 20px 20px 0 0;
    max-width: 1440px;
}

body[class="home"] article {
    flex-direction: column;
}

body[class="home"] h2 {
    text-align: center;
}

/* body[class="home"] article {
    padding-top: 2em;
} */

/*
There is an unusual gap at the bottom of the picture element. 
This gap can be corrected by adding height to the picture element.
These dynamic heights are calculated from the view width and the aspect ration of each image.
The Stackoverflow article I read about this issue taked about making the height: 0 and adding the aspect ration to the padding.
I've done it slightly differently.

*/

@media (max-width: 1000px) {
    .hero_image {
        border: 8px solid var(--dark-green);
        border-bottom: none;
        border-radius: 16px 16px 0 0;
    }
    .hero_image picture {
        height: calc((100vw - 40px) * 0.325);
    }
}

@media (max-width: 800px) {
    .hero_image {
        border: 6px solid var(--dark-green);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
    }
    .hero_image picture {
        height: calc((100vw - 40px) * 0.395);
    }
}

@media (max-width: 500px) {
    .hero_image {
        border: 4px solid var(--dark-green);
        border-bottom: none;
        border-radius: 8px 8px 0 0;
    }
    .hero_image picture {
        height: calc((100vw - 40px) * 0.626);
    }
}

div[class^='features'] {
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.5em;
}

div[class^='features'] p {
    margin: 0;
}

.features-col1, .features-col3 {
    display: flex;
    /* background-color: #F3F3F3; */
    margin: auto;
    /* max-width: calc(1440px - 80px); */
    max-width: 1440px;
    /* padding: 40px; */
    margin: 40px auto;
}

.features-col1 {
    align-items: center;
}

.features-col1 picture {
    padding: 30px;
}

.features-col3 {
    gap: 40px;
    /* background-color: white; */
    padding: 0;
    max-width: calc(1440px);;
}

@media (max-width: 1480px) {
    .features-col1, .features-col3 {
        margin-left: 20px;
        margin-right: 20px;
    }
    
  }

.feature-col3_col1,  .feature-col3_col2, .feature-col3_col3 {
    width: 100%;
    background-color: light-dark(#F3F3F3, var(--darksmoke));
    padding: 0;
    border: 4px light-dark(#F3F3F3, var(--darksmoke)) solid;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}

.feature_text {
    padding: 40px;
}

@media (max-width: 1285px) {
    .features-col3 {
        margin-top: 20px;
        gap: 20px
    }

    .feature_text {
        padding: 30px;
    }

    .features-col1 picture {
        padding: 30px 30px 0 30px;
    }
    

}

@media (max-width: 800px) {
    .features-col3 {
        flex-direction: column;
    }
    div[class^='feature-col3_col'] {
        flex-direction: row-reverse;
        align-items: center;
        /* background-color: #ebebeb; */
    }
    div[class^='feature-col'] picture {
        width: 50%;
    }
    .feature_text {
        width: calc(50% - 60px);
    }

    .features-col1 picture {
        padding: 30px 30px 30px 30px;
        width: 50%;
    }

    
}


@media (max-width: 550px) { 
    .features-col1 {
        flex-direction: column-reverse;
        border: 4px light-dark(#F3F3F3, var(--darksmoke)) solid;
        padding: 0;
        gap: 0;
        background-color: light-dark(whitesmoke, var(--darksmoke));
    }
    div[class^='feature-col3_col'] {
        flex-direction: column;
    }
    div[class^='feature-col'] picture {
        width: 100%;
    }
    
    .feature_text {
        width: calc(100% - 60px - 8px); /* Minus padding and border */
    }

    .features-col1 picture {
        padding: 0;
        width: 100%;
    }
}


div[class^='features'] h4 {
    /* font-size: 18px; */
    /* margin: 0 0 4px 0; */
    margin: 0;
}

div[class^='feature-col'] img {
    width: 100%;
}