@font-face {
    font-family: roboto;
    src: url('Roboto-LightItalic.ttf');
}
@font-face {
    font-family: emily;
    src: url('emilys-candy.regular.ttf');
}

@keyframes rainbow { /* unused */
    0% { color: hsl(25, 100%, 87%); }
    20% { color: hsl(25, 100%, 97%); }
    50% { color: hsl(55, 100%, 84%); }
    80% { color: hsl(55, 100%, 97%); }
    100% { color: hsl(25, 100%, 87%); }
}
@keyframes spin {
    0% { transform: rotateY(0deg); }
    85% { transform: rotateY(0deg); }
    92% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}


html, body {
    height: 80%;
}
body {
    background-image: url("hafing.jpg");
    background-size: cover;
}
.hidden {
    opacity: 0;
    overflow: hidden;
    font-size: 0;
}
main {
    color: white;
    position: relative;
    top: 30%;
    text-align: center;
    text-shadow:
            1px 1px 3px black,
            1px 1px 10px black,
            1px 1px 20px black,
            1px 1px 30px black;
}
.jmeno {
    display: none;
}
main > h1 {
    animation: spin 7s infinite;
    transition-timing-function: linear;
    font-size: 8em;
    font-family: emily;
    margin-bottom: 0;
}
.minitext {
    font-size: 1.1em;
    font-family: roboto;
    margin-top: 0;
    text-shadow:
            1px 1px 3px black,
            1px 1px 10px black,
            0px 0px 5px black,
            1px 1px 2px black,
            1px 0px 2px black;
}
.email {
    font-style: italic;
    position: relative;
    top: -1em;
}


@media screen and (max-width: 700px) {
    body {
        background-image: url("hafingsmall.jpg");
    }
    main > h1 {
        font-size: 6em;
    }
    .jmeno {
        display: block;
    }
    .email {
        top: -0.8em;
    }
}
@media screen and (max-width: 500px) {
    main > h1 {
        font-size: 4em;
    }
}