/* C*/
.changa-one-regular {
  font-family: "Changa One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.changa-one-regular-italic {
  font-family: "Changa One", sans-serif;
  font-weight: 400;
  font-style: italic;
}

/* Style that uses the universal selector to apply it everywhere */
* {
    font-family: "Changa One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Style for the body, which is essentially the entire page background */
body {
    background-color: hsla(42 42 86);
}

/* Style for the header, which is the little title at the top of the page */
header {
    --possible-header-color: color(display-p3 1 0.5 0); /* Use of a CSS variable and a fallback */
    color: orangered;
    color: var(--possible-header-color); 

    background-color: hsla(42 42 86);
    border: black solid 2px;
    position: sticky;
    top: 10px;
}

/* Style for the footer, which is the artificial copyright text */
footer {
    --possible-footer-color: color-mix(in display-p3, red, yellow); /* Use of a CSS variable and a fallback */
    color: orangered;
    color: var(--possible-footer-color);

    position: static;
}

/* Style for the title, where the bread logo and title is */
h1 {
    color: #895129;
    border-style: solid;
    border-color: #895129;
    border-width: 10px; /* Used 1/3 unique absolute unit */
    border-radius: 10px;
    padding: 1em 1em 1em 1em; /* Used 1/3 unique relative unit */
    margin: 10px auto 10px auto;

    display: block; /* Doesn't change much since it's already on its own line, but it should be formatted to be on its own line */
}

/* This is a test for display: none, which basically should hide an element */
#ignore {
    display: none;
}

/* Style for the earlier sections of the page, with the ToC and logistics */
section {
    border: 5pt solid #895129; /* Used 2/3 unique absolute unit */
    border-radius: 10px;
    padding: 1rem; /* Used 2/3 unique relative unit */
    margin: auto;
}

/* Style for exclusively logistics */
#logistics {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-items: center;
    gap: 10px;
}

/* Style that uses the child combinator */
#logistics > #minutes {
    font-size: 36px;
}

/* Style that uses the adjacent sibling combinator */
#minutes + #people {
    font-size: 36px;
}

/* Style that uses the general sibling combinator */
#minutes ~ #honor-mentions {
    font-size: 36px;
}

/* Style that uses an attribute selector for the ToC */
[class="menu"] {
    font-size: 36px;
}

/* Style that uses a combination fo two selectors */
p.summary.primary {
    font-size: 24px;
}

/* Style for the main part of the page, which is meeting details */
main {
    border: 2mm solid #895129; /* Used 3/3 unique absolute unit */
    border-radius: 10px;
    padding: 1rem;

    display: flex;
    flex-flow: column wrap; /* Note to myself: this actually did change something, since removing it places it all in a row */
    flex-basis: auto;
    justify-content: space-evenly;
}

/* Style for summary that uses flexbox */
#summary {
    flex-grow: 10;
}

/* Style for the text to become italic with the font */
.lookhere {
    font-family: "Changa One", sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* Style for all subheadings of h2 */
h2 {
    color: rgb(211, 145, 98);
    text-decoration: underline;
    text-align: left;
}

/* Style for the survey that doesn't really relate to the meeting page */
#survey {
    background-color: white;

    border: 10px solid black;
    border-radius: 10px;
    padding-top: 1vh; /* Used 3/3 unique relative unit */
    padding-bottom: 1vh;
    padding-left: 1vh;
    padding-right: 1vh;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 10in;

    height: 6in;
    width: 5in;
    max-height: 9in;
    max-width: 7.5in;

    /* Uses a nested selector to change some of the internal text of the survey form */
    & #in-form {
        color: black;
        font-size: 18px;
    }
}

/* Style that uses the selector list to apply color to text to both the title and the form itself, slightly redundant but fixes my earlier issue */
#survey, #survey-title {
    color: #895129;
}

/* Style that uses the descendant combinator to apply the background to only the child */
#survey #survey-form {
    background-color: hsla(42 42 86);
}

/* Style that uses the has selector */
h2:has(+ p) {
    font-size: 48px;
}

/* If they hold click over a button (there's only the submit one here), it'll turn yellow */
button:active {
    background-color: yellow;
}

/* The button hover will only take effect on devices with mice, so not tablets and other smaller screens */
@media (hover: hover) {
    /* If they hover over a button (there's only the submit one here), it'll turn green */
    button:hover {
        background-color: green;
    }
}