html {
    background-color: rgb(255,
                          230,
                          210);
    margin: 0px;
}

.content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 5%;
}

.top, .bottom {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 20px;
    padding-left: 5px;
}
.top::before, .bottom::before {
    content: "> ";
}

.top {
    border-bottom: 2px solid #AAA4;
}

.bottom {
    border-top: 2px solid #AAA4;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-50 {
    flex: 50%;
}

.flex-25 {
    flex: 25%;
}

/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) {
    .flex-item-right, .flex-item-left {
        flex: 100%;
    }
}