main {
	/*padding-top: 50px;*/
}

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* Sketchpad, zum Zeichnen ############################################################################### */

.sketch {
	/* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*margin: 2em auto;
	position: absolute;
	top: 0px;
	left: 0px;*/
	
	display: flex;
	justify-content: center;
	align-items: center;			
}

@media (min-width: 720px) {
	.sketch {
		/*display: grid;*/
		grid-template-columns: 300px 300px; 
	}
}

.box {
	background-color:var(--secondary);
	border:0px solid gainsboro;
	box-sizing: border-box;
	bottom: 1em;
}

.box p { margin-top: 0; font-size: 0.9em}

.pad {
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;			
}

#sketchpad {
	border:0px solid gainsboro;
	box-sizing: border-box;
	position:relative; /* Necessary for correct mouse co-ords in Firefox */
	margin-left: auto; margin-right: auto;
	display:block;
	max-width: 100%
}
/*
button { 
	height: 32px;
	font-size: 0.9em;
	border: 0px solid var(--border-color);
	padding-left: 16px;
	padding-right: 16px;
	display: inline-block;
	background-color: #876654;
	margin: 8px 0;
	color: white;
	left: 50%;
	right 50%;		
	align: center;	
}
*/
.number {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;	
	font-size: 10em;
	font-family: Arial;	
	font-weight: bold;
}	

.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	display: block;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;		
	padding-bottom: 30px;
}
.buttons {
	margin: 10px;
	padding: 5px;
	align: center;
	background-color: #876654;
	display: flex;
	align-items: center;	
	justify-content: center;
}
.buttonl {
	width: 10%;
}
.buttonm {
	width: 50%;
}
.buttonr {
	width: 10%;
}	
.footertop {
	position: absolute;
	bottom: 100px;
	left: 0px;
	display: block;
	background; #123456;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;		
}	
.buttonft {
	width: auto;
}

#puzzle-a {
	padding-top: 53px;
}

/* Kamerazugriff ############################################################################### */

#camera, #camera--view, #camera--sensor, #camera--output {
	position: fixed;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

#camera--view, #camera--sensor, #camera--output{
	transform: scaleX(-1);
	filter: FlipH;
}

.blackbutton{
	/*width: 200px;*/
	background-color: black;
	color: white;
	font-size: 16px;
	border-radius: 30px;
	border: none;
	padding: 15px 20px;
	margin: 5px;
	text-align: center;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
	/*position: fixed;
	bottom: 30px;
	left: calc(50% - 100px);*/
}

.text-button {
	position: fixed !important;
	bottom: 30px !important;
	left: calc(50% - 100px) !important;
}

.taken{
	height: 100px !important;
	width: 100px !important;
	transition: all 0.5s ease-in;
	border: solid 3px white;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
	top: 20px;
	right: 20px;
	z-index: 2;
}  

.button {
	visibility: hidden;
}

#video1 {
	opacity: 100;
	//visibility: hidden;
  min-height: 100%;
  height:auto !important;
  height:100%;		
}	
#canvas1 {
	position: fixed;
	height: 100%;
	width: 100%;
	object-fit: cover;
	opacity: 100;
  min-height: 100%;
  height:auto !important;
  height:100%;			
}

/* Weiteres ############################################################################### */

#solution-full-screen-menu-toggle {
	z-index: 5;
	position: absolute;
	/*adding:1em;*/
	bottom:10px;
	right: 10px;
	margin-bottom: 10px !important;
	/*background: lime;*/
	background-color: #5E2A7D !important;
}

#puzzle-text-button {
	z-index: 5;
	position: absolute;
	/*adding:1em;*/
	bottom: 70px;
	right: 10px;
	margin-bottom: 10px !important;
	/*background: lime;*/
	background-color: #5E2A7D !important;
}

#tipp-button {
	z-index: 6;
	position: absolute;
	/*adding:1em;*/
	bottom:10px;
	left: 10px;
	margin-bottom: 10px !important;
	/*background: lime;*/
	transition: all 0.5s ease-in;
	color: white;
	font-size: 16px;
	border-radius: 30px;
	border: none;
	padding: 15px 20px;
	margin: 5px;
	text-align: center;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);	
}

.tip-color-4 {
	background-color: #45b910 !important;
}
.tip-color-3 {
	background-color: #b9b610 !important;
}
.tip-color-2 {
	background-color: #b98210 !important;
}
.tip-color-1 {
	background-color: #b91010 !important;
}
.tip-color-0 {
	background-color: #B9B9B9 !important;
}

.hiddentext {
	visibility: hidden;
}

/* Rätselübersicht ############################################################################### */

.puzzlecontainer { 
  display: grid; 
  grid-template-rows:25% 25% 25%; 
  grid-template-columns:33% 33% 33%; 
  position: relative;
  top: 35%;
}

.puzzlebutton {
	display: block;
	background-color: #cd32a6;
	margin: 3px;
	padding: 3px;
	line-height: 30px;
	font-size: 24px !important;
}

.solved {
	background-color: #20CA82 !important;
}

.notstartet {
	color: black !important;
}

/* Menübild ############################################################################### */

.img-menu {
	width: 90%;
	position: absolute;
	left: 5%;
	right: 5%;
	top: 10px;
}