body {
    background-color: #faf0e6;
    font-family: serif;
}
h1, h2, h3 {
    font-family: sans-serif;
}
h1 {
    color: #008e97;
}
h2 {
    color: #fc4c02;
}
h3 {
    color: #005778;
}
label {
    color: #06286c;
}
p {
    color: #ff6f69;
}
a {
    background-color: white;
    color: black;
}
a:hover {
    background-color: black;
    color: white;
}

/* demo light family */
#demo-light {
    background-color: #faf0e6;
    font-family: serif;
}
#demo-light label {
    color: #06286c;
}
#demo-light p {
    color: #ff6f69;
}

/* demo dark family */
#demo-dark {
    background-color: #331832;
    font-family: sans-serif;
}
#demo-dark label {
    color: #f1ecce;
}
#demo-dark p {
    color: #f1ecce;
}

/* demo black family */
#demo-black {
    background-color: black;
    font-family: monospace;
}
#demo-black label {
    color: #c586c0;
}
#demo-black p {
    color: #ce9178;
}

/* other formatting */
.text-center { /* I like when text is centered for stuff like headings, so having a text-center class to align text to horizontal center makes sense to me */
    text-align: center;
}
.row:after { /* columns will be in rows */
    content: ""; /* content empty */
    display: table; /* act like a table */
    clear: both; /* next row should actually be another row */
}
.column {
    float: left;
    height: auto;
    width: 33.33%;
}
.column4 {
    float: left;
    height: auto;
    width: 25%;
}
.column-nested {
    padding: 2%; /* add padding inside columns so content not at very edge */
}

/* height changers */
.fixed-demo {
    height: 128px;
}
.fixed-ie {
    height: 475px;
    overflow-y: scroll;
}

/* miscellaneous */
#show-username {
    font-family: monospace;
    font-size: 1.5em;
}

/* if screen width is 1140px or less, make the columns 100% width */
@media screen and (max-width: 1140px) {
    .row {
        margin-left: 5%;
        margin-right: 5%;
    }
    .column {
        height: auto;
        width: 100%;
        overflow-y: auto;
        border: none;
    }
    .column4 {
        height: auto;
        width: 100%;
        overflow-y: auto;
        border: none;
    }
    .end {
        display: none;
    }
    .fixed-demo {
        height: auto;
    }
    .fixed-ie {
        height: auto;
        overflow-y: auto;
    }
}
/* I chose 1140 px because at that point the columns side-by-side should still be wide enough at 1141px but maybe not lower than that */