/* setting color themes to use throughout the document */
:root {
    --outline-color: color-mix(in xyz, black, beige);
    --edge-color: #444;
    --background-color: rgb(255, 240, 192);
}

/* universal font for anything other than headings */
* {
    font-family: "Georgia";
}

/* setting font size throughout document */
html {
    font-size: 2rem;
}

/* background color */
body {
    background-color: var(--background-color, rgb(255, 240, 192));
}

/* div styling to manage groups of content */
div {
    background-color: rgba(253, 247, 229, 0.5);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin: auto;
    border-style: ridge;
    border-color: var(--outline-color, color-mix(in xyz, black, beige));
    border-width: 1px;
    border-radius: 5px;
}

/* styling lines between divs */
hr {
    border-color: var(--outline-color, color-mix(in xyz, black, beige));
}

/* main content spacing */
main {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* sets images to readable size on mobile */
img {
    width: 800px;
}

/* spacing for text content */
p, form {
    padding-left: 20px;
    padding-right: 20px;
}

/* spacing for lists */
ol, ul {
    line-height: 1.5em;
}

/* spacing for details elements */
details {
    margin-left: 20px;
    margin-right: 20px;
}

/* changes color when hovering over details elements */
details:hover {
    background-color: #e6d9c2;
}

/* changes color when clicking on details elements */
details:active {
    background-color: var(--outline-color, color-mix(in xyz, black, beige));
}

/* centers and sizes video and audio elements */
video, audio {
    display: block;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 80vw;
}

/* sets header properties if it is a child of body */
body header {
    background-color: var(--edge-color, #444);
    margin: -8px -8px -8px -8px;
    padding: 8px 8px 16px 8px;
    color: hsl(0, 100%, 100%);
    text-align: center;
    font-family: "zalando sans semiexpanded";
    height: 33vh;
    max-height: 450px;
}

/* sets footer properties and adds margin to button child */
footer {
    background-color: var(--edge-color, #444);
    margin: -8px -8px -8px -8px;
    padding: 8px 8px 16px 8px;
    color: hsl(0, 100%, 100%);
    & button {
        margin-left: 15pt;
        position: static;
    }
}

/* sizes input elements */
input {
    width: 1.5em;
    height: 1.5em;
}

/* sizes input elements with an id attribute to be larger */
input[id] {
    width: 24em;
    height: 2em;
}

/* sizes submit buttons to be larger and more readable */
input[type="submit"] {
    width: 6em;
    height: 2em;
    font-size: 0.6em;
}

/* sizes option elements with value attributes */
option[value] {
    width: 1em;
}

/* sizes select elements */
select {
    width: 16em;
    height: 2em;
}

/* class used for highlighting unfinished business */
.problem {
    color: color(display-p3 0.7 0 0.3);
    display: block;
}

/* adds spacing between problem paragraphs and subsequent paragraphs */
p.problem + p {
    padding-bottom: 20px;
}

/* class used for styling subsection titles */
div > h2, div > h3 {
    background-color: rgb(221, 169, 0);
    margin-left: -15px;
    margin-right: -15px;
    padding: 2px 15px 2px 15px;
    font-family: "zalando sans semiexpanded";
}

/* first navigaton link */
p.link {
    display: inline;
    margin-left: -15pt;
    margin-right: -15pt;
}

/* subsequent navigaton links */
p.link ~ p.link {
    display: inline;
    margin-left: 2pt;
    margin-right: -15pt;
}

/* class used for formatting images in the diagram section */
.diagram {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
}

/* class used for adding margin to the bottom-most item in a section */
.bottomitem {
    margin-bottom: 20px;
}

/* adds flex properties to the image container in the diagram section */
#imgflex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
}

/* adds grid properties to the media container in the brainsnacking section */
#mediagrid {
    display: grid;
    gap: 20px;
    justify-items: center;
}

/* styles sections with nav elements and makes them stick to the top of the page */
section:has(nav) {
    position: sticky;
    top: 0;
    background-color: var(--background-color, rgb(255, 240, 192));
}

/* media query to adjust sizing for larger screens (desktop) */
@media (min-width: 1000px) {
    html {
        font-size: 1rem;
    }
    
    main {
        margin-left: 1in;
        margin-right: 1in;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    img {
        width: 450px;
    }

    input {
        width: 1em;
        height: 1em;
    }

    input[id] {
        width: 12em;
        height: 1em;
    }

    input[type="submit"] {
        font-size: 0.8em;
    }

    select {
        width: 8em;
        height: 1.5em;
    }

    nav {
        font-size: 1em;
    }
}