html {
    font-size: 75%;
}

body {
    font-family:"Libre Franklin";
    /* background-color: #2A2426; */
    background-color: #efe9d7;
    color: #13151b;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Abril Fatface';
}

ul {
    list-style: square;
}

.header {
    text-align: right;
    color: #f6b922;
    background-color: #b2afaa;
}

@media (min-width: 550px){
    /* this so we get the yellow background on the right of the logo 
     * on wider layouts */
    .header {
        background: linear-gradient(90deg, #b2afaa 95%, #f6b922 5%);
    }
}

.header img {
    margin-left: auto;
}

header h1 {
    font-weight: 500;
}

.page{
    padding-top: 1rem;
}

.calloutbox {
    border: 1px solid black;
    padding: 4%;
}

a {
    color: #13151b;
}

#banner {
    width: 100%;
}

#topmenu {
    padding: 1rem 0 1rem 0;
    background-color: #b2afaa;
    list-style-type: none;
    text-transform: uppercase;
    text-align: right;
}

#topmenu a {
    margin-right: 1rem;
    text-decoration: none;
    color: #efe9d7;
}

#topmenu a:hover {
    color: #b7e090;
}

.container img{
    max-width: 100%;
}

#footer {
    margin-top: 3rem;
    margin-bottom: 3rem;
    float: right;
    text-align: left;
}