html { 
    background: black url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-size: 2em;
}

body {
    font-family:'Courier New', Courier, monospace;
    color:#eee;
    margin:2em 5em;
    text-align:center;
}

svg { fill: #eee; }

.logo {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: center;

}
.logo svg {
    width: 200px;
}

h1 { font-size:1.5em; margin:0.5em 0 0 0; }
h2 { font-size:1.2em; margin:0.5em 0 0 0; }
p strong { font-size: 1.1em; }

input.code {
    font-family:inherit;
    background:rgba(255,255,255,0.2);
    color:#eee;
    font-size:1.2ex;
    padding:0.5em;
    margin:1em 0;
    width:40vw;
    text-align:center;
    font-weight:bold;
    border:2px solid #ccc;
}

input.code:invalid {
    color:#a60000;
    border-color:#a60000;
}

@media screen and (max-width: 600px) {
    html { font-size:3vw; }
    body { margin:1em 2em; }
    .logo svg { width: 60vw; }
    input.code {
        width:100%;
        font-size: 2.5ex;
    }
}