@import url( 'https://fonts.googleapis.com/css?family=Pacifico');
@import url( 'https://fonts.googleapis.com/css?family=Nunito');

:root {
    --black: #090909;
    --background-grey: #dfe5e6;
    --orange: #F18F01;
    --white: #f7f7f7;
    --main-font: 'Nunito', sans-serif;
    --decorative-font: 'Pacifico', cursive;
}

/*
 * BODY
 */

body {
    background-color: var(--background-grey);
    color: var(--black);
    font-family: var(--main-font);
}

.box {
    box-shadow: none;
    color: var(--black);
}

.tile {
    padding: 1em;
}

.posts-title {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--orange);
}

.posts-title:hover,
.posts-title:visited {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--orange);
}

/*
 * NAVIGATION BAR
 */

/* TODO Improve header style */

#header {
    background-color: var(--black);
    color: var(--white);
}

.brand {
    font-family: var(--decorative-font);
    color: var(--white);
}

a.brand:visited,
a.brand:hover {
    font-family: var(--decorative-font);
    color: var(--white);
}

.header-link {
    color: var(--white);
    text-decoration: none;
}

.header-link:visited,
.header-link:hover {
    color: var(--white);
    text-decoration: underline;
}

/*
 * HERO
 */

#splash {
    background: url(/img/bg.png);
    text-align: center;
}

#splash-title {
    color: var(--white);
    background-color: var(--black);
    padding: 5%;
    margin-left: auto;
    margin-right: auto;
    font-size: 7vh;
}

/*
 * FOOTER
 */

.footer {
    background-color: var(--black);
    color: var(--white);
}

.footer-link {
    font-size: 1.5em;
    color: var(--white);
}

.footer-link:visited,
.footer-link:hover {
    color: var(--white);
}

/*
 * MAIN PAGE SPECIFICS
 */

.hero.is-info {
    background-color: var(--white);
}

.hero.is-info .title,
.hero.is-info .subtitle,
.hero.is-info .subtitle a:not(.button),
.hero.is-info .subtitle strong {
    color: var(--black);
}

.email-link {
    text-decoration: underline;
    text-decoration-color: var(--orange);
}

/*
 * POST SPECIFICS
 */
article h1,
article h2,
article h3,
article a {
    text-decoration: underline;
    text-decoration-color: var(--orange);
    color: var(--black);
}

article a:visited,
article a:hover {
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--orange);
}

#filter {
    width: 80%;
}