:focus { outline: none; }

.message--replay {
	font-size: 1.25vw;
	bottom: 40vh;
	display: none;
	text-indent: 0.5em;
	letter-spacing: 0.5em;
	color: #d1b790;
}

.header {
	position: absolute;
	top: 8vh;
	left: 0;
	width: 100%;
	text-align: center;
	pointer-events: none;
}

.menu {
	position: absolute;
	top: 20%;
	left: 38.5%;
	z-index: 1002;
	overflow: auto;
	width: 700px;
	height: 630px;
	margin-left: -200px;
	margin-top: -200px;
	border-radius: 10px;
	text-align: center;
	padding: 20px;
}

.menu-option {
	position: absolute;
	background-color: rgb(255, 201, 140);
	margin-left: 5%;
	z-index: 1002;
	overflow: auto;
	border-radius: 10px;
	text-align: center;
	display: block;
	padding: 20px;
}

.howtoplay-divc {
	margin: auto;
	position: relative;
	width: 520px;
	height: 72%;
	border-radius: 5px;
	border: 3.5px solid black;
	margin-top: 100px;
	background-color: #FBFBF9;
	z-index: 1002;
	overflow: auto;
	text-align: center;
	display: none;
	padding: 20px;
}

.credits-divc {
	margin: auto;
	position: relative; 
	width: 520px;
	border-radius: 5px;
	border: 3.5px solid black;
	margin-top: 100px;
	background-color: #FBFBF9;
	z-index: 1002;
	overflow: auto;
	text-align: center;
	display: none;
	padding: 20px;
}

.game-holder {
	position: absolute;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(#e4e0ba, #f7d9aa);
	background: linear-gradient(#e4e0ba, #f7d9aa);
}

.world {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

body{
	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin: 0;
	color: #444;
	background: #f6f6f6;
}

.pausedspan{
	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 4.5vh;
	position: absolute;
	display: none;
	text-align: center;
	text-indent: 0.5em;
	letter-spacing: 0.5em;
	color: #d1b790;
}

img {
	width: 200px;
}

/*score distance*/
.dist{
	position:absolute;
	left: 5%;
	top: 5%;
	transform:translate(-50%,0%);
	user-select: none;  
}

.distGO{
	position:absolute;
	text-align: center;
	margin-top: 25%;
	left: 51%;
	top: 5%;
	transform:translate(-50%,0%);
	user-select: none;  
}
  
.label{
	position:relative;
	font-family:'Cambria', sans-serif;
	text-transform:uppercase;
	color:#ffa873; 
	font-size:16px;
	letter-spacing:2px;
	text-align:center;
	margin-bottom:5px;
}
  
  
.distValue{
	position:relative;
	text-transform:uppercase;
	color:#dc5f45;
	font-size:26px;
	font-family:'Voltaire';
	text-align:center;
}

.distValueGO{
	position:relative;
	text-transform:uppercase;
	color:#dc5f45;
	font-size:26px;
	font-family:'Voltaire';
	text-align:center;
}

/*record*/
.record{
	position:absolute;
	left: 5%;
	top: 5%;
	transform:translate(-50%,0%);
	user-select: none;  
}
.recordGO{
	position:absolute;
	text-align: center;
	margin-top: 25%;
	left: 105%;
	top: 5%;
	transform:translate(-50%,0%);
	user-select: none;  
}
.recordValue{
	position:relative;
	text-transform:uppercase;
	color:#dc5f45;
	font-size:26px;
	font-family:'Voltaire';
	text-align:center;
}
.recordValueGO{
	position:relative;
	text-transform:uppercase;
	color:#dc5f45;
	font-size:26px;
	font-family:'Voltaire';
	text-align:center;
}

/*Level*/
.level{
	position:absolute;
	left: 19%;
	top: 5%;
	transform:translate(-50%,0%);
	user-select: none;  
}

.levelGO{
	position:absolute;
	text-align: center;
	margin-top: 25%;
	left: 3%;
	top: 5%;
	transform:translate(-50%,0%);
	user-select: none;  
}
  
  
.levelValue{
	position:relative;
	text-transform:uppercase;
	color:#dc5f45;
	font-size:26px;
	font-family:'Voltaire';
	text-align:center;
}

.levelValueGO{
	position:relative;
	text-transform:uppercase;
	color:#dc5f45;
	font-size:26px;
	font-family:'Voltaire';
	text-align:center;
}

/*health*/
#health{
	position:absolute;
	left: 12%;
	top: 5%;
	transform:translate(-50%,0%);
	user-select: none;  
}
  
.label_health{
	position:relative;
	font-family:'Cambria', sans-serif;
	text-transform:uppercase;
	color:#ffa873; 
	font-size:16px;
	letter-spacing:2px;
	text-align:center;
	margin-bottom:5px;
}

#hearts{
	position:relative;
	text-transform:uppercase;
	color:#dc5f45;
	font-size:26px;
	font-family:'Voltaire';
	text-align:center;
}

/*homepage*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

span{
	position: relative;
	display: inline-flex;
	width: 180px;
	height: 55px;
	margin: 0 15px;
	perspective: 1000px;
}
span a{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span a:before,
span a:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "NEW GAME";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span a:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span a:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span a:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span b{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span b:before,
span b:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "SELECT SCENARIO";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span b:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span b:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span b:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span c{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span c:before,
span c:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "HOW TO PLAY";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span c:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span c:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span c:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span d{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span d:before,
span d:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "CREDITS";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span d:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span d:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span d:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span d{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span d:before,
span d:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "CREDITS";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span d:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span d:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span d:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span e{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span e:before,
span e:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "PLAY AGAIN";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span e:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span e:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span e:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span f{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span f:before,
span f:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "MENU";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span f:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span f:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span f:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span g{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span g:before,
span g:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "PLAY AGAIN";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span g:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span g:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span g:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span i{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span i:before,
span i:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "GO BACK";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span i:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span i:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span i:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

span h{
	font-size: 19px;
	letter-spacing: 1px;
	transform-style: preserve-3d;
	transform: translateZ(-25px);
	transition: transform .25s;
	font-family: 'Montserrat', sans-serif;
}
span h:before,
span h:after{
	background-color: #FBFBF9;
	position: absolute;
	content: "RESUME (P)";
	height: 55px;
	width: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3.5px solid black;
	box-sizing: border-box;
	border-radius: 5px;
}
span h:before{
	color: #fff;
	background: #000;
	transform: rotateY(0deg) translateZ(25px);
}
span h:after{
	color: #000;
	transform: rotateX(90deg) translateZ(25px);
}
span h:hover{
	transform: translateZ(-25px) rotateX(-90deg);
}

img {
	height: 120px;
	width: 520px;
	text-align: center;
	margin: auto;
}
.frame1 {
	text-align: match-parent;
	margin: auto;
	z-index: 10;
	margin-top: 150px;
}

.box-wrap{
	margin: auto;
	position: relative; 
	width: 520px;
	border-radius: 5px;
	margin-top: 125px;
	background-color: transparent;
	z-index: 1002;
	overflow: auto;
	text-align: center;
	display: none;
	padding: 20px;
	font-weight: lighter;
}

.imgscen {
	height: 100px;
	width: 70%;
	border-radius: 5px;
	border: 3.5px solid black;
	overflow: auto;
	text-align: center;
}

.heart {
	width: 25px;
	display:inline-block;
	-webkit-mask:
	   radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
	   radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
	   linear-gradient(to bottom left, red 43%,transparent 43%) bottom left ,
	   linear-gradient(to bottom right,red 43%,transparent 43%) bottom right;
	-webkit-mask-size:50% 50%;
	-webkit-mask-repeat:no-repeat;
	mask:
	   radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
	   radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
	   linear-gradient(to bottom left, red 43%,transparent 43%) bottom left ,
	   linear-gradient(to bottom right,red 43%,transparent 43%) bottom right;
	mask-size:50% 50%;
	mask-repeat:no-repeat;
	background:linear-gradient(rgb(255, 0, 0),rgb(80, 8, 8));
}

.heart::before {
	content:"";
	display:block;
	padding-top:100%;
}


.imgzone {
	position: absolute; 
	width: 300px; 
	height: 70px; 
	top: 10%; 
}

.imgzone2 {
    position: absolute; 
    width: 450px; 
    height: 70px; 
    top: 1%; 
}

.buttonzone {
	text-align: center;
	margin-top: 16.25%;
	margin-left: 3.5%;
}

.buttonzone2 {
	text-align: center;
	margin-top: 25.25%;  /*16.25%*/
	margin-left: 3.5%;
}

.audioButton {
    /* background: url("/img/sound_on.png") no-repeat; */
    background-size: cover;
    height: 65px;
    width: 65px;
    position: absolute;
    bottom: 6%;
    left: 4%;
    border: none;
    outline: none;
	display: block;
    /* visibility: hidden; */
  }

  body > div{
	width: 90%;
    height: 100%;
  }