html, body {
    height: 100%;
    margin: 0;
}

.background {
    content: "";
    background-image: url('./background-krasner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.background > .layer {
    content: "";
    background-color: black;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.4;
}

h1.heading {
    font-size: 10rem;
    font-weight: bold;
    font-style: italic;
    font-family: 'Playfair Display', serif;
    margin-bottom: 0px;
    color: white;
}

h2.subheading {
    font-size: 2.5rem;
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: .8rem;
    color: white;
}

h3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2rem;
}

/* mobile */
@media (max-width: 800px) {
    h1.heading {
        font-size: 4rem;
    }

    h2.subheading {
        font-size: 1.5rem;
        letter-spacing: .3rem;
    }

    h3 {
        font-size: 1rem;
    }
}

a {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
}

a:visited {
    color: white;
}