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

html, body {
    background-color: #fff;
    height: 100vh;
    width: 100wh;
}

header {
    width: 1000px;
    margin: 0px auto;
}

main {
    width: 1000px;
    margin: 0px auto;
}

.box {
    width: 80px;
    height: 80px;
    display: block;
    border: none;
    border-radius: 1em;
}

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

.color-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

h1 {
    color: #7e57c2;
    font-size: 4em;
    text-align: center;
    margin: 0.5em;
}

h2 {
    color: #2f2f2f;
    font-size: 2em;
    margin: 0.45em 0em;
}

section {
    padding: 20px;
    border: 2px solid #eeeeee;
    border-radius: 1em;
    height: auto;
    margin-bottom: 50px;
}

article {
    
}

#introduction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "title title"
        "container1 container2";
}

.article-title {
    grid-area: title;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
    gap: 20px;
    padding: 20px;
}

.container:first-of-type {
    border-right: 2px dashed #eeeeee;
}

#box-container-1 {
    border: 2px dashed #78909c;
    padding: 20px;
    border-radius: 1em;
}

#box-container-2 {
    border: 2px solid #78909c;
    padding: 20px;
    border-radius: 1em;
}

.title {
    border: none;
    border-radius: 1em;
    padding: 1em 3em;
    font-size: 1.3em;
}

.title-blue {
    background-color: #bbdefb;
    color: #0d47a1;
}
.title-green {
    background-color: #b2dfdb;
    color: #004d40;
}

code {
    border: none;
    border-radius: 1em;
    padding: 0.25em 3em;
    font-size: 1.3em;
    white-space: pre;          /* Preserves spaces and line breaks */
    font-family: monospace;    /* Forces a fixed-width, developer font */
    display: block;            /* Makes it a block-level container */
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center; /* vertical */
    justify-content: flex-start; /* horizontal */
}

.code-blue {
    background-color: #bbdefb;
    color: #0d47a1;
}
.code-green {
    background-color: #b2dfdb;
    color: #004d40;
}

#summary {
    padding: 1rem;
    margin: 20px;
    background-color: #f3e5f5;
    border: none;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#summary-list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
}

.summary-item {
    background-color: #fff;
    border-radius: 1rem;
    padding: 15px;
    border: 2px solid #eeeeee;
    display: flex;
    align-items: center; /* vertical */
    justify-content: flex-start; /* horizontal */
    gap: 10px;
    font-weight: bold;
}

.flex-property-box {
    border: 2px solid #eeeeee;
    padding: 20px;
    border-radius: 1rem;
    width: 100%;
}

.sm-box {
    min-width: 40px;
    min-height: 40px;
    display: block;
    border: none;
    border-radius: 1em;
}

.jc-flex {
    height: 120px; 
    display: flex;
}

.ai-flex {
    height: 120px;
    display: flex;
}


#jc-flex-start      { justify-content: flex-start;    }
#jc-center          { justify-content: center;        }
#jc-flex-end        { justify-content: flex-end;      }
#jc-space-between   { justify-content: space-between; }
#jc-space-around    { justify-content: space-around;  }

#ai-flex-start      { align-items: flex-start;    }
#ai-center          { align-items: center;        }
#ai-flex-end        { align-items: flex-end;      }
#ai-stretch         { align-items: stretch;       }
#ai-baseline        { align-items: baseline;      }