@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
/* Two custom web fonts */

/* Requirements: 
done 1. Type selector
done 2. Class selector
done 3. ID selector
done 4. Attribute selector
done 5. Pseudo-class selector
done 6. Pseudo-element selector
done 7. Descendant combinator
done 8. Child combinator 
done 9. Direct sibling combinator
done 10. General sibling combinator */

/* root */

:root {

    /* background colours */

    --banner-background-colour: #f5f3cf;

    /* gradient colors */

    --gradient-one-three-colours: #f5f3cf;
    --gradient-two-four-colours: #f5f2bf;

    /* font colours */

    --h1-h2-h3-font-color: #1a2516ce;
    --banner-font-color: #675a41;
    --header-abbr-font-color: #788342;
    --paragraph-body-font-color: #241c0d;

    /* font families */

    --font-family-raleway: 'Raleway', sans-serif;
    --font-family-varela-round: "Varela Round", sans-serif;

    /* font sizes */

    --header-font-size: 1rem;
    --footer-font-size: 1.1rem;
    --h1-h2-h3-font-size: 1.2rem;
    --p-font-size: 1rem;

    /* links */

    --links-unvisited-font-color: #675a41;
    --links-visted-font-color: #088145;
    --links-hover-font-color: #eda520;
    --links-active-font-color: #94af56;
}

/* header */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* pin at top and have it span the full page */
    background-color: var(--banner-background-colour);
    z-index: 1000;  /* keep it above all other items */
}

[role="banner"] {
    /* 4. Attribute selector */
    background-color: var(--banner-background-colour);
    color: var(--banner-font-color);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    padding-left: 1.5rem;
    /* keep items to left of the header; add a gap between them
    padding-left so there's a gap between leftmost banner item and the side of the page */
    font-size: var(--header-font-size);
}

header abbr {
    /*7. Descendant combinator */
    color: var(--header-abbr-font-color);
    /* target just the word 'CSS' in the header */
}

/* body */

body {
    height: 100vh;
    background: linear-gradient(45deg, var(--gradient-one-three-colours), var(--gradient-two-four-colours), var(--gradient-one-three-colours), var(--gradient-two-four-colours));
    /*very subtle gradient that blends with other page colouring (i.e. header/footer and font colours) */
}

p {
    /* 1. Type selector */
    font-size: var(--p-font-size);
    /* give all paragraph a default font size; i.e. default room size of 1rem */
}

h1,
h2,
h3 {
    font-family: var(--font-family-raleway);
    color: var(--h1-h2-h3-font-color);
    font-size: var(--h1-h2-h3-font-size);
    /* font values for all headers */
}

.page-wrapper {
    /* 2. Class selector */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 5rem;
    /* padding to provide space between header and the body conte t*/
    font-family: var(--font-family-varela-round);
}

.intro {
    text-align: center;
    /* center text in intro box */
}

/* #zen-supporting section: container for explanation, participation, benefits, requirements: */ 

#zen-supporting {
    /* 3. ID Selector */
    display: flex;
    margin-top: 1rem;
    /*adds a bit more space between zen-supporting and the header */
    flex-wrap: wrap;
    /*wrap because i want fourth item (i.e. requirements) to wrap over onto a new line */
}

/* using flex, grow, and basis to spread out items in a way that mostly evens up their text lengths */
#zen-explanation {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 10%;
    /*10% makes explanation about the same height as participation */
}

#zen-participation {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 22%;
    /*22% makes participation about the same height as explanation */
}

#zen-benefits {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1%;
    /*tiny blex-basis because benefits is such a short paragraph*/
}

#zen-requirements {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 80%;
    /*wrapped over to second lane, so want it to fill most of the available space*/
}

#zen-explanation,
#zen-participation,
#zen-benefits {
    padding-left: 1rem;
    padding-right: 1rem;
    /*tiny bit of space between these items */
}

#zen-explanation,
#zen-participation,
#zen-benefits,
#zen-requirements {
    text-align: center;
    /*center all text */
}

#zen-explanation>p,
/* 8. Child combinator */
#zen-participation>p,
#zen-benefits>p,
#zen-requirements>p {
    /* paragraph font colour */
    color: var(--paragraph-body-font-color);
}

#zen-explanation p::first-line,
/* 6. Pseudo-element selector */
#zen-participation p::first-line,
#zen-benefits p::first-line,
#zen-requirements p::first-line {
    font-style: oblique;
    /*style first line of each paragraph*/
}

/* left and right sidebars */

.sidebar,
#zen-summary,
#zen-preamble {
    border: .25rem var(--banner-font-color) double;
    padding: 1rem;
    min-width: 15vw;
    /*so it always fills up a decent bit of the viewport, instead of shrinking very small */
    margin: 2rem;
}

#design-archives h3~nav {
    /* 10. General sibling combinator */
    font-style: italic;
    /*makes the 'archives' section of sidebar italic */
}

#zen-preamble h3+p {
    /* 9. Direct sibling combinator */
    font-style: italic;
}

#design-selection li,
#design-archives li,
#zen-resources li {
    margin-bottom: 1rem;
    /*bit of space between the list items */
}

#design-selection ul,
#design-archives ul,
#zen-resources ul {
    list-style-type: none;
    padding-left: 0;
    /*remove bullet points and also default built-in left padding */
}

/* footer */

footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
     z-index: 1000;
    /*stick footer at the bottom, make it span full page; z-index so it stays on top of others item*/
    justify-content: space-evenly;
    background-color: var(--banner-background-colour);
    padding: .5rem;
    font-size: var(--footer-font-size);
}

/* links */

a {
    display: inline-block;
    /*inline-block so transform property will work properly */
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    /* transition elements to enact when links are hovered over: short time and easy/smooth movement */
    /* affects all links; body, sidebar, footer*/
}

a:link {
    /* 5. Pseudo-class selector: */
    color: var(--links-unvisited-font-color);
}

a:visited {
    color: var(--links-visted-font-color);
}

a:hover {
    color: var(--links-hover-font-color);
    transform: scale(0.98);
    /* making slightly smaller so it doesn't overlap adjacent text */
}

a:active {
    color: var(--links-active-font-color);
}

footer a:hover {
    transform: scale(1.08);
    /* making footer links slightly bigger; no adjacent text in footer to overlap */
}

/* media queries */

/* elements generally seem to scale decently well at different screen sizes 
using one media query of up to 992px to enable better layouts for smaller screens */

@media (max-width: 992px) {
    .page-wrapper {
        flex-direction: column;
        /*change from row to column, so items stack vertically */
    }

    #zen-supporting {
        flex-direction: column;
        /*change from row to column, so items stack vertically */
        margin: 2rem;
        /*bit of space around items so they're not squished right up against page edges */
    }

    .sidebar {
        text-align: center;
        margin-top: 0rem;
        /*overwrite existing margin-top value; looks better with 0rem on smaller screen */
        margin-bottom: 5rem;
        /*make sure there's space between sidebar and footer */
        width: 60%;
        /*have sidebar always take up a decent bit of space */
        margin-left: auto;
        margin-right: auto;
        /*set up equal spacing on each side of the sidebar*/
    }

    [role="banner"] {
        justify-content: center;
        padding-left: 0;
        /*remove the left-padding that we have for larger sizes 
        /*bigger screens put header content at flex-start (left) and then set up some spacing 
        for smaller screen, just center all header items*/
    }

    #zen-preamble {
        margin-bottom: 0rem;
        /*overwrite margin-bottom value; remove empty space that's too notable on smaller screens */
    }
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
    #zen-supporting {
        flex-direction: column;
        /*want to keep stacking these items horizontally up to 1200px inclusive
        after that, can go back to default row orientation for largest screens */
        margin-bottom: 4rem;
        /*make sure to have space between body content and footer */
    }

    .sidebar {
        padding: 3rem;
        /*bit of padding for better spacing between sidebar and zen-supporting paragraphs */
    }
}

@media only screen and (min-width: 271px) and (max-width: 500px)  {
    #zen-summary {
        margin-top: 3.5rem;
        /*make sure there is space between body and header on tiny screens */
    }
}

@media only screen and (min-width: 0px) and (max-width: 270px)  {
    #zen-summary {
        margin-top: 5rem;
        /*make sure there is space between body and header on the tinest screens (i'm not sure any devices actually runs this small, but just in case) */
    }
}