html, body {
	padding: 0;
	margin: 0;
	font-family: 'Roboto', sans-serif;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#background {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #356a87;
	background: linear-gradient(180deg, rgba(53,106,135,1) 0%,
		rgba(53,106,135,1) 58.5%, rgba(184,155,131,1) 58.6%,
		rgba(184,155,131,1) 100%);
}

#screen {
	width: 1920px;
	height: 1080px;
	background: transparent radial-gradient(closest-side at 50% 50%,
	#FFFFFF00 0%, #0000002B 100%) 0% 0% no-repeat padding-box;
}

.phase0 {
	background-image: url("img/background-morning.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.phase1 {
	background-image: url("img/background-afternoon.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.phase2 {
	background-image: url("img/background-night.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

#wallmouse {
	background-image: url("img/mouseInHoleSprite.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position-x: 0rem;
	width: 52.125rem;
	height: 44.625rem;
	position: absolute;
	top: 590rem;
	left: 960rem;
}

#prefetch {
	position: absolute;
	left: 30px;
	top: -30px;
}

#pixel {
	width: 1px;
	height: 1px;
}

#scene {
	position: absolute;
	box-sizing: border-box;
	width: 1920rem;
	height: 1080rem;
	top: 50%;
	left: 50%;
	margin: -540rem 0 0 -960rem;
}

#origin {
	display: inline-block;
	position: relative;
	width: 0;
	height: 0;
}

#clock {
	position: absolute;
	background-image: url("img/clock.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 200rem;
	height: 200rem;
	top: 130rem;
	left: 900rem;
}

#clockhand {
	position: absolute;
	background-image: url("img/clockHandle.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: 150rem;
	height: 150rem;
	top: 24rem;
	left: 24rem;
	transform: rotate(60deg);
}

.boxarea {
	display: none;
	margin-left: 32%;
	margin-top: 25%;
	width: 60%;
	height: 60%;
	pointer-events: all;
	font-size: 5vmin;
	line-height: 100%;
	text-align: center;
	padding-top: 20%;
	cursor: pointer;
}

#box0,#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8,#box9,
#box10,#box11,#box12,#box13,#box14,#box15,#box16 {
	width: 260rem;
	height: 230rem;
	pointer-events: none;
}

#box0 {
	left: 822rem;
	top: 590rem;
	z-index: 590;
}

#box1 {
	left: 1141rem;
	top: 590rem;
	z-index: 590;
}

#box2 {
	left: 662rem;
	top: 692rem;
	z-index: 692;
}

#box3 {
	left: 984rem;
	top: 692rem;
	z-index: 692;
}

#box4 {
	left: 822rem;
	top: 795rem;
	z-index: 795;
}

#box5 {
	left: 1141rem;
	top: 795rem;
	z-index: 795;
}

#box6 {
	left: 500rem;
	top: 590rem;
	z-index: 590;
}

#box7 {
	left: 1306rem;
	top: 692rem;
	z-index: 692;
}

#box8 {
	left: 500rem;
	top: 795rem;
	z-index: 795;
}

#box9 {
	left: 340rem;
	top: 692rem;
	z-index: 692;
}

#box10 {
	left: 1436rem;
	top: 795rem;
	z-index: 795;
}

#box11 {
	left: 178rem;
	top: 795rem;
	z-index: 795;
}

#box12 {
	left: 1436rem;
	top: 590rem;
	z-index: 590;
}

#box13 {
	left: 662rem;
	top: 488rem;
	z-index: 488;
}

#box14 {
	left: 984rem;
	top: 488rem;
	z-index: 488;
}

#box15 {
	left: 340rem;
	top: 488rem;
	z-index: 488;
}

#box16 {
	left: 1306rem;
	top: 488rem;
	z-index: 488;
}

#cloud {
	position: absolute;
	background-image: url("img/fightClubCloud.png");
	background-repeat: no-repeat;
	background-size: contain;
	left: 350rem;
	top: 100rem;
	width: 1135rem;
	height: 1200rem;
	z-index: 999;
	transform-origin: center center;
	opacity: 0;
	pointer-events: none;
}

.closedbox {
	background-image: url("img/boxWiggle.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position-x: 0rem;
	position: absolute;
	pointer-events: none;
}

.catbox0 {
	position: absolute;
	background-image: url("img/blackCatBox.png");
	background-size: contain;
}

.catbox1 {
	position: absolute;
	background-image: url("img/brownCatBox.png");
	background-size: contain;
}

.catbox2 {
	position: absolute;
	background-image: url("img/egyptianCatBox.png");
	background-size: contain;
}

.catbox3 {
	position: absolute;
	background-image: url("img/grayCatBox.png");
	background-size: contain;
}

.catbox4 {
	position: absolute;
	background-image: url("img/orangeCatBox.png");
	background-size: contain;
}

.catbox5 {
	position: absolute;
	background-image: url("img/stripedCatBox.png");
	background-size: contain;
}

.catbox6 {
	position: absolute;
	background-image: url("img/tanCatBox.png");
	background-size: contain;
}

.catbox7 {
	position: absolute;
	background-image: url("img/whiteCatBox.png");
	background-size: contain;
}

.catbox8 {
	position: absolute;
	background-image: url("img/yellowCatBox.png");
	background-size: contain;
}

.mousebox {
	position: absolute;
	background-image: url("img/mouseInBox.png");
	background-size: contain;
}

.btn {
	display: inline-block;
	padding: 0.7em 1.7em;
	margin: 0 0.3em 0.3em 0;
	border-radius: 0.2em;
	text-decoration: none;
	font-family: 'Roboto',sans-serif;
	font-weight: 400;
	color: #FFFFFF;
	background-color: #3369ff;
	box-shadow: inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),
			inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),
			inset 0 0 0em 0.05em rgba(255,255,255,0.12);
	text-align: center;
	position: relative;
	cursor: pointer;
	user-select: none;
	box-shadow: 0px 5px 10px #00000073;
	border: 5px solid #FFFFFF;
}

.btn:active {
	box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),
		inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}

#curtain {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 10000;
}

.modal {
	position: absolute;
	width: 1300rem;
	height: 804rem;
	top: 50%;
	left: 50%;
	margin: -402rem 0 0 -650rem;
	z-index: 11000;
	background-size: contain;
	background-repeat: no-repeat;
}

#howto {
	background-image: url(img/howToPlay.png);
    background-size: cover;
	font-size: 30rem;
}

#howtotext {
	background: #fff;
    margin-top: 200rem;
    margin-left: 100rem;
    margin-right: 120rem;
    max-height: 390rem;
    overflow-y: scroll;
    padding-right: 20rem;
}

#closehowtobtn {
	position: absolute;
	width: 330rem;
	height: 110rem;
	left: 480rem;
	top: 640rem;
	cursor: pointer;
    background: none;
}

.gamemode1 {
	background-image: url("img/timedMode.png");
}

.gamemode0 {
	background-image: url("img/untimedMode.png");
}

.difficulty0 {
	background-image: url("img/difficulty0.png");
}

.difficulty1 {
	background-image: url("img/difficulty1.png");
}

.difficulty2 {
	background-image: url("img/difficulty2.png");
}

.roundresult0 {
	background-image: url("img/outOfTime.png");
}

.roundresult1 {
	background-image: url("img/foundAllCats.png");
}

#mode0btn {
	position: absolute;
	width: 500rem;
	height: 180rem;
	left: 120rem;
	top: 380rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#mode1btn {
	position: absolute;
	width: 500rem;
	height: 180rem;
	left: 680rem;
	top: 380rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#startbtn {
	position: absolute;
	width: 350rem;
	height: 180rem;
	left: 120rem;
	top: 600rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#howtobtn {
	position: absolute;
	width: 500rem;
	height: 180rem;
	left: 680rem;
	top: 600rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#difficulty0btn {
	position: absolute;
	width: 310rem;
	height: 180rem;
	left: 120rem;
	top: 380rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#difficulty1btn {
	position: absolute;
	width: 310rem;
	height: 180rem;
	left: 495rem;
	top: 380rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#difficulty2btn {
	position: absolute;
	width: 310rem;
	height: 180rem;
	left: 870rem;
	top: 380rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#realstartbtn {
	position: absolute;
	width: 350rem;
	height: 180rem;
	left: 480rem;
	top: 600rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#continuebtn {
	position: absolute;
	width: 350rem;
	height: 100rem;
	left: 270rem;
	top: 600rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#menubtn {
	position: absolute;
	width: 350rem;
	height: 100rem;
	left: 680rem;
	top: 600rem;
	cursor: pointer;
	background: rgba(255,255,255,0.01);
}

#cornermenubtn {
	position: absolute;
	width: 250rem;
	height: 80rem;
	left: 40rem;
	top: 40rem;
	font-size: 60rem;
	line-height: 80rem;
	text-align: center;
	color: #fff;
	background: rgba(255, 0, 0, 0.5);
	border: 6rem solid #fff;
	border-radius: 15rem;
	background: #225068;
	cursor: pointer;
}

#restartbtn {
	position: absolute;
	width: 350rem;
	height: 80rem;
	left: 40rem;
	top: 180rem;
	font-size: 60rem;
	line-height: 80rem;
	text-align: center;
	color: #fff;
	background: rgba(255, 0, 0, 0.5);
	border: 6rem solid #fff;
	border-radius: 15rem;
	background: #225068;
	cursor: pointer;
}

#closemenubtn {
	position: absolute;
	right: 0;
	background: white;
	color: black;
	font-size: 60rem;
	cursor: pointer;
}

/*
#closehowtobtn {
	position: absolute;
	right: 0;
	background: white;
	color: black;
	font-size: 60rem;
	cursor: pointer;
}
*/

#toyball {
	position: absolute;
	top: 900rem;
	left: 300rem;
	pointer-events: none;
	width: 100rem;
	height: 100rem;
	background-image: url("img/toy-ball.png");
	background-size: contain;
}

#toybell {
	position: absolute;
	top: 770rem;
	left: 450rem;
	pointer-events: none;
	width: 60rem;
	height: 60rem;
	background-image: url("img/toy-bell.png");
	background-size: contain;
}

#toyfeathers {
	position: absolute;
	top: 920rem;
	left: 550rem;
	pointer-events: none;
	width: 200rem;
	height: 150rem;
	background-image: url("img/toy-feathers.png");
	background-size: contain;
}

#toyfish {
	position: absolute;
	top: 950rem;
	left: 1050rem;
	pointer-events: none;
	width: 200rem;
	height: 75rem;
	background-image: url("img/toy-fish.png");
	background-size: contain;
}

#toymouse {
	position: absolute;
	top: 950rem;
	left: 1450rem;
	pointer-events: none;
	width: 160rem;
	height: 100rem;
	background-image: url("img/toy-mouse.png");
	background-size: contain;
}

#toyyarn {
	position: absolute;
	top: 650rem;
	left: 1650rem;
	pointer-events: none;
	width: 222rem;
	height: 210rem;
	background-image: url("img/toyYarn.png");
	background-size: contain;
}

@media all and (max-width: 30em){
	.btn{
		display: block;
		margin: 0.4em auto;
	}
}