body {
    font-family: 'Muli', sans-serif;
    font-size: 12px;
    background: url('../images/ruimte2.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow:hidden;
}

#func {
    width: 100vw;
    /*height:100vh;*/
    color: #444;
    /*min-width: 520px;*/
}
img {
    position: fixed;
    bottom:3em;
    left:2.5em;
    width:1.5em;
    z-index:100;
}
h1 {
    color:#006E99;
    font-size: 2em;
    position: fixed;
    bottom:2em;
    left:3em;
    cursor: pointer;
}
h2 {
    font-size: 2em;
    color:#888;
    position: fixed;
    bottom:3em;
    left:3em;
    cursor: pointer;
}

h3 {
    width: 100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 div {
    background-color: #006E99;
    opacity: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:2em;
}

h3 div a {
    line-height: 2em;
    color: white;
    font-size: 2em;
}
#hand {
    position: absolute;
    width:20vw;
    left:calc(50vw - 10vw);
    bottom:10vh;
}
.def {
    position:absolute;
    top:10vh;
    width: 30vw;
}
.popup {
    animation-name: popup;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
@keyframes popup {
    from{
        top:100vh;
    }
    to{
        top:10vh;
    }
}