* {
	/* border: solid red 1px; */
}

body {
	background-image: url(image/bricks/bricks_small.png);
	background-size: 20%;
	image-rendering: pixelated;
	cursor: url(empty.png), auto;
	overflow: hidden;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#container {
	display: grid;
	grid-template-columns: 20vh 75vh 6vh;
	grid-template-rows: 20vh 75vh 6vh;
	grid-template-areas: 
	"top_left top top_right lives "
	"left field right won"
	"bottom_left bottom bottom_right won";
	width: 98vw;
}

#top_left {
	grid-area: top_left;
	border-image-source: url(image/border_small/border_top_left_small.png);
	border-image-slice: 16% 20% 20% 20%;

}

#playing_field {
	display: grid;
	text-align: center;
	grid-area: field;
}

.cell {
	border-image-source: url(image/border_small/border_small.png);
	border-image-slice: 20%;
	background: url(image/cells_small/cell_small.png);
	background-position: 50% 50%
}

.cell:not(.right, .wrong, .mistake):hover {
	background: url(image/cells_small/cell_hover_small.png);
	background-position: 50% 50%

}

.ZelleAktiv1 {
}

.right {
	background: url(image/cells_small/cell_diamond_small.png);
	background-position: 50% 50%;
}

.wrong {
	background: url(image/cells_small/cell_wrong_small.png);
	background-position: 50% 50%
}

.mistake {
	background: url(image/cells_small/cell_mistake_small.png);
	background-position: 50% 50%;
}

#numbers_top {
	display: grid;
	text-align: right;
	grid-area: top;
	font-family: GothicPixels;
	
}

.spalte {
	writing-mode: vertical-rl;
	text-orientation: upright;
	border-image-source: url(image/border_small/border_top_small.png);
	border-image-slice: 16% 20% 20% 20%;
	padding-bottom: 2vh;
}

#numbers_left {
	display: grid;
	grid-template-columns: 1fr;
	grid-area: left;
	text-align: right;
}

.zeile {
	border-image-source: url(image/border_small/border_left_small.png);
	border-image-slice: 20% 20% 20% 16%;
	padding-right: 2vh;
}

#won {
	grid-area: won;
	margin: 2vw;
	text-align: center;
	font-family: GothicPixels;
	color: #F00;
	font-size: 13vw;
	text-shadow: #000 2px 2px;
	
}

#lives {
	grid-area: lives;
	text-align: center;
	font-family: GothicPixels;
	color: #F00;
	font-size: 6.5vw;
	text-shadow: #000 2px 2px;
	padding-top: 2vh;
}
	
#top_right {
	grid-area: top_right;
	border-image-source: url(image/border_small/border_top_right_small.png);
	border-image-slice: 16% 20% 20% 20%;
}

#right {
	grid-area: right;
	display: grid;
}

.zeileRight {
	border-image-source: url(image/border_small/border_right_small.png);
	border-image-slice: 20% 20% 20% 20%;
}

#bottom_right {
	grid-area: bottom_right;
	border-image-source: url(image/border_small/border_bottom_right_small.png);
	border-image-slice: 20% 20% 20% 20%;
}

#bottom {
	grid-area: bottom;
	display: grid;
}

.spalteBottom {
	border-image-source: url(image/border_small/border_bottom_small.png);
	border-image-slice: 20% 20% 20% 20%;
}

#bottom_left {
	grid-area: bottom_left;
	border-image-source: url(image/border_small/border_bottom_left_small.png);
	border-image-slice: 20% 20% 20% 16%;
}

.cell, .spalte, .zeile, #top_left, #top_right, .zeileRight, #bottom_right, .spalteBottom, #bottom_left {
	border-image-repeat: stretch; /*previously strech */
}

.zeile, .spalte, h1 {
	color: #FFF;
	text-shadow: #000 2px 2px;
	font-family: GothicPixels;
}

.cursor {
	position: absolute;
	height: 14%;
	overflow-X: clip;
	pointer-events: none;
	opacity: 0;
}

#gauntlet {
	transform-origin: 80% 80%;
}

#pointer {
	transform-origin: 0 0;
}

#bloodwall {
	position: fixed;
	width: 100%;
	height: 100%;
	top: -100%;
	left: 0;
	opacity: 0;
	transition: 6s top ease-out;
	pointer-events: none;
}

#gameover_canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    border: solid red 10px;
    pointer-events: none;
}

h1 {
    font-size: 0;
    padding: 200px;
    color: #FFF;
    transition: font-size 3s;
    transition-delay: 1s;
    pointer-events: none;
}

#slider_container {
	width: 100%;
	height: 50%;
}

#slider_title {
	font-size: 6vh;
	padding-left: 1vw;
	text-align: left;
}

.slider {
	width: 80%;
	appearance: none;
	cursor: url(empty.png), auto;
    background: transparent;
}

#button_container {
	width: 100%;
	height: 100%;
	text-align: center;
}

#button {
	width: 20%;
	height: 20%;
	border: solid red 5px;
	
}

input[type="range"]::-moz-range-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 0;
    background: transparent;
	background-image: url(image/slider_small/slider_thumb.png);
	background-position: 50% 50%;
	background-size: 100%;
	width: 12vh;
	height: 12vh;
}

input[type="range"]::-moz-range-track {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background-image: url(image/slider_small/slider_track.png);
	background-position: 50% 50%;
	background-size: 100% 100%;
	height: 15vh;
	width: 88%;
}

@keyframes swing {
	0% { transform: rotate(0deg);
	}
	50% { transform: rotate(65deg);
	}
	75% { transform: rotate(-15deg);
	}
	100% { transform: rotate(0deg);
	}
}

@keyframes death {
	0% { transform: rotate(0deg);
	}
	100% { transform: rotate(-135deg);
	}
}

@font-face {
	font-family: "GothicPixels";
	src: url(font/GothicPixels.ttf);
}
}