html, body{
	height: 100%;
}

body{
	background-color: #D4EAFF;
	user-select: none;
}

#me{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 20%;
	width: 20%;
    animation-name: animMe;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.elements{
	position: absolute;
	display: none;
}

#pInstructions{
	position: absolute;
	left: 50%;
	bottom: 10%;
	transform: translate(-50%, -50%);
	font-size: 2em;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	z-index: 1000;
	text-align: center;
}





/* ALARM */


#element1{
	width: 35%;
	right:0;
	top: 0;
}


#element2{
	width: 25%;
	left: 0;
	bottom: 0;
}

#element3{
	width: 30%;
	left: 10%;
	top: 0;
}

/* FOOD */


#element4{
	width: 45%;
	left: 10%;
	top: 7%;
}
#element5{
	width: 25%;
	left: 75%;
	bottom: 10%;
}

#element6{
	width: 18%;
	left: 55%;
	bottom: 50%;
}





/* ASSIGNMENTS */


#element7{
	width: 25%;
	left: 15%;
	top: 35%;
}

#element8{
	width: 15%;
	left: 65%;
	top: 5%;
}

#element9{
	width: 30%;
	left: 65%;
	top: 5%;
}

#element10{
	width: 20%;
	right: 75%;
	top: 65%;
}

#element11{
	width: 27%;
	left: 0;
	top: 0;
}

#element12{
	width: 23%;
	left: 55%;
	bottom: 0;
}



/* VIDEOGAMES */

#element13{
	width: 15%;
	left: 75%;
	top: 35%;
}

#element14{
	width: 25%;
	left: 15%;
	top: 35%;
}

#element15{
	width: 8%;
	left: 75%;
	top: 80%;
}

#element16{
	width: 20%;
	left: 30%;
	top: 0;
}






@keyframes animMe {
    from{
		left: 50%; transition-timing-function: ease-in-out;
	}
    25%{
		left: 52%; transition-timing-function: ease-in-out;
	}
    50%{
		left: 50%; transition-timing-function: ease-in-out;
	}
    75%{
		left: 48%; transition-timing-function: ease-in-out;
	}
    to{
		left: 50%; transition-timing-function: ease-in-out;
	}
}