html {
    background: #000 url("../bg.png") center no-repeat;
    background-size: cover;
    color: #fff;
    font-family: sans-serif;
    font-size: 24pt;
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
}

#credit {
    color: #777;
    font-size: 9pt;
    position: absolute;
    margin-top: -30px;
    margin-left: -100px;
    left: 50%;
    text-align: center;
    top: 100%;
    width: 200px;
}

#credit a {
    color: #aaa;
}

#table {
    display: table;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

#table-cell {
    display: table-cell;
    vertical-align: middle;
}

#error {
    color: #f30;
    text-align: center;
}

#title {
    border-bottom: 1px solid white; 
    font-size: 150%;
    margin: 15px auto 25px auto;
    padding-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 600px;
}

#wrapper {
    margin: 0 auto;
    padding: 20px;
    text-shadow: 1.5pt 1.5pt 0 #000;
    vertical-align: middle;
    max-width: 600px;
}

.option {
    color: #9ac;
    cursor: pointer;
    #font-weight: bold;
    margin: 10px 0;
}

.option:hover {
    color: #cdf;
}

.text {
    margin: 25px 0;
}

@media screen and (max-width: 600px)
{
    body {
        font-size: 6vw;
    }
    #wrapper {
        max-width: 100%!important;
        padding: 5vw;
    }
}

@media screen and (max-height: 600px)
{
    body {
        font-size: 4vh;
    }
    #wrapper {
        max-width: 60%;
    }
    #credit {
        font-size: 2vh;
    }

    .text {
        margin: 5vh 0;
    }
}