@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,700');



html    {
        background-color: #052d6e;
}
body {
    margin: 0 auto;
    font-family: 'Titillium Web', sans-serif;
    color: #fff;
    background-color: #052d6e;
    background: url(img/header-inv-blue.jpg) center top fixed no-repeat;
    background-size: cover;
}
ul  {
    list-style-type: circle;
}

header, footer, header nav, .hero, .textblock, .more {
    margin:0 auto;
    padding: 2em;
    max-width:960px;
}
.hidden {
    display:none;
}

/*****************************
    Header and navigation
******************************/

header   {
    background-color: #181818;
    padding:0 2em;
}
header nav {
    margin:0;
    padding:0;
    text-align:center;
}
header nav ul  {
    display:inline-block;
    font-size:1.5em;
}
header nav li {
    display:inline;
    margin:0;
    padding:0;
}
header nav a, nav a:visited    {
    color: #ffcd00;
    padding: 0.5em;
    text-decoration: none;
}
header nav a:hover {
    color: #181818;
    background-color: #ffcd00;
}

/********************
    Main content
********************/

.textblock   {
    background: linear-gradient(to bottom, #447bd4, #052d6e);
}
.textblock nav  {
    float: right;
    text-align: right;
    margin:0;
    padding:0;
}

.hero {
    font-family:Merriweather;
}
.intro {
    background-color:#222;
}
.book   {
    background-color:#ffa200;
    color:#181818;
}
.book a, .book a:visited {
    color:#181818;
}
.book a:hover, .book a:active    {
    color:#222;
    font-weight: 600;
}

.hero:after    {
    content: "";
    display:table;
    clear:both;   
}
.hero-content1 {
    padding:1.5em;
    width:250px;
    float:left;
}
.hero-content2 {
    margin: 1em auto;
    margin-left:250px;
    padding:0 2em;
    font-size:2em;
    line-height:1.6;
}
.details    {
    font-size:0.8em;
}

#profile    {
    border-radius: 20%;
}
#book   {
    width:240px;
}

section {
    align-items:center;
    justify-content: center;
    padding:1em;
    line-height: 1.5;
    font-size:1.5em;
}
hr  {
    border:0;
    height: 3px;
    background-image: linear-gradient(to right, rgba(68, 123, 212, 0), rgba(68, 123, 212, 0.75), rgba(68, 123, 212, 0));
}

h1 {
    color: #fff;
    font-family: Merriweather;
    text-align: center;
    font-size:4em;
}

h2 {
    font-family: Merriweather;
    font-weight: 300;
    color: #ffcd00;
    font-size:2em;
}

a {
    color: #ffcd00;
    cursor: pointer;
}
a:active, a:hover    {
    color: #ffe373;
}
a:visited   {
    color: #ffd940;
}

.more {
    background-color: #181818;
    font-family: Merriweather;
}
.more p {
    padding:0 1em;
    font-size:1.5em;
}

footer  {
    background-color: #111;
    text-align: right;
}
footer p    {
    font-size: 0.9em;
    padding: 0;
    margin: 0;
}


/******************************
Small fonts for small screens
*******************************/
@media only screen and (max-width:440px)    {
    body    {
        font-size: 0.8em;
    }
}
@media only screen and (max-width:680px){
    header nav ul   {
        font-size:1em;
    }
    .hero  {
        text-align:center;
        font-size:0.75em;
    }
    .hero-content1  {
        float:none;
        padding:0;
        margin-left:auto;
        margin-right:auto;
        width:100%;
    }
    .hero-content2 {
        margin:0.75em auto;
    }
    .hero-content2 ul {
        margin:0;
        padding:0;
        text-align: left; /* right now this is only for the related links for the book. looks ugly otherwise */
    }

}

/***********************
    Print rules
************************/
@media print    {
    html    {
        background-color:#fff;
    }
    body    {
        background-color:#fff;
        color:#111;
        font-size:0.6em;
    }
    nav, header, hr {
        display:none;
    }
    h1, h2  {
        color:#111;
    }
    .more, footer, wrapper, section {
        margin:0;
        padding:0.5em;
        color:#111;
        background-color:#fff;
    }
    .intro, .book   {
        background-color:#ccc;
    }
}