* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body {
    font: 100%/1 Tahoma, Geneva, sans-serif;
}
canvas:focus {
    outline: none;
}
h2 {
    font: bold 0.9rem/1 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.12em;
    margin-bottom: 0.7em;
}
h2::first-letter {
    letter-spacing: 0.05em;
}
button {
    color: #fff;
    background: #929191;
    border-radius: 4px;
    border: none;
    outline: none;
    font: bold 0.7rem/1 "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 1.2em;
}
button:hover {
    background: #ff9682;
    cursor: pointer;
}
button:active{
    background: #ff6961;
}
button:disabled, button:disabled:hover, button:disabled:active {
    opacity: 0.3;
    background: #929191;
    cursor: default;
}
fieldset {
    border:none;
}
input {
    vertical-align: middle;
}
label {
    margin-right: 0.6em;
}
.form_btns {
    margin-top: 2.4em;
    text-align: right;
}
input[type=text] {
    vertical-align: baseline;
    padding: 0 0.3em;
    margin: 0.6em 0.1em;
    font-size: 1em;
    line-height:1.8;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #eee;
    box-sizing: border-box;
    text-align: center;
}
input[type=text].invalid {
    border: 1px solid #f00;
}
.flexrow {
    display:flex;
    flex-direction: row;
    flex-flow: row wrap;
    align-items: center;
}
.grow {
    flex-grow: 1;
}
.right {
    text-align: right;
}
#puzzle {
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    width: 50%;
    border-right:1px solid #aaa;
    z-index: 1;
}
#solution {
    position:absolute;
    top:0;
    bottom: 0;
    right:0;
    width: 50%;
    z-index: 0;
}
.threeScene h2 {
    position: absolute;
    top:0;
    left:0;
    margin: 0.6em;
}
#controls {
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 50%;
    z-index: 2;
    background: #fff;
    border-right: 1px solid #aaa;
    border-top: 1px solid #aaa;
    padding: 0.6em 0 0.6em 0;
    text-align: center;
}
body.oversize #controls {
    border-right: none;
    width: 100%;
}
#controls_inner {
    display: inline-block;
    padding: 0 0.6em;
}
#controls_inner > * {
    margin: 0 0.2em;
    vertical-align: middle;
}
#controls .sliders {
    display: inline-block;
    text-align: right;
    margin-right: 1.6em;
}
#controls .sliders .slider {
    margin-bottom: 0.6em;
}
#controls .sliders .slider:last-child {
    margin: 0;
}
#controls .sliders label {
    margin-right: 0.3rem;
}
#controls .control_btns {
    display: inline-block;
    margin: 0 0.2em;
}
#shade {
    transition: all 0.1s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(238, 238, 238, 0.99);
    visibility: hidden;
    opacity: 0;
}
.modal {
    transition: all 0.1s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
}
.modal_inside {
    padding: 0.6em;
}
#puzzle_name {
    text-align: left;
}
#dimensions {
    margin-right: 2.4em;
}
p.solved_msg {
    text-align: center;
    font-weight: bold;
}
#congrats_mod .form_btns {
    text-align: center
}

body.shade #shade {
    visibility: visible;
    opacity: 1;
}
body.congrats #congrats_mod {
    visibility: visible;
    opacity: 1;
}
body.generate #generate_mod {
    visibility: visible;
    opacity: 1;
}