body{
-webkit-touch-callout: none;
-webkit-user-select: none; 
-khtml-user-select: none; 
-ms-user-select: none; 
user-select: none;	
}
.hintergund {
  width: 101%;
  height: 101%;
  margin: 0px;
  background-image: linear-gradient(to right, black 15% , white 50%,black 85%);
  background-position: 50% 100%;
  top: -1%;
  left: -1%;
  position: fixed;
}
.hintergund_zwei{
  width: 101%;
  height: 101%;
  margin: 0px;
  background-image: linear-gradient(to right, black, white 50%,black);
  background-position: 50% 100%;
  top: -1%;
  left: -1%;
  position: fixed;
  z-index:-10;
}
.titel{
	padding-top: 2%;
	text-align: center;
	font-size: 4vw;
	font-family: "Times New Roman", Times, serif;

}
.titel_2{
	padding-top: 2%;
	text-align: center;
	font-size: 4vw;
	font-family: "Times New Roman", Times, serif;
color:white;
opacity:0;
animation: start_ani 5s;
  animation-delay: 2s;
}
.n_text{
	text-align: center;
	font-size: 2vw;
	font-family: "Times New Roman", Times, serif;
	 animation-fill-mode: forwards;
}


.n_text_2{
	text-align: center;
	font-size: 2vw;
	font-family: "Times New Roman", Times, serif;
	color:black;
}
.lol{
	position:fixed;
	top:30vh;
	left:30vw;
	text-align: center;
	background-color:transparent;
}
.btn{
	background-color: transparent;
	font-size: 3vw;
	font-family: "Times New Roman", Times, serif;
	
}
.btn2{
	font-family: monospace, monospace;
	font-size: 2vw;
}
.btn3{
	font-family: monospace, monospace;
	padding-right: 3.5vw;
	font-size: 2vw;
}
.btn4{
	font-family: monospace, monospace;
	padding-right: 3.5vw;
	font-size: 2vw;
	opacity: 0.25;
}
.center{
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	top: 5%;
	position:relative;
}

.options{
	position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 10;
  color: black;
}
.options_spans{
font-size: 2vh;
font-family: "Times New Roman", Times, serif;
padding: 1vw;
}
.options_spans:hover{
	color: gray;
	text-decoration: underline;
}
.falsch{
	background-color: rgba(255, 0, 0, 0.3);
	border-color:red;
	font-family: monospace, monospace;
}
.unsichtbar{
	display:none;
	}
	
	
/* a bright place */
	
.text_bubble{
	margin-left: 4vw;
	width: 15%;
	max-height: 67vh;
	overflow-y: scroll;
	word-wrap: break-word;
	scrollbar-width: thin;
}
.text0{
	font-size: 2vh;
	opacity:1;
	padding:1%;
}
.text1{
	font-size: 2vh;
	opacity:0.9;
	padding:1%;
}
.text2{
	font-size: 2vh;
	opacity:0.8;
	padding:1%;
}
.text3{
	font-size: 2vh;
	opacity:0.7;
	padding:1%;
}
.text4{
	font-size: 2vh;
	opacity:0.6;
	padding:1%;
}
.text5{
	font-size: 2vh;
	opacity:0.5;
	padding:1%;
}
.text6{
	font-size: 2vh;
	opacity:0.4;
	padding:1%;
}
.text7{
	font-size: 2vh;
	opacity:0.3;
	padding:1%;
}
.text8{
	font-size: 2vh;
	opacity:0.2;
	padding:1%;
}
.text9{
	font-size: 2vh;
	opacity:0.1;
	padding:1%;
}

.countdown{
	position: fixed;
	left: 90%;
	top:1%;
	padding: 0.5%;
}
.timer{
	font-family: "Times New Roman", Times, serif;
	font-size: 3vw;
	width:10vh;
}
.Totally_Accurate_Battle_Simulator{
	position: fixed;
	left: 20%;
	right:20%;
	top:6.5%;
	bottom:90%;
}
.tabs{
	margin-left:1.5%;
	margin-right: 5%;
	padding: 0.5%;
	font-size:3vh;
	position:relative;
	left:-1vw;
}
.tabs:hover{
	text-decoration: underline;
}
.inv{
	position: fixed;
	left: 20%;
	top: 60%;
	width:max-content;
	height:max-content;
	max-width:60%;
	max-height: 45%;
	padding: 1%;
	overflow-y: auto;
	border: 1px solid black;
}
.fix{
	position:fixed;
	left: 20%;
	top: 60%;
}
.drc{
	position:relative;
	top: -1vh;
	z-index:10;
	background-color:white
}
.recc{
	position: fixed;
	left: 83%;
	top: 18vh;
	width:max-content;
	height:max-content;
	max-width:14vw;
	max-height: 75%;
	padding: 1vw;
	border: 1px solid black;
	overflow-y: auto;
}
.fix2{
	position: fixed;
	left: 83%;
	top: 18vh;
	width:14vw;
	height: 75%;
}
/*buttons animation und so*/
.inter{
	position: fixed;
	left: 20%;
	right:20%;
	top: 10%;
	height: 45%;
		overflow:hidden;
}
.contain{
	display: flex;
	flex-wrap: nowrap;
	overflow:hidden;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
}
.start{
top:0%;
left:0%;
width:100%;
height:100%;
position: absolute;
}
.craft{
top:0%;
left:100%;
width:100%;
height:100%;
position: absolute;
overflow-y: auto;
}
.tuer{
top:0%;
left:200%;
width:100%;
height:100%;
position: absolute;
}
.vorgarten{
top:0%;
left:300%;
width:100%;
height:100%;
position: absolute;
}
.kitchen{
top:0%;
left:400%;
width:100%;
height:100%;
position: absolute;
}
.schieben_start{
 animation: schieben_start 1s;
 animation-fill-mode: forwards;
 top:0%;
 left:0%;
 width:100%;
 height:100%;
 position: absolute;
}

.schieben_craft{
 animation: schieben_craft 1s;
 animation-fill-mode: forwards;
 top:0%;
 left:100%;
 width:100%;
 height:100%;
 position: absolute;
}

.schieben_tuer{
 animation: schieben_tuer 1s;
 animation-fill-mode: forwards;
 top:0%;
 left:200%;
 width:100%;
 height:100%;
 position: absolute;
}

.schieben_vorgarten{
 animation: schieben_vorgarten 1s;
 animation-fill-mode: forwards;
 top:0%;
 left:300%;
 width:100%;
 height:100%;
 position: absolute;
}
.schieben_kitchen{
 animation: schieben_kitchen 1s;
 animation-fill-mode: forwards;
 top:0%;
 left:400%;
 width:100%;
 height:100%;
 position: absolute;
}







.hinter_start{
	top:-1vh;
	left:-1vw;
	height:101vh;
	width:101vw;
	position: fixed;
	background-color: black;
	overflow: visible;
}

.hinter_aus{
	top:-1vh;
	left:-1vw;
	height:101vh;
	width:101vw;
	position: fixed;
	background-color: transparent;
}
.hinter_an{
	color: black;
	opacity: 0.2;
	overflow: visible;
}
.crd_aus{
	display: none
}
.crd_an{
	background-color: lightgray;
 width:30vw;
height: max-content;
position: absolute;
top:20vh;
left:35vw;
z-index:10;
padding:10px;
border: 0.5vw double black;
}
.txt{
	text-align: center;
	font-size: 1vw;
	font-family: "Times New Roman", Times, serif;
}
.enemy_health{
position:absolute;
margin-top:4%;
right:16.5%;
width:20%;
height:30px;
border: 1px solid black;
}
.player_health{
position:absolute;
margin-top:4%;
left:16.5%;
width:20%;
height:30px;
border: 1px solid black;
}
.enemy_health_num{
position:absolute;
margin-top:10%;
right:16%;
width:20%;
height:30px;
text-align:center;
}
.player_health_num{
position:absolute;
margin-top:10%;
left:16%;
width:20%;
height:30px;
text-align:center;
}	
	
.enemy_name{
	right:20.5%;
	margin-top:1%;
	font-size: 0.7vw;
	font-family: "Times New Roman", Times, serif;
	position:absolute;
}
.player_name{
	left:25%;
	margin-top:1%;
	font-size: 0.7vw;
	font-family: "Times New Roman", Times, serif;
	position:absolute;
}
.enemy{
position:absolute;
right:25%;
font-size: 1vw;	
}
.hit_a{
animation: hit_a 1s;
position:absolute;
right:25%;
font-size: 1vw;	
}
.player{
position:absolute;
left:25%;
font-size: 1vw;		
}
.attack_shot{
animation: attack_shot 0.5s;
position:absolute;
left:25%;
top:43%;
}
.attack_a{
animation: attack_a 1s;
animation-fill-mode: forwards;
position:absolute;
left:25%;
font-size: 1vw;	
}
.txt_2{
	text-align: center;
	font-size: 0.7vw;
	font-family: "Times New Roman", Times, serif;
}
.button{
	position:relative;
	text-align: center;
	border: 1px solid black;
	padding-left: 1vw;
	padding-right: 1vw;
	padding-top:1vh;
	padding-bottom:1vh;
	top:1.5vh;
	margin-bottom:2vh;
}
.button:hover{
	text-decoration: underline;
}
.cooldown{
position: absolute;
height: 100%;
top:0px;
left.0px;
}
a{
	text-decoration: none;

}
a:visited{

}
.save_ico_aus{
	display:none;
}
.save_ico_an{
left:10px;
bottom:10px;
position:fixed;
font-size: 1vw;
font-family: "Times New Roman", Times, serif;
opacity:0;
 animation: save_ani 5s ;
}
.Damage_pop_player{
position:absolute;
left: 31%;
color:darkred;
top:68.2%;
animation: Damage_pop_up 2s ;
}
.Damage_pop_enemy{
position:absolute;
right: 19%;
color:darkred;
top:68.2%;
animation: Damage_pop_up 2s ;
}
@keyframes Damage_pop_up {
  0% {opacity: 1;}
  90%{opacity: 1;}
  100%{opacity: 0;}
}
@keyframes save_ani {
  10% {opacity: 0.7;}
  90%{opacity: 0.7;}
}
@keyframes start_ani{
	0% {opacity: 0;}
	 30% {opacity: 1;}
  70%{opacity: 1;}
 100% {opacity: 0;}
}
@keyframes start_ani_2{
	0% {opacity: 0;}
	 30% {opacity: 1;}
  70%{opacity: 1;}
 100% {opacity: 1;}
}
@keyframes cooldown{
	0% {width:100%;}
	100%{width:0%;}
}
.inv_obj{
	float: left;
}
.inv_obj:hover{
	background-color:lightgray;
}
.thanks_for_everything{	
	color:gray;
}
.thanks_for_everything:hover{
		text-decoration: underline;
}