body {
    background-color: #8bcef5b8;
    font-family: "Ubuntu", sans-serif;
    font-size: 1.1em;
    line-height: 1.1em;
    margin: 5px 0px;
    text-align: center;
}

/*
 * We are using this to create a fairly narrow, centered content area
 */
h1 {
    background-color: white;
    max-width: 30%;
    margin: 10px auto;
}

hr {
    max-width: 30%; 
    margin: 10px auto;
}

.quoteDisplay, .quoteAuthor {
    max-width: 30%; 
    margin: 10px auto;
    text-align: left;
}

.quoteAuthor {
    font-size: 0.9em;
}
/* 
 * Items below largely move the search items around 
 * to create a column layout 
 */
#lowRangeText, #highRangeText {
    max-width: 3.2em;
}

#keywordInput {
    max-width: 8.0em;
}

.container {
    margin-top:0px;
    display:flex;
    justify-content:center;
    max-width: 50rem;
}

select {
    min-width: 220px;
    max-width: 220px;
}

#authorSearchButton, #categorySearchButton, #keywordSearchButton {
    min-width: 170px;
    max-width: 170px;
}

/*
 * This is a few modal formats to 
 * improve the balance and layout
 */
#exampleModalLabel {
    min-width: 100%;
}