@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Regular.ttf');
}

@font-face {
    font-family: 'Lobster Two';
    src: url('LobsterTwo-BoldItalic.ttf');
}

body {
    background-color: hsla(100, 20%, 30%, 1.0);    
    background-image: url('luonto_taustakuva.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: auto 300%;

    padding: 0;
    margin: 0 5ex;

    color: #eee;
    link-color: #eee;

    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 110%;
    border-top: 2px solid hsla(100, 40%, 80%, 0.4);
    padding-top: 2ex;
}

.content {
    max-width: 800px;
    margin: auto;
    background-color: hsla(100, 20%, 20%, 0.3);
}

.header {
    text-align: center;
    margin: 1em 0 0.5em 0;
    padding: 0.5em;
    font-family: 'Lobster Two', cursive;
    background-color: hsla(100, 20%, 20%, 0.7);
}

.quote {
    text-align: center;
    margin: auto;
    min-width: 60%;
    max-width: 80%;
}

.text {
    margin: 0;
    padding: 0.5em;
    background-color: hsla(100, 20%, 20%, 0.7);
}

a {
    color: #eee;
}

address {
    margin: 0 1em;
    text-style: italic;
    font-size: 90%;
}

.info {
    margin: 0 1em;
    padding: 0.5ex;
    font-style: italic;
    border-style: solid;
    border-width: 2px;
    border-color: hsla(100, 40%, 80%, 0.4);
}