html, body {
height: 100%;
margin: 0;
color: #fff;
}
html {
background: #333;
}
body {
position: relative;
font-size: 9px;
width: 35em;
background-color: #000;
margin: 0 auto;
}
main{
width: 24em;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 1em;
text-align: center;
}
button {
width: 100%;
}

.game{
position: relative;
}
.matches {
text-align: center;
}
.matches img{
padding: 1em;
width: 1em;
height: 10em;
border-radius: 1.5em;
}
.matches:not(.ignored) img:not(.removed):hover{
background: #333;
}
div.matches img.removed {
opacity: 0.1;
}
div.matches img.transition {
background: #ffc;

-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
-ms-transition: opacity 2s;
-o-transition: opacity 2s;
transition: opacity 2s;
}

div.turns {
padding: 2em 0;
}
.turns div {
width: 50%;
font-size: 2em;
display: inline-block;
text-align: center;
}
.turns p {
margin: 0.25em 0;
}
.active {
color: #ffc;
font-weight: bold;
}
.turns :not(.active) button {
display: none;
}

.winner,
.overlay,
.mask {
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.dialog {
position: relative;
top: 50%;
font-size: 1.5em;

-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.hidden{
display: none;
}
.mask{
background: rgba(0,0,0,0.8);
}

.winner .dialog{
text-align: center;
}
.winner p{
font-size: 2.5em;
}

.instructions.closed {
display: none;
}
input#rules{
position: absolute;
clip: rect(0,0,0,0);
}
#rules+label {
position: absolute;
top: 0;
right: 0;
width: 4em;
font-size: 1.5em;
text-align: center;
color: #444;
background: #000;
border: 1px #444 solid;
border-bottom: 1px #222 solid;
border-right: 1px #222 solid;
}
#rules:checked+label{
color: #000;
background: #666;
border: 1px #444 solid;
border-bottom: 1px #888 solid;
border-right: 1px #888 solid;
}