/* FOR PHONES (0px to 600px wide) */
@media only screen and (min-width: 0px) {
    @font-face {
        font-family: 'Salsa';
        src: url('../font/salsa.woff2') format('woff2'),
             url('../font/salsa.woff') format('woff');
        font-display: swap;
    }
    @font-face {
        font-family: 'Open Sans';
        src: url('../font/open-sans.woff2') format('woff2'),
             url('../font/open-sans.woff') format('woff');
        font-display: swap;
    }
    * {
        /* entire site */
        margin: 0px;
        box-sizing: border-box;
    }
    html {
        /* entire site */
        width: 100vw;
        padding: 5px;
        --body-background-color: #AEC2B3;
        --body-text-color: #232528;
        --button-background-color: #0E4219;
        --button-text-color: #D6DCE5;
        --button-highlight-color: #D6DCE5;
        --button-shadow-color: #232528;
        --column-background-color: #D6DCE5;
        --column-text-color: #232528;
        --header-background-color: #AEC2B3;
        --hover-background-color: #156A27;
        --hover-text-color: #D6DCE5;
        --border-color: #232528;
    }
    body {
        /* _Layout */
        font-family: "Open Sans", sans-serif;
        color: var(--body-text-color);
        background-color: var(--body-background-color);
    }
    a:hover, a.button:hover, a:active, a.button:active {
        /* entire site */
        background-color: var(--hover-background-color);
        color: var(--hover-text-color);
    }
    p {
        /* entire site */
        margin-bottom: 20px;
    }
    header {
        /* _Layout */
        display: grid;
        grid-template-columns: 74px auto;
        align-items: center;
        background-color: var(--header-background-color);
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 5px;
    }
    h1 {
        /* _Layout, 404 */
        text-align: center;
        font-size: calc(1rem + 3vw);
    }
    .sitename {
        /* index, 404 */
        font-family: "Salsa", sans-serif;
    }
    div.subsections {
        /* _Layout */
        display: grid;
        grid-template-columns: 50% 50%;
        justify-items: center;
        background-color: var(--header-background-color);
        overflow: hidden;
        position: fixed;
        top: calc(75px + .75vh); /* set for fixed header */
        left: 0;
        right: 0;
        padding: 5px;
    }
    a.subsection {
        /* purchase-items, read-articles, watch-videos */
		display: block;
		position: relative;
		top: calc(-120px - .75vh); /* set for fixed header */
		visibility: hidden;
    }
    div.page {
        /* _Layout */
        display: flex;
        flex-direction: column;
        margin-top: calc(100px + .75vh); /* set for fixed header */
    }
    nav {
        /* index */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        font-size: calc(1rem + 1vw);
        font-weight: bold;
    }
    a.button {
        /* index */
        width: 42%;
        border-style: none;
        text-align: center;
        padding: 20px;
        margin: 10px;
        text-decoration: none;
        color: var(--button-text-color);
        background-color: var(--button-background-color);
        box-shadow: inset 4px 4px 4px 0 var(--button-highlight-color), inset -4px -4px 4px 0 var(--button-shadow-color);
    }
    div.column0 {
        /* faq, pillars */
        border-style: solid;
        border-width: 2px;
        border-color: var(--border-color);
        background-color: var(--column-background-color);
        color: var(--column-text-color);
        padding: 10px;
        font-size: calc(1rem + .75vw);
        line-height: 1.5;
    }
    div.column1 {
        /* about, purchase-items, read-articles, request-lessons, watch-videos */
        border-style: solid;
        border-width: 2px;
        border-color: var(--border-color);
        background-color: var(--column-background-color);
        color: var(--column-text-color);
        padding: 10px;
        font-size: calc(1rem + .75vw);
        margin-bottom: 20px;
        line-height: 1.5;
    }
    div.column2 {
        /* about, index, purchase-items, read-articles, request-lessons, watch-videos */
        border-style: solid;
        border-width: 2px;
        border-color: var(--border-color);
        background-color: var(--column-background-color);
        color: var(--column-text-color);
        padding: 10px;
        font-size: calc(1rem + .75vw);
        line-height: 1.5;
    }
    address {
        /* request-lessons */
        font-style: normal;
    }
    iframe {
        /* watch-videos */
        width: 320px;
        height: 180px;
        margin-bottom: 20px;
    }
    h3 {
        /* purchase-items, read-articles, watch-videos */
        text-align: center;
        margin-bottom: 20px;
    }
    img.profile {
        /* about */
        max-width: 100%;
        float: right;
        margin-bottom: 20px;
    }
    p:has(+ul) {
        /* about, pillars, request-lessons */
        margin-bottom: 0px;
    }
    ul {
        /* about, pillars, request-lessons */
        margin-top: 0px;
    }
    ul > :last-child {
        /* about, pillars, request-lessons */
        margin-bottom: 20px;
    }
    ol {
        /* pillars */
        padding-left: 20px;
    }
        /* pillars */
    span.bold {
        font-weight: bold;
    }
    .title {
        /* purchase-items, read-articles, watch-videos */
        margin-bottom: 0px;
        font-weight: bold;
        font-size: calc(1rem + .75vw);
    }
    .published {
        /* supportive-housing */
        font-style: italic;
        font-size: calc(.5rem + .5vw);
    }
    .description {
        /* purchase-items, read-articles, watch-videos */
        margin-bottom: 20px;
        font-size: calc(.75rem + .75vw);
    }
    .siteinfo {
        /* purchase-items, read-articles, watch-videos */
        margin-bottom: 2px;
        font-size: calc(.5rem + .5vw);
    }
}
/* FOR TABLETS (600px to 900px wide) */
@media only screen and (min-width: 600px) {
    html {
        /* entire site */
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 30px;
        padding-right: 30px;
    }
    header {
        /* _Layout */
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 30px;
        padding-right: 30px;
        grid-template-columns: 47px auto;
    }
    h1 {
        /* _Layout, 404 */
        font-size: calc(1rem + 3vw);
    }
    nav {
        /* index */
        margin-bottom: 20px;
    }
    .siteinfo {
        margin-bottom: 2px;
    }
    div.subsections {
        /* _Layout */
        top: calc(50px + .75vh); /* set for fixed header */
    }
    a.subsection {
        /* purchase-items, read-articles, watch-videos */
		top: calc(-105px - .75vh); /* set for fixed header */
    }
}
/* FOR LAPTOPS & DESKTOPS (900px to 3000px) */
@media only screen and (min-width: 900px) {
    html {
        /* entire site */
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 100px;
        padding-right: 100px;
    }
    header {
        /* _Layout */
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 100px;
        padding-right: 100px;
        grid-template-columns: 76px auto;
    }
    .sitename {
        /* index, 404 */
        font-size: calc(1rem + 2.5vw);
    }
    div.subsections {
        /* _Layout */
        display: none;
    }
    div.page {
        /* _Layout */
        flex-direction: row;
        margin-top: calc(85px + 5vh); /* set for fixed header */
    }
    nav {
    /* index */
        width: 50%;
        height: 80vh;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
    }
    a.button {
        /* index */
        min-width: 300px;
    }
    div.column0 {
        /* faq, pillars */
        width: 100%;
        padding: 20px;
    }
    div.column1 {
        /* about, purchase-items, read-articles, request-lessons, watch-videos */
        width: 50%;
        padding: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    div.column2 {
        /* about, index, purchase-items, read-articles, request-lessons, watch-videos */
        width: 50%;
        padding: 20px;
        margin-bottom: 20px;
    }
    iframe {
        /* watch-videos */
        width: 400px;
        height: 225px;
    }
    ol {
        /* pillars */
        padding-left: revert;
    }
    .title {
        /* purchase-items, watch-videos */
        font-size: calc(1rem + .5vw);
    }
    .description {
        /* purchase-items, watch-videos */
        font-size: calc(1rem + .25vw);
    }
    .siteinfo {
        /* purchase-items, watch-videos */
        font-size: calc(.25rem + .5vw);
    }
}
/* FOR TVS (3000px and wider) */
@media only screen and (min-width: 3000px) {
    html {
        /* entire site */
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 100px;
        padding-right: 100px;
    }
    header {
        /* _Layout */
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 100px;
        padding-right: 100px;
        grid-template-columns: 152px auto;
    }
    .sitename {
        /* index, 404 */
        font-size: calc(1rem + 2.5vw);
    }
    div.subsections {
        /* _Layout */
        display: none;
    }
    div.page {
        /* _Layout */
        flex-direction: row;
        margin-top: calc(85px + 5vh); /* set for fixed header */
    }
    nav {
        /* index */
        width: 50%;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
    }
    a.button {
        /* index */
        min-width: 300px;
    }
    div.column0 {
        /* faq, pillars */
        width: 100%;
        padding: 20px;
    }
    div.column1 {
        /* about, purchase-items, read-articles, request-lessons, watch-videos */
        width: 50%;
        padding: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    div.column2 {
        /* about, index, purchase-items, read-articles, request-lessons, watch-videos */
        width: 50%;
        padding: 20px;
        margin-bottom: 20px;
    }
    iframe {
        /* watch-videos */
        width: 800px;
        height: 450px;
    }
    ol {
        /* pillars */
        padding-left: revert;
    }
    .title {
        /* purchase-items, watch-videos */
        font-size: calc(1rem + .5vw);
    }
    .description {
        /* purchase-items, watch-videos */
        font-size: calc(1rem + .25vw);
    }
    .siteinfo {
        /* purchase-items, watch-videos */
        margin-bottom: 5px;
        font-size: calc(.5rem + .25vw);
    }
}