/* color variables */
:root {
    --red-100: #ffcdd2;
    --pink-100: #f8bbd0;
    --purple-100: #e1bee7;
    --deep-purple-100: #d1c4e9;
    --indigo-100: #c5cae9;
    --blue-100: #bbdefb;
    --light-blue-100: #b3e5fc;
    --cyan-100: #b2ebf2;
    --teal-100: #b2dfdb;
    --green-100: #c8e6c9;
    --light-green-100: #dcedc8;
    --lime-100: #f0f4c3;
    --yellow-100: #fff9c4;
    --amber-100: #ffecb3;
    --orange-100: #ffe0b2;
    --deep-orange-100: #ffccbc;
    --brown-100: #d7ccc8;
    --gray-100: #f5f5f5;
    --blue-gray-100: #cfd8dc;

    --red-400: #ef5350;
    --pink-400: #ec407a;
    --purple-400: #ab47bc;
    --deep-purple-400: #7e57c2;
    --indigo-400: #5c6bc0;
    --blue-400: #42a5f5;
    --light-blue-400: #29b6f6;
    --cyan-400: #26c6da;
    --teal-400: #26a69a;
    --green-400: #66bb6a;
    --light-green-400: #9ccc65;
    --lime-400: #d4e157;
    --yellow-400: #ffee58;
    --amber-400: #ffca28;
    --orange-400: #ffa726;
    --deep-orange-400: #ff7043;
    --brown-400: #8d6e63;
    --gray-400: #bdbdbd;
    --blue-gray-400: #78909c;

    --red-500: #f44336;
    --pink-500: #e91e63;
    --purple-500: #9c27b0;
    --deep-purple-500: #673ab7;
    --indigo-500: #3f51b5;
    --blue-500: #2196f3;
    --light-blue-500: #03a9f4;
    --cyan-500: #00bcd4;
    --teal-500: #009688;
    --green-500: #4caf50;
    --light-green-500: #8bc34a;
    --lime-500: #cddc39;
    --yellow-500: #ffeb3b;
    --amber-500: #ffc107;
    --orange-500: #ff9800;
    --deep-orange-500: #ff5722;
    --brown-500: #795548;
    --gray-500: #9e9e9e;
    --blue-gray-500: #607d8b;

    --red-900: #b71c1c;
    --pink-900: #880e4f;
    --purple-900: #4a148c;
    --deep-purple-900: #311b92;
    --indigo-900: #1a237e;
    --blue-900: #0d47a1;
    --light-blue-900: #01579b;
    --cyan-900: #006064;
    --teal-900: #004d40;
    --green-900: #1b5e20;
    --light-green-900: #33691e;
    --lime-900: #827717;
    --yellow-900: #f57f17;
    --amber-900: #ff6f00;
    --orange-900: #e65100;
    --deep-orange-900: #bf360c;
    --brown-900: #3e2723;
    --gray-900: #212121;
    --blue-gray-900: #263238;
}

/* global reset */

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
    box-sizing: border-box;
    outline: none;
    font-family: calibri, sans-serif;
}

html, body {
    background-color: #fafafa;
    height: 100dvh;
}

/* background colors */
.bg-red         { background-color: var(--red-100);         }
.bg-pink        { background-color: var(--pink-100);        }
.bg-purple      { background-color: var(--purple-100);      }
.bg-deep-purple { background-color: var(--deep-purple-100); }
.bg-indigo      { background-color: var(--indigo-100);      }
.bg-blue        { background-color: var(--blue-100);        }
.bg-light-blue  { background-color: var(--light-blue-100);  }
.bg-cyan        { background-color: var(--cyan-100);        }
.bg-teal        { background-color: var(--teal-100);        }
.bg-green       { background-color: var(--green-100);       }
.bg-light-green { background-color: var(--light-green-100); }
.bg-lime        { background-color: var(--lime-100);        }
.bg-yellow      { background-color: var(--yellow-100);      }
.bg-amber       { background-color: var(--amber-100);       }
.bg-orange      { background-color: var(--orange-100);      }
.bg-deep-orange { background-color: var(--deep-orange-100); }
.bg-brown       { background-color: var(--brown-100);       }
.bg-gray        { background-color: var(--gray-100);        }
.bg-blue-gray   { background-color: var(--blue-gray-100);   }

/* strong colors */
.red            { background-color: var(--red-400);         }
.pink           { background-color: var(--pink-400);        }
.purple         { background-color: var(--purple-400);      }
.deep-purple    { background-color: var(--deep-purple-400); }
.indigo         { background-color: var(--indigo-400);      }
.blue           { background-color: var(--blue-400);        }
.light-blue     { background-color: var(--light-blue-400);  }
.cyan           { background-color: var(--cyan-400);        }
.teal           { background-color: var(--teal-400);        }
.green          { background-color: var(--green-400);       }
.light-green    { background-color: var(--light-green-400); }
.lime           { background-color: var(--lime-400);        }
.yellow         { background-color: var(--yellow-400);      }
.amber          { background-color: var(--amber-400);       }
.orange         { background-color: var(--orange-400);      }
.deep-orange    { background-color: var(--deep-orange-400); }
.brown          { background-color: var(--brown-400);       }
.gray           { background-color: var(--gray-400);        }
.blue-gray      { background-color: var(--blue-gray-400);   }

/* 500 colors */
.red-500            { background-color: var(--red-500);         }
.pink-500           { background-color: var(--pink-500);        }
.purple-500         { background-color: var(--purple-500);      }
.deep-purple-500    { background-color: var(--deep-purple-500); }
.indigo-500         { background-color: var(--indigo-500);      }
.blue-500           { background-color: var(--blue-500);        }
.light-blue-500     { background-color: var(--light-blue-500);  }
.cyan-500           { background-color: var(--cyan-500);        }
.teal-500           { background-color: var(--teal-500);        }
.green-500          { background-color: var(--green-500);       }
.light-green-500    { background-color: var(--light-green-500); }
.lime-500           { background-color: var(--lime-500);        }
.yellow-500         { background-color: var(--yellow-500);      }
.amber-500          { background-color: var(--amber-500);       }
.orange-500         { background-color: var(--orange-500);      }
.deep-orange-500    { background-color: var(--deep-orange-500); }
.brown-500          { background-color: var(--brown-500);       }
.gray-500           { background-color: var(--gray-500);        }
.blue-gray-500      { background-color: var(--blue-gray-500);   }

/* mobile-first layout */

/* small phones */
@media (min-width: 50px) {

    #page-header {
        padding: 20px 0px;
        background-color: var(--gray-100);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
    
    #page-heading {
        font-size: 1.3em;
        width: 100%;
        max-width: 1200px;
        margin: 0px auto;
        text-align: center;
    }

    body, section {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    section {
        display: flex;
        flex-direction: column;
        gap: 2em;
        width: 100%;
        max-width: 1200px;
        margin: 30px auto;
        background-color: var(--gray-100);
        padding: 2em;
        border-radius: 1em;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }

    ul li {
        list-style-type: none;
    }

    .button-container {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .button-container button {
        border: none;
        padding: 1em;
        background-color: var(--teal-100);
        border-radius: 1em;
    }

    button.active {
        background-color: var(--teal-400);
    }

    .item-container {
        display: flex;
        gap: 1em;
        width: 100%;
        padding: 2rem;
        background-color: var(--blue-gray-100);
        border-radius: 1em;
    }

    .item-container li {
        padding: 1em 1.5em;
        border-radius: 0.5em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

/* large phones */
@media (min-width: 480px) {
    
}

/* small tablets / large phones */
@media (min-width: 600px) {
    
}

/* tablets */
@media (min-width: 768px) {

    .button-container {
        flex-wrap: wrap;
        flex-direction: row;
    }

    .item-container li {
        padding: 2em 3em;
        border-radius: 1em;
    }

    .button-container button {
        /*margin: 1em 1em 0em 0em;*/
    }

}

/* small laptops */
@media (min-width: 1024px) {
    
}

/* desktops */
@media (min-width: 1280px) {
    
}

/* large desktops / wide monitors */
@media (min-width: 1536px) {
    
}