@import url(https://fonts.googleapis.com/css?family=IM+Fell+English);

html {
    min-height:100%; 
    padding:0; 
    margin:0;
    color: #cccccc;
    background-color: #493c2b;
    font-family: 'IM Fell English', serif;
    font-weight: 400;
}

canvas {
    /* iOS bug */
    border-radius: 1px;
}

#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}

.table {display:table; width:100%; height:100%;}
.row {display:table-row;}
.cell {display:table-cell;}

.middle {
    height: 100%;
}
.top {
    text-align: center;
}
.bottom {
    text-align: center;
}

#gameContainer {
    margin: 0 auto;
    width: 95%;
    height: 95%;
}

.no-select {
    user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

.credits {
    padding: 0 0.5em;
}

#gameCanvas {
    background-color: #493c2b;
}

h1 {
    font-weight: normal;
    letter-spacing: 3px;
    font-size: 4em;
}

a {
    color: #57a6ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#touch-controls {
    display: none;
    margin: 0;
}

#keyboard-controls {
    display: none;
    font-size: 1.5em;
}

#touch-controls button {
    font-size: 2em;
    font-family: inherit;
    color: inherit;
    padding: 0 15px;
    margin: 0 10px;

    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    border: 0;
    box-shadow:none;
    background-image: none;
    background-color: transparent;
}

*:focus {
    outline: 0;
}

button::-moz-focus-inner {
  border: 0;
}

#touch-controls button:active {
    border: 0;
    color: #57a6ff;
}

#loading {
    position: absolute;

    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);

    top: 50%;
    left: 50%;
    font-size: 2em;
    letter-spacing: 1px;
}

#errormessage {
    color: red;
    margin: 0;
}

#debug {
    color: red;
    display: none;
    position: absolute;
}

@media screen and (max-width: 720px), screen and (max-height: 800px) {
    h1 {
        font-size: 3em;
    }
    #touch-controls button {
        font-size: 1.5em;
    }
    #loading {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 540px) {
    h1 {
        font-size: 2em;
    }
    #loading {
        font-size: 1.3em;
    }
    .credits {
        font-size: 85%;
    }
}

@media screen and (max-width: 400px) {
    h1 {
        font-size: 1.6em;
    }
    #touch-controls button {
        font-size: 1.5em;
    }
    #loading {
        font-size: 1em;
    }
    .credits {
        font-size: 60%;
    }
}