@import 'https://fonts.googleapis.com/css?family=Raleway|Crimson+Text|Open+Sans';

body {
    z-index: 500;
    max-width: 960px;
    font-family: 'Crimson Text';
    margin: 0 auto;
    font-size: 1.2em;
}

header h1,
h2,
h3 {
    font-family: 'Raleway', sans;
}

header h1 {
    font-size: 3em;
    text-align: center;
}

h3 {
    font-size: 1.5em;
    margin: 0;
}

nav#category-selector {
    display: none;
    visibility: hidden;
    text-align: center;
    display: block;
}

nav#category-selector ul {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}

nav#category-selector ul li {
    list-style-type: none;
    display: inline;
    margin: 3px;
}

#yearly-stats {
    display: block;
    padding: 1em 2em;
    margin: 1em;
    background-color: #e5ffe5;
    overflow: hidden;

    --item-height: 1.5em;
    --visible-items: 4;
    --total-original-items: 4;
}

.ticker-wrap {
    height: calc(var(--item-height) * var(--visible-items));
    overflow: hidden;
    margin-top: 1em;
    border: 1px solid black;
}

.ticker-list {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: scroll-up 15s linear infinite;
}

.ticker-list li {
    height: var(--item-height);
    line-height: var(--item-height);
    white-space: nowrap;
    /* Prevents text from going to the next line */
    overflow: hidden;
    /* Hides the text that overflows the width */
    text-overflow: ellipsis;
    margin: 0em 0em;
    padding: 0;
}

/* Pause scrolling on hover for better UX */
.ticker-wrap:hover .ticker-list {
    animation-play-state: paused;
}

@keyframes scroll-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(var(--total-original-items) * -1 * var(--item-height)));
    }
}

main pre {
    white-space: pre-wrap;
}

main section {
    display: block;
    padding: 1em 2em;
    margin: 1em;
}

main section.fiction {
    background-color: #e5fffb;
}

main section.non-fiction {
    background-color: #ffe9fb;
}

main section.article {
    background-color: rgb(252, 255, 225);
}

main section ul {
    list-style-type: '|';
    margin: 10px auto;
    padding: 0px;
    display: block;
    text-align: center;
}

main section ul li {
    display: inline-block;
    padding: 0.3em;
    margin: 0.1em auto;
    border: 1px solid;
}

main section div {
    color: white;
    background-color: black;
    margin: 0.5em;
    padding: 1em;
}

#contact-details ul {
    list-style: none;
    padding: 0px;
}

#contact-details ul li {
    padding: 0.5em;
    padding-left: 30px;
}

a {
    color: #0095dd;
    text-decoration: none;
}

a:hover {
    color: white;
    background-color: #0095dd;
}

a.highlighted {
    color: white;
    background-color: #0095dd;
}

#contact-details li#email {
    background: url("images/email.png") 0px center no-repeat;
}

#contact-details li#facefiction {
    background: url("images/facefiction.png") 0px center no-repeat;
}

#contact-details li#github {
    background: url("images/github.png") 0px center no-repeat;
}

#contact-details li#address {
    background: url("images/address.png") 0px center no-repeat;
}

#contact-details li#resume {
    background: url("images/resume.png") 0px center no-repeat;
}

#contact-details li#linkedin {
    background: url("images/linkedin.png") 0px center no-repeat;
}

#cool-stuff dt {
    padding-bottom: 0.1em
}

#cool-stuff dd {
    padding-bottom: 0.5em;
}

aside {
    display: none;
}

@media only screen and (min-width:960px) {
    header h1 {
        text-align: left;
    }

    main section {
        flex-flow: row nowrap;
    }

    main section div {
        width: 28%;
        padding: 2%
    }

    aside {
        display: block;
        font-family: monospace;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }

    aside a {
        color: blue;
    }
}