:root {
    --primary-color: #2a9d8f;
    --secondary-bg: #f4f1de;
    --main-font: 'Inter', sans-serif;
}

/* Universal Selector */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Element Selector (element) */
body {
    /* Using CSS Variable with Fallback */
    font-family: var(--main-font, Arial);
    /* Color usage */
    background-color: var(--secondary-bg);
    color: black;
    margin: 0.2in;
    font-size: 12pt;
    line-height: 1.5pc;
}

/* COLORS & GAMUT */

header h1 {
    /* Hex codes */
    color: #264653;
    /* RGBA color */
    background-color: rgba(42, 157, 143, 0.1);
}

h2 {
    /* color and Color-mix */
    color: #1f73cf;
    border-left: 5px solid color-mix(in srgb, var(--primary-color), white 40%);
}

/* BOX MODEL & SIZING */

/* ID Selector */
#attendance {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    
    /* Auto Margin */
    margin: 20px auto;
    
    /* Border properties */
    border-style: solid;
    border-color: #ddd;
    border-width: 1px;
    border-radius: 8px;
    
    /* Sizing */
    max-width: 900px;
    min-width: 300px;
    background-color: white;
}

/* Class Selector */
.list-style {
    list-style-type: square;
}

/* Combining Two Selectors */
p.unfinished {
    color: #e76f51;
    font-weight: bold;
}

/* SELECTORS & COMBINATORS */
h1, h2, h3 {
    text-align: left;
}

/* Attribute Selector */
input[type="text"] {
    border: 2px solid var(--primary-color);
}

/* Descendant Combinator */
nav a {
    /* Display: inline-block */
    display: inline-block;
    text-decoration: none;
    color: #264653;
}

/* Child Combinator */
main > section {
    border-bottom: 1px dashed #ccc;
    padding: 1rem; 
}

/* Adjacent Sibling Combinator */
h1 + h2 {
    margin-top: 0.5em; 
    font-style: italic;
}

/* General Sibling Combinator */
h2 ~ p {
    margin-top: 10px;
}

/* PSEUDO-CLASSES */
/* Pseudo-class: :hover */
nav a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Pseudo-class: :active */
button:active {
    background-color: #ccc;
}

header {
    /* Position: sticky */
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
}

footer {
    /* Position: relative */
    position: relative;
    padding: 2%; 
}

/* LAYOUTS (FLEX & GRID) */

/* Flexbox implementation */
#attendance ul {
    display: flex;
    /* Flexbox attributes */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Grid implementation */
fieldset {
    display: grid;
    /* Grid attributes */
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    padding: 20px;
}

/* :has() Selector */
section:has(blockquote) {
    background-color: hsla(45, 100%, 96%, 1); /* HSLA usage */
    border: 2px solid #e9c46a;
}

/* Nested Selectors */
main {
    background-color: #fff;
}

main #notes {
        padding: 20px;
    }
        
main #notes summary {
            font-weight: bold;
            cursor: pointer;
        }
    


/* RESPONSIVENESS */

/* Media Query based on screen width */
@media screen and (max-width: 768px) {
    #attendance ul {
        flex-direction: column;
    }
    
    fieldset {
        grid-template-columns: 1fr;
    }
    
    body {
        margin: 10px;
    }
}