body {
    font-family: 'VT323', monospace;
    background-color: #c6e9c9;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
}

main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-direction: column;
    margin: 0 4%;
    width: 100%;
    max-width: 470px;
}
section#board {
    width: 100%;
    max-width: 310px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.line {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 15px;
}

 .line:nth-child(even) {
 	flex-direction: row-reverse;
 }

 .field {
    border: solid #fff;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    background-color: #fff;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #a2bea4;
    pointer-events: none;
}

 .field.active {
 	cursor: pointer;
 	pointer-events: all;
 }

 .field.active:hover {
 	box-shadow: 0px 0px 0px 3px #fff;
 }

 .field.active {
 	color: #000;
 }

 .path,
 .ladder {
 	border: solid 4px #fff;
 	position: absolute;
 	z-index: 0;
 }

 .path {
    top: 15px;
    left: 30px;
    right: 30px;
}

.line:nth-child(odd) .ladder {
    right: 15px;
}
.line:nth-child(even) .ladder {
    left: 15px;
}
.ladder {
    top: 30px;
    bottom: -30px;
}

 #ghost {
 	width: 30px;
 	height: 30px;
 	background-image: url('ghost_1.png');
 	background-size: contain;
 	background-repeat: no-repeat;
 	background-position: center;
 	position: absolute;
	left: 0;
	top:0;
 	z-index: 100;
 	pointer-events: none;
 }

 #screen {
 	background-color: rgba(0, 0, 0, 0.05);
 	border-radius: 30px;
 	width: 100%;
 	max-width: 470px;
 	max-height: 450px;
 	margin: 3% auto;
 	background-size: cover;
 	background-position: center;
 	background-image: url('pixelart/schriftzug.gif');
 }

 #pixel {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
 	pointer-events: none;
 	background-image: url('pixel.png');
 	z-index: 200;
 	opacity: 0.3;
 }



 /********************* PLAYER  **************************/

 #controls {
 	display: flex;
 	position: fixed;
 	justify-content: center;
 	z-index: 200;
 	top: 0;
 	left: 0;
 	background: #000000;
 	transition: all 0.3s;
 }

 #controls.hidden {
 	left: -200px;
 }

 #controls>div {
 	margin: 15px 12px 10px 0px;
 	cursor: pointer;
 }

 #play:before,
 #play:after {
 	content: '';
 	position: absolute;
 	background-color: inherit;
 }

 #play, #play:before, #play:after {
 	width: 15px;
 	height: 15px;
 }

 #controls #play {
 	background-color: #fff;
 	transform: rotate(30deg) skewX(-30deg) scale(1, .866);
 	margin: 20px 15px 20px 22px;
 }

 #controls #play.active, #controls #play:hover {
 	background-color: #acd4b0;
 }

 #play:before {
 	transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
 }

 #play:after {
 	transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
 }

 #pause span {
 	display: inline-block;
 	width: 10px;
 	background: #fff;
 	height: 25px;
 	margin-right: 5px;
 }

 #stop {
 	background: #fff;
 	width: 25px;
 	height: 25px;
 }

 #stop:hover,
 #pause:hover span,
 #pause.active span {
 	background-color: #acd4b0;
 }

 #alert {
 	pointer-events: none;
 	opacity: 0;
 	border-radius: 0.8em;
 	font-size: 1.2em;
 	position: absolute;
 	top: 3em;
 	text-align: center;
 	background: #594749;
 	box-shadow: 0px 0px 20px rgb(0 0 0 / 80%);
 	z-index: 100;
 }

 section#alert p {
 	margin: 13px;
 	font-size: max(2.2vw, 0.9em);
 }

 #credits {
 	font-size: 15px;
 	position: absolute;
 	bottom: 0px;
 	right: 0px;
 	background-color: #000000;
 	color: #979797;
 	padding: 6px 10px;
 	z-index: 5;
 }

 #credits a {
 	color: #f1e4db;
 }