body {
    font-family: Ysabeau;
    background-color: DarkSlateGrey;
    color: ivory;
    font-size: 130%;
    text-align: center;
    padding: 3rem 1rem;

    background: url(/img/haschnasental-bg.jpg) no-repeat center center fixed; 
    background-size: cover;
    
    /*
    position: fixed;
    left: 0%;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    */
}

a {
    color: gold;
}
a:visited {
    color: ivory;
}
a:active {
    color: tomato;
}

a.download:before {
    content: "↓ ";
}
a.ext:before {
    content: "↗ ";
}

.left {
    text-align: left;
}

h1, h2 {
    margin: 0;
    padding: 0;
    text-shadow: #333 3px 3px 6px;
}

h1 {
    color: Gold;
    font-size: 400%;
    font-variant-caps: small-caps;
    font-weight: 300;
    margin-bottom: 1rem;
}

h2 {
    font-weight: 600;
    XXbackground-color: #444;
}

#solve {
    cursor: pointer;
}

h1 i, h1 b {
    font-weight: inherit;
    font-style: inherit;
}

h1 i {
    XXdisplay: none;
}

h2 i {
    display: block;
    text-align: center;
}

.huge {
    font-size: 300%;
}

footer {
    display: none;
    text-align: center;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 40em) {
    h1 {
	font-size: 200%;
	font-weight: 500;
    }
    .huge {
	font-size: 200%;
    }
}