/* =============
|  Loading fonts
|============ */

@font-face {
    font-family: quicksand;
    src: local('Quicksand-Regular'), local('Quicksand Regular'),
         url(./Quicksand-Regular.ttf) format('truetype');
}

/* =============
|  General
|============ */

* { z-index: 1; }
html { margin 0; padding: 0; }
body { margin: 0; background: #FFF; font-size: 1.2em; font-family: quicksand; line-height: 1.5em; }

a { text-decoration: inherit; color: inherit; }

h1, h2, h3, h4 { padding: .5em 0; color: #646464; }
h2         { color: #F00; }

body > * { padding: 2em 5vw; }

a.buttonLike { padding: .8em 1.0em; background: #F00; color: #FFF;
               border: #D6D6D6; border-radius: .3em;
                box-shadow: 2px 2px 4px #D6D6D6, -2px -2px 4px #D6D6D6;
               transition: background .4s, color .4s; }
a.buttonLike:hover { background: #C11; color: #FFF; }

.centerVertically { vertical-align: middle !important; }

/* =============
|  Structure elements
|============ */

/* =======
|  Navigation
|====== */

body > nav     { position: sticky; top: 0; left: 0;
                 display: flex; padding-top: 0; padding-bottom: 0;
                 background: #333; color: #EEE; border-bottom: #D6D6D6; box-shadow: 2px 2px 4px #333; }
body > nav > * { display: inline-block; flex: 1; padding: .6em .5em; vertical-align: middle; }

nav > a[href="#bottom"] { text-align: right; padding: .4em .5em; }
nav > a[href="#bottom"]:before { content: " \002193 "; display: inline-block; padding: .2em .5em;
                                 background: #EEE; color: #333; border-radius: 100%;
                                 transition: background .4s, color .4s; }
nav > a[href="#bottom"]:hover:before { background: #F00; color: #FFF; }

/* =======
|  Sections
|====== */

section > div > div     { display: inline-block; width: 45%; vertical-align: top; }
section > div > div img { display: block; width: 100%; }

section > div > div:first-of-type { padding-right: 5%; }

/* =======
|  Defined lists (as <ul>)
|====== */

ul.dl             { margin: 0; padding: 0; }
ul.dl > li        { margin: 0; padding: 0; list-style: none; }
ul.dl > li:before { content: attr(data-title); }

/* =============
|  Animations
|============ */

@keyframes fade-in {
    from { opacity: .4; }
    to   { opacity:  1; }
}