html {
    position: relative;
    min-height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: #E9E9E9;
    font-family: Oxygen, sans-serif;
}

header, footer, section, aside {
    display: block;
}

header, #content, footer {
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
}

#gameArea {
    float: left;
    width: 100%;
}

.tangram {
    display: none;
    width: 20%;
    margin-left: 6.66%;
    margin-right: 6.66%;
    margin-top: 2%;
    float: left;
    background-color: #BCBCBC;
    border-radius: 10px;
}

img {
    display: block;
    width: 70%;
    margin-top: 2%;
    margin-right: auto;
    margin-left: auto;
}

#game, #loading {
    display: none;
    width: 80%;
    margin-right: 10%;
    margin-left: 10%;
    background-color: #BCBCBC;
    border-radius: 10px;
    margin-top: 2%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#loading {
    background-color: #E9E9E9;
}

.tangram:hover {
    background-color: #FF9900;
}

.clear {
    clear: both;
}

#buttons {
    text-align: center;
    padding-top: 2%
}

button {
    font-family: Oxygen, sans-serif;
    font-size: 100%;
    height: 5%;
    color: #BCBCBC;
    background-color: #3299BB;
    padding-left: 2%;
    padding-right: 2%;
    width: 15%;
    border: none;
    border-radius: 20px;
}

button:hover {
    color: #3299BB;
    background-color: #BCBCBC;
}

.buttonText {
    display: inline;
}

svg text {
    font-family: FontAwesome, sans-serif;
}

#generate {
    display: none;
}

#select, #set, #hint, #sol {
    display: none;
    margin-left: 2%;
    margin-right: 2%
}

#explain {
    float: left;
    padding-top: 2%;
    padding-bottom: 2em;
}

#loadParagraph {
    display: block;
}

#chooseParagraph, #gameParagraph {
    display: none;
}

footer {
    font-size: 0.8em;
    height: 1.5em;
    position: absolute;
    bottom: 0;
    left: 0;
}

*:focus {
    outline: 0;
}

@media (max-width: 800px) {
    .buttonText {
        display: none;
    }
}