html, body {
    background-color: $white;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    color: $black; 
}
a {
    color: $black;

    &.logo, &.logo-index, &.logo-one {
        color: $white;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}
h2 {
    font-size: 1.8em;
    font-family: "Exo 2", sans-serif;
    font-weight: bold;
    font-style: normal;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
    }
img {
    border-radius: .62em;
    margin: 1em;
    box-shadow: .31em .31em .8em 0px rgba(0,0,0,0.2);
}
.center {
    text-align: center;
    display: block;
}
#wrapper {
    width: 100%;
    height: 100%;
}
header {
    background-color: $black;
    color: $white;
    font-family: "RussoOne", sans-serif;
    div {
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        @media (max-width: 53em) {
            flex-direction: column;
        }
        
        .logo {
            font-size: 2.6em;
            text-align: center;
            flex: 1;
            @media (max-width: 28em) {
                font-size: 2em;
            }
        }
    }
    padding: .2em;
}
main {
    width: 90%;
    @media (max-width: 88em) {
        width: 75em;
    }
    @media (max-width: 74em) {
        width: 60em;
    }
    @media (max-width: 70em) {
        width: 54em;
    }
    @media (max-width: 56em) {
        width: 49em;
    }
    @media (max-width: 50em) {
        width: 40em;
    }
    @media (max-width: 41em) {
        width: 95%;
    }
    margin: 1em auto;
}
.br {
    display: block;
    background-color: $black;
    height: .12em;
    width: 100%;
}
footer {
    padding: 1em 0;
    text-align: center;
}