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

#main {
    height: 100%;
    background-color: black;
}

@media (orientation: landscape) {
    html, body,
    #main {
        height: inherit;
    }
}

#header, #footer {
    font-family: 'hobbiton_brushhahobbitonbrush';
    font-size: 2em;
}

#header {
    color: white;
    width: 100%;
    max-width: 800px;
    margin: auto;

    -webkit-animation: glow_text 4s ease-in-out infinite alternate;
    -moz-animation: glow_text 4s ease-in-out infinite alternate;
    animation: glow_text 4s ease-in-out infinite alternate;

}

#hint {
    font-size: 1.25em;
}

#footer {
    padding-top: 50px;
    color: white;


    -webkit-animation: glow_text 2s ease-in-out infinite alternate;
    -moz-animation: glow_text 2s ease-in-out infinite alternate;
    animation: glow_text 2s ease-in-out infinite alternate;
}

#footer input {
    background-color: white;
    border: 1px solid #eee;
}

@-webkit-keyframes glow_text {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff;
    }
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #fafafa;
    }
}

@-webkit-keyframes glow_box {
    from {
      box-shadow: 0 0 10px #aaa, 0 0 20px #aaa;
    }
    to {
      box-shadow: 0 0 20px #aaa, 0 0 30px #555;
    }
}

#header textPath {
    fill: white;
}

.puzzler {
    padding: 2px 0 0 2px;
    margin: 0 auto 0 auto;

    background-image: url("../img/gate_vector.png");
    background-position: center;
    background-size: contain;
    background-color: white;

    border: 1px solid white;
    -webkit-animation: glow_box 1s ease-in-out infinite alternate;
    -moz-animation: glow_box 1s ease-in-out infinite alternate;
    animation: glow_box 1s ease-in-out infinite alternate;
}

.puzzler.solved {
    margin: 0 auto;
}

.puzzler div {
    float: left;
    background-image: url("../img/gate_photo.jpg");
    border: 1px solid #333;
    margin: -1px;
    cursor: pointer;

    -webkit-animation: glow_text 1s ease-in-out infinite alternate;
    -moz-animation: glow_text 1s ease-in-out infinite alternate;
    animation: glow_text 1s ease-in-out infinite alternate;
}

@keyframes fade_opacity {
    from {opacity: 100%;}
    to {opacity: 0%;}
}

#puzzle.solved div.puzzler div {
    animation-iteration-count: 1;
    animation-name: fade_opacity;
    animation-duration: 0.5s;
    opacity: 0%;
}

@keyframes fade_background {
    from {background-color: black;}
    to {background-color: white;}
}

#main.solved {
    animation-name: fade_background;
    animation-duration: 0.5s;
    background-color: white;
}

@keyframes fade_fill {
    from {fill: black;}
    to {fill: white;}
}

#main.solved svg path {
    animation-name: fade_fill;
    animation-duration: 0.5s;
    fill: white;
}

#loading {
    display: none;
}
#loading.solved {
    display: inline;
}

#footer.solved span,
#footer.solved form {
    display: none;
}