@import url('https://fonts.googleapis.com/css?family=Lato:300');
@import url('https://fonts.googleapis.com/css?family=Cormorant:500,500i');

html {
    font-family: "Gill Sans", "Lato", sans-serif;
    font-weight: lighter;
}

h1, h2, h3, h4, th {
    font-family: "Cochin", "Cormorant", serif;
    font-weight: bolder;
}

.subtitle {
    font-family: "Cochin", "Cormorant", serif;
}

.subtitle, h3, h4 {
    font-style: italic;
    font-size: 1.2em;
}


body {
    margin: 2em 10%;
}

h1, h2, h3, h4, p, table {
    margin: 0.5em 0;
}

h1, h2, h3, h4 {
    margin-top: 1em;
}

h1, h2 {
    padding-top: 0.5em;
}

.subtitle {
    margin-top: -1em;
}

p, li {
    line-height: 1.5;
}

th, td {
    vertical-align: top;
    padding: 0 5px;
}

section::before {
    position: absolute;
    left: 0;
    content: " ";
    display: block;
    border-top: 1px solid grey;
    width: 100%;
    z-index: -10;
}

.egotrip {
    max-width: 40%;
    float: right;
    margin-left: 1em;
    border: 1px solid transparent; /* same thickness as section top border */
}

a {
    color: grey;
}

q {
    quotes: "‘" "’"; /* '' ‘’ ❛❜ "" “” ❝❞ «» ‹› ❮❯ */
    font-style: italic;
}


@media only screen and (min-width: 650px) {
    body {
        margin-left: 0;
    }

    body::before {
        position: fixed;
        top: 0;
        left: 17%;
        content: " ";
        display: block;
        border-left: 1px solid grey;
        height: 100%;
        z-index: -10;
    }

    section {
        margin-left: -20%;
        padding-left: 40%;
        margin-right: 5%;
    }

    h3 {
        float: left;
        width: 20%;
        margin-left: -24%;
        margin-top: 0;
        text-align: right;
    }    
}


@media print {
    body {
        font-size: 80%;
    }

    div {
        page-break-before: avoid;
        break-inside: avoid;
    }

    a {
        text-decoration: none;
    }

    .pagebreak {
        break-before: always;
        page-break-before: always;
    }

    .egotrip {
        max-width: 35%;
    }
}