* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #b3b399;
}

#game-form {
	height: 450px;
	width: 530px;
	background-color: #c3c3a9;
	position: relative;
	margin: auto;
	margin-top: 5px;
	border-radius: 5px;
}


/* Caption and hints */

@keyframes movcaption {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0);
	}
}

#caption {
	left: 0;
	top: 50px;
	position: absolute;
	width: 530px;
	animation-timing-function: linear;
	animation-name: movcaption;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

#caption p {
	position: relative;
	text-align: center;
	color: #3c3c3c;
	font-weight: bold;
	font-family: sans-serif;
	font-size: 27px;
	text-shadow: -2px 0 0 #979797;
}

#hint {
	position: absolute;
	left: 30px;
	top: 255px;
	font-family: sans-serif;
	font-size: 15px;
	color: #3c3c3c;
	z-index: 16;
}

#hint > p > span {
	font-size: 20px;
}

#description {
	position: absolute;
	bottom: 20px;
	width: 530px;
	color: #3c3c3c;
	font-family: sans-serif;
	font-size: 12px;
	text-align: center;
}


/* Level generator */

#generator {
	position: absolute;
	top: 10px;
	left: 0;
	height: 450px;
	top: 0;
	background-color: #c3c3a9;
	overflow: hidden;
	z-index: 12;
	border-radius: 5px;
}

.fbutton {
	position: absolute;
	width: 104px;
	height: 45px;
	background-color: #eeeeee;
	border: 2px solid #eeeeee;
	pointer-events: auto;
	top: 200px;
	transition: background-color 0.5s;
	
	color: #eeeeee;
	font-weight: bold;
	font-family: sans-serif;
	box-sizing: border-box;
	font-size: 14px;
}

.fbutton:after {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	right: -13px;
	top: 9px;
	transform: rotate(45deg);
	background-color: #eeeeee;
	z-index: 15;
	border-top: 2px solid #eeeeee;
	border-right: 2px solid #eeeeee;
	pointer-events: none;
	transition: background-color 0.5s;
}

.fbutton p {
	margin-left: 25px;
	transition: color 0.5s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#butt1 {
	background-color: #97bb97;
	left: 1px;
	pointer-events: none;
}

#butt1:after {
	background-color: #97bb97;
}

#butt1 p  {
	margin-left: 15px;
	color: #3c3c3c;
}

#butt2 {
	left: 103px;
}

#butt3 {
	left: 205px;
}

#butt4 {
	left: 307px;
}

#butt5 {
	left: 409px;
	display: flex;
	align-items:center;
}

#butt5 p {
	margin-left: 35px;
}

.shield {
	left: 0;
	width: 100%;
	position: absolute;
	z-index: 15;
}

#shield-top {
	top: 0;
	height: 200px;
}

#shield-bottom {
	top: 245px;
	height: 205px;
}

.step {
	position: absolute;
	width: 94px;
	height: 11px;
	opacity: 0;
	animation-timing-function: linear;
}

.step1 {
	left: 10px;
}

.step2 {
	left: 112px;
}

.step3 {
	left: 214px;
}

.step4 {
	left: 316px;
}

.step5 {
	left: 418px;
}

.step1:checked ~ #butt1 {
	pointer-events: auto;
}

.step1:checked ~ #butt1 p {
	color: #979797;
}

.step1:checked ~ #butt2 {
	background-color: #97bb97;
	pointer-events: none;
}

.step1:checked ~ #hint {
	display:none;
}

.step1:checked ~ #butt2:after {
	background-color: #97bb97;
}

.step1:checked ~ #butt2 p {
	color: #5c5c5c;
}

.step2:checked ~ #butt2 {
	pointer-events: auto;
}

.step2:checked ~ #butt2 p {
	color: #979797;
}

.step2:checked ~ #butt3 {
	background-color: #97bb97;
	pointer-events: none;
}

.step2:checked ~ #butt3:after {
	background-color: #97bb97;
}

.step2:checked ~ #butt3 p {
	color: #5c5c5c;
}

.step3:checked ~ #butt3 {
	pointer-events: auto;
}

.step3:checked ~ #butt4 {
	background-color: #97bb97;
	pointer-events: none;
}

.step3:checked ~ #butt4:after {
	background-color: #97bb97;
}

.step3:checked ~ #butt3 p {
	color: #979797;
}

.step3:checked ~ #butt4 p {
	color: #5c5c5c;
}

.step4:checked ~ #butt4 {
	pointer-events: auto;
}

.step4:checked ~ #butt5 {
	background-color: #97bb97;
	pointer-events: none;
}

.step4:checked ~ #butt5:after {
	background-color: #97bb97;
}

.step4:checked ~ #butt4 p {
	color: #979797;
}

.step4:checked ~ #butt5 p {
	color: #5c5c5c;
}

#expander {
	width: 530px;
	height: 10px;
	transition: width 0.5s;
}

.step5:checked ~ #expander {
	width: 0;
}

/* Arrange radiobuttons vertivcally */

.hei1 {
	margin-top: 269px;
}

.hei2 {
	margin-top: 259px;
}

.hei3 {
	margin-top: 249px;
}

.hei4 {
	margin-top: 239px;
}

.hei5 {
	margin-top: 229px;
}

.hei6 {
	margin-top: 219px;
}

.hei7 {
	margin-top: 209px;
}

.hei8 {
	margin-top: 199px;
}

.hei9 {
	margin-top: 189px;
}

.hei10 {
	margin-top: 179px;
}

.hei11 {
	margin-top: 169px;
}

.hei12 {
	margin-top: 159px;
}

.hei13 {
	margin-top: 149px;
}

.hei14 {
	margin-top: 139px;
}

.hei15 {
	margin-top: 129px;
}

.hei16 {
	margin-top: 119px;
}

.hei17 {
	margin-top: 109px;
}

/* randomizer animations */

@keyframes mov4 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes mov5 {
	0% {
		transform: translateY(20px);
	}
	50% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(20px);
	}
}

@keyframes mov14 {
	0% {
		transform: translateY(90px);
	}
	50% {
		transform: translateY(-40px);
	}
	100% {
		transform: translateY(90px);
	}
}


.step2,
.step4 {
	animation-name: mov4;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.step1,
.step3 {
	animation-name: mov5;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}


.step5 {
	animation-name: mov14;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

#generator:active .step {
	animation-play-state: paused;
}


/* Game*/

.container {
	top: 60px;
	width: 320px;
	position: absolute;
	counter-reset: cwin 0 cboom 9 cfail 9 copen 46;
	overflow: hidden;
	left: 105px;
	border-radius: 2px;
}

.rmine {
	width: 0;
	height: 0;
	top: -20px;
	left: -20px;
	opacity: 0;
	position: fixed;
	pointer-events: none;
	/*
	width: 40px;
	height: 35px;
    */
	/*display: inline-block;*/
	float: left;
}

/*
.rmine:indeterminate {
	opacity: 0.2;
}
*/

.field {
	width: 40px;
	height: 40px;
	background-color: #ececec;
	float: left;
	position: relative;
	white-space: nowrap;
	font-size: 1px;
}

.icon {
	position: absolute;
	content: "";
	z-index: 6;
	border: 7px solid #5c5c5c;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	left: 11px;
	top: 11px;
	pointer-events: none;
	display: none;
}

.icon:before {
	position: absolute;
	content: "";
	z-index: 6;
	border-left: 3px solid #5c5c5c;
	border-right: 3px solid #5c5c5c;
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
	width: 4px;
	height: 18px;
	top: -10px;
	left: -3px;
	pointer-events: none;
}

.icon:after {
	position: absolute;
	content: "";
	z-index: 6;
	border-top: 3px solid #5c5c5c;
	border-bottom: 3px solid #5c5c5c;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	width: 18px;
	height: 4px;
	top: -3px;
	left: -10px;
	pointer-events: none;
}


.cell {
	position: absolute;
	width: 38px;
	height: 38px;
	left: 1;
	top: 1;
	background-color: #5c5c5c;
	overflow: hidden;
	pointer-events: none;
	box-sizing: border-box;
	border-radius: 2px;
}

.cell:before {
	position: absolute;
	top: 3px;
	left: -29px;
	color: #5c5c5c;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 30px;
	z-index: 3;
}

.cell:after {
	content: "";
	position: absolute;
	display: block;
	width: 7px;
	height: 12px;
	top: 1px;
	left: 1px;
	border-top: solid magenta 5px;
	border-left: solid gray 2px;
	pointer-events: none;
	box-sizing: border-box;
	opacity: 0;
	z-index: 0;
}

.chk {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	opacity: 0;
}

.chk:checked {
	pointer-events: none;
}

.chk:checked ~ .cell {
	background-color: #ececec;
}

.chk:hover ~ .cell:after,
.achk:hover ~ .cell:after {
	opacity: 0.5;
}

.chk:checked ~ .cell:after {
	display: none;
}

.chk:checked + .flg:not(:checked) {
	pointer-events: none;
}

.flg {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 15px;
	margin: 0;
	opacity: 0;
	z-index: 1;
}

.flg:checked {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	counter-increment: cwin;
	z-index: 4;
}

.flg:hover ~ .cell:after {
	opacity: 1;
}

.flg:checked ~ .cell:after {
	width: 10px;
	height: 18px;
	top: 7px;
	left: 12px;
	border-top: solid red 7px;
	border-left: solid gray 2px;
	opacity: 1;
	z-index: 7;
}


/* Overlays */

.achk {
	position: relative;
	width: 40px;
	height: 40px;
	vertical-align: top;
	pointer-events: auto;
	opacity: 0;
}

.overlay {
	position: relative;
	width: 120px;
	height: 120px;
	margin-left: -80px;
	margin-top: -40px;
	background-color: #ececec;
	display: inline-block;
	pointer-events: none;
	opacity: 0;
	font-size: 1px;
	z-index: 2;
}


.achk:not(:indeterminate) + .overlay {
	opacity: 1;
	pointer-events: auto;
}

.shifter {
	font-size: 1px;
	letter-spacing: 520px;
	display: inline-block;
	height: 120px;
	margin-right: -521px;
	color: transparent;
	pointer-events: none;
}


/* Game End messages */

.message-dimmer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(238, 238, 238, 0.4);
	pointer-events: none;
	z-index: 5;
}

#boom-message p, #win-message-flags p, #fail-message p, #win-message p {
	margin: 0 auto;
	margin-top: 130px;
	width: 60%;
	text-align:center;
	font-size: 40px;
	font-weight: bold;
	background-color: rgba(238, 238, 238, 0.5);
	border-radius: 4px;
}


/* Boom message */
#boom {
	position: absolute;
	top: 0;
	left: -642px;
	height: 320px;
	width: 962px;
	pointer-events: none;
}

#boom-placeholder {
	position: relative;
	width: 320px;
	height: 320px;
	float: left;
}

#boom-message {
	position: absolute;
	width: 320px;
	height: 320px;
	z-index: 10;
	pointer-events: auto;
}

#boom-show {
	float: left;
}

#boom-show:before {
	letter-spacing: 320px;
	font-size: 1px;
	content: counter(cboom);
}

#boom-message p {
	color: red;
	border: 2px solid red;
}


/* Win message */
#win-open {
	position: absolute;
	top: 0;
	left: -962px;
	height: 320px;
	width: 1284px;
	pointer-events: none;
}

#win-open-placeholder {
	position: relative;
	width: 320px;
	height: 320px;
	float: left;
}

#win-message {
	position: absolute;
	width: 320px;
	height: 320px;
	z-index: 10;
	pointer-events: auto;
}

#win-open-show {
	float: left;
}

#win-open-show:before {
	letter-spacing: 320px;
	font-size: 1px;
	content: counter(copen);
}

#win-message p {
	color: blue;
	border: 2px solid blue;
}


/* Win-Fail by falgs */
#win-flags {
	position: absolute;
	top: 0;
	left: -642px;
	height: 320px;
	width: 962px;
	pointer-events: none;
	font-size: 1px;
}

#win-placeholder {
	float: left;
	width: 320px;
	height: 320px;
	pointer-events: auto;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}

#win-message-flags {
	position: relative;
	display: inline-block;
	width: 320px;
	height: 320px;
}

#fail-message {
	position: relative;
	display: inline-block;
	width: 320px;
	height: 320px;
}

#win-message-flags p {
	color: green;
	border: 2px solid green;
}

#fail-message p {
	color: magenta;
	border: 2px solid magenta;
}

#win-fail-placeholder {
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	height: 200px;
}

#win-show {
	float: left;
}

#win-show:before {
	letter-spacing: 320px;
	font-size: 1px;
	content: counter(cwin);
}

#fail-show {
	display: inline;
	margin-left: -640px;
}

#fail-show:before {
	content: counter(cfail);
	font-size: 1px;
	letter-spacing: 320px;
}


/* Flag-mode */

.flagmode {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 10px;
	z-index: 1;
	opacity: 0;
}

#fla1 {
	left: 105px;
}

#fla2 {
	left: 165px;
}

#fla3 {
	left: 225px;
}

#fla2:checked ~ .container > .field > .flg:not(:checked) {
	pointer-events: none;
}

#fla2:checked ~ .container > .field > .flg:not(:checked) ~ .cell:after {
	display: none;
}

#fla3:checked ~ .container > .field > .flg {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
}

#fla3:checked ~ .container > .field > .flg:not(:checked) ~ .cell:after {
	opacity: 0.5;
}

#fla3:checked ~ .container > .field > .flg:hover ~ .cell:after {
	opacity: 1;
}

.flagmode + div {
	width: 40px;
	height: 40px;
	background-color: #ececec;
	position: absolute;
	border-radius: 4px;
	pointer-events: none;
	top: 10px;
}

.flagmode:checked + div {
	border: solid 2px #050;
	margin-left: -2px;
	margin-top: -2px;
}

.flagmode + div:before {
	pointer-events: none;
}

#fla1 + div {
	left: 105px;
}

#fla2 + div {
	left: 165px;
}

#fla3 + div {
	left: 225px;
}

#fla1 + div:before {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	top: 10px;
	left: 10px;
	border-radius: 2px;
	background-color: #5c5c5c;
}

#fla1 + div:after {
	content: "";
	position: absolute;
	display: block;
	width: 7px;
	height: 12px;
	top: 3px;
	left: 3px;
	border-top: solid magenta 5px;
	border-left: solid gray 2px;
	pointer-events: none;
	box-sizing: border-box;
}

#fla2 + div:before {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	top: 7px;
	left: 7px;
	border-radius: 2px;
	background-color: #5c5c5c;
}

#fla3 + div:before {
	content: "";
	position:absolute;
	width: 10px;
	height: 12px;
	top: 8px;
	left: 14px;
	border-top: solid red 8px;
	border-left: solid gray 2px;
}

#flag-counter {
	position:absolute;
	top: 10px;
	right: 105px;
	background-color: #ececec;
	height: 20px;
	border-radius: 4px;
	padding: 10px;
	color: #3c3c3c;
	font-weight: bold;
	font-family: sans-serif;
	font-size: 16px;
	counter-increment: cwin -110;
}

#flag-counter > div {
	position: relative;
	display: inline-block;
	width: 0;
}

#flag-counter > div > div {
	background-color: #ececec;
	display: inline-block;
	position: abslute;
	color: transparent;
}

#flag-counter > div > div:before {
	position:absolute;
	color: #3c3c3c;
	content:":";
}

#flag-counter:before {
	content: "Flags";
}

#flag-counter:after {
	content: counter(cwin);
}


/* Bottom */

#new-game {
	position:absolute;
	top: 410px;
	right: 20px;
}

#nbutton {
	position: relative;
	display: inline-block;
	height: 32px;
	width: 104px;
	color: #3c3c3c;
	border: 2px solid #eeeeee;
	background-color: #97bb97;
	font-weight: bold;
	font-family: sans-serif;
	font-size: 14px;
	border-radius: 0;
	box-sizing: border-box;
}

#nbutton:after {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	right: -13px;
	top: 3px;
	transform: rotate(45deg);
	background-color: #97bb97;
	border-top: 2px solid #eeeeee;
	border-right: 2px solid #eeeeee;
}

#version {
	position:absolute;
	right:0;
	bottom:0;
	font-family: sans-serif;
	font-size: 10px;
	color: #3c3c3c;
}