body {
    font-family: 'Vollkorn', serif;
    color: #46433A;
    background-color: #F1EED9;
}

.wrapper {
    /* margin-top: 10%; */
    bottom: 0;
    margin: 40% auto auto auto;
}

header,
main {
    padding: 0 20px;
}

/*** anchor tags ***/
a:link,
a:visited,
a:hover,
a:active {
    color: #CE534D;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*** main content list ***/
.main-list-item {
    font-weight: bold;
    font-size: 1.2em;
    margin: 0.8em 0;
}

/* override the left margin added by font awesome for the main content list,
since it must be aligned with the content */
.fa-ul.main-list {
    margin-left: 0;
}

/* list icons */
.main-list-item-icon {
    width: 36px;
    color: #46433A;
}

/*** logo ***/
.logo-container {
    text-align: center;
}

.logo {
    width: 96px;
    height: 96px;
    display: inline-block;
    background-size: cover;
    border-radius: 50%;
    -moz-border-radius: 50%;
    border: 2px solid #F1EED9;
    box-shadow: 0 0 0 3px #46433A;
}

/*** author ***/
.author-container h1 {
    font-size: 2.8em;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}

/*** tagline ***/
.tagline-container p {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 2em;
}

/******/
hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, transparent, #46433A, transparent);
    background-image: -moz-linear-gradient(left, transparent, #46433A, transparent);
    background-image: -ms-linear-gradient(left, transparent, #46433A, transparent);
    background-image: -o-linear-gradient(left, transparent, #46433A, transparent);
}

/*** footer ***/
footer {
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    text-align: center;
}

/*** media queries ***/
/* X-Small devices (phones, 480px and up) */
@media (min-width: 480px) {

    /* wrapper stays 480px wide past 480px wide and is kept centered */
    .wrapper {
        width: 480px;
    }
}

/* All other devices (768px and up) */
@media (min-width: 768px) {

    /* past 768px the layout is changed and the wrapper has a fixed width of 680px
	to accomodate both the header column and the content column */
    .wrapper {
        width: 680px;
        margin: 65vh 16vw auto auto;
    }

    /* the header column stays left and has a dynamic width with all contents
	aligned right */
    header {
        float: left;
        width: 46%;
        text-align: right;
    }

    .author-container h1,
    .logo-container,
    .tagline-container p {
        text-align: right;
    }

    main {
        width: 46%;
        margin-left: 54%;
        padding: 0;
    }
}