@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

html, body, div, td, li { font-size: 1em; }

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,body,div,form,table,nav,aside,footer,header,main {
	margin: 0px; padding: 0px;
}
body, html, button {
	font-size: 1em;
	box-sizing: border-box;
}
body {
	font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
	background-image: url('/images/laub.png');
}
table,td,th,div,li,p,h1,h2,h3,h4,h5,h6 {
	font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
}
img { display: block; }

a { text-decoration: none; color: black; }
a:hover { color: #FF0000; }
hr { clear: both; }



.logo {
	text-align: center;
}
.logo img {
	display: inline-block;
	height: 100px;
}

.gameflex {
	display: flex;
	justify-content: center;
	gap: 0.3em;
}
.gamefield {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 600px;
	max-height: 600px;
	border: 0px solid red;
	overflow: hidden;
}

.startgame {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	border: 0px solid black;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.5);
	gap: 1em;
	border: 0px solid white;
	overflow: hidden;
	border-radius: 1em;
}
.startgamebutton {
	display: inline-block;
	padding: 1em;
	border: 3px solid black;
	border-radius: 0.3em;
	background-color: #afa;
	font-weight: bold;
	cursor: pointer;
	font-size: 3em;
}
.startgamebutton:hover {
	background-color: #ff0;
}

#jewels {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(255,255,255,0.6);
	border-radius: 1em;
	overflow: hidden;
}

.jewel {
	position: absolute;
	border: 1px solid rgba(0,0,0,0);
	display: inline-block;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: background-color 500ms;
}
.jewel:hover {
	background-color: #999;
}
.explosion {
	display: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('/images/light.png');
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 2s linear infinite;
}

.joker {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
.joker > div {
	border: 2px solid black;
	border-radius: 0.2em;
	cursor: pointer;
	position: relative;
}
.jl {
	position: absolute;
	left:0; top:0;
	width:100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: white;
	opacity: 0.5;
}
.jtflex {
	position: absolute;
	left:0; top:0;
	width:100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.joker span { 
	font-size: 1.2em;
	color: white;
	opacity: 1 !important; 
	display: inline-block; 
	font-weight: bold;
}
.j1 .jl { background-image: url('/images/1.png'); }
.j2 .jl { background-image: url('/images/2.png'); }
.j3 .jl { background-image: url('/images/3.png'); }
.j4 .jl { background-image: url('/images/4.png'); }
.j5 .jl { background-image: url('/images/5.png'); }
.j6 .jl { background-image: url('/images/6.png'); }
.j7 .jl { background-image: url('/images/7.png'); }

.hintsystem {
	height: auto;
	display: flex; 
	flex-direction: column; 
	justify-content: space-evenly; 
	align-items: stretch;
	height: auto !important;
	opacity: 0.8 !important;
	background-color: rgba(255,255,255,0.7);
}
.hint, .auto {
	text-align: center;
	width: 100%;
	padding: 0.2em 0;
}
.hint:hover, .auto:hover {
	background-color: green;
}

.blink { animation: blink 3s infinite; }
@keyframes blink{
  0% { background: white; color: black; }
  50% { background: red;  color: white; }
  100% { background: white;  color: black; }
}


.score {
	padding: 0.3em;
	background-color: rgba(255,255,255,0.5);
	font-weight: bold;
	text-align: center;
	font-size: 1.3em;
	margin: 0.2em 0 0.3em 0;
}
.score span {
	display: inline-block;
	padding: 0.15em 0.2em;
	border: 1px solid black;
	background-color: rgba(255,255,255,0.5);
	margin: 0.1em;
}
.score div {
	display: inline-block;
}

.cancelgame, .help {
	display: inline-block;
	font-size: 1em;
	border: 2px solid black;
	border-radius: 0.3em;
	padding: 0.1em;
	background-color: red;
	color: black;
	font-weight: bold;
	margin-left: 1em;
	cursor: pointer;
}
.cancelgame:hover {
	background-color: green;
	color: black;
}

.help {
	background-color: green;
	width: 2em;
}
.help:hover {
	background-color: orange;
		color: black;
}

.imprint {
	text-align: center;
	font-weight: bold;
	margin: 1em 0;
	color: white;
}
.imprint a {
	color: white;
}
.imprint a:hover {
	color: red;
}



.content {
	display: flex;
	justify-content: center;
}

.contentflex {
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: 640px;
	margin: 1em;
}

.contentflex > div {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 2em;
}

.contentflex img {
	width: 30%;
	margin-left: 0.3em;
	margin-bottom: 0.3em;
	max-width: 150px;
	float: right;
}

.tipp a { color: darkblue; font-weight: bold; }
.tipp a:hover { color: red; }

@media only screen and (orientation: portrait) {
 .gameflex { 
 		flex-direction: column; 
 		align-items: center;
 	}
 .joker { 
 		flex-direction: row; 
 		align-items: center;
 		gap: 0;
 	}
 	.score {
 		font-size: 0.7em;
 	}
}