* {
    box-sizing: border-box;
}

html, body, .container {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

#gameCanvas{
	background: #aac254;
	position: absolute;
	left: calc(340px - 192px);
	top: 130px;
	box-shadow: inset 1px 1px 28px 5px rgba(0, 0, 0, 0.65);
}
.grayAroundCanvas{
	border-radius:10px;
	background:gray;
	width:610px;
	height:468px;
	position:absolute;
	left:35px;
	top:65px;
	border-bottom-right-radius: 15%;
}
.hr-1{
	background-color:#a8577d;
	border: 2px solid #a8577d;
	margin-top:26px;
}
.hr-2{
	background-color:#545c80;
	border: 2px solid #545c80;
	margin-top:5px;
}
h1{
	color:white;
	font-family: "avenir";
	font-size: 15px;
	font-weight: 50;
}
.b-light{
	position: absolute;
	top:190px;
	left:28px;
	width:20px;
	height:20px;
	background: #e20606;
	border-radius: 50%;
	box-shadow: inset 1px 1px 2px 3px rgba(0, 0, 0, 0.65);
}
.battery{
	position: absolute;
	top:200px;
	left:15px;
	padding: 10px;
}
.DOT{
	background: gray;
	position: absolute;
	top:4px;
	left:250px;
	padding: 10px;
}


div {
    display: inline-block;
}

.container {
    display: block;
    height: 100%;
    margin: auto;
    perspective: 2000px;
    width: 100%;
}

.gameboy {
    height: 1118px;
    position: relative;
    transform-style: preserve-3d;
    width: 680px;
}

.gameboy__face {
    background-color: #E3E5DC;
    border: 1px solid black;
    position: absolute;
    border-radius: 20px 20px 20px 20px;
}

/**
* Front Side
**/
.gameboy_front {
    /* background-color: blue; */
    height: 1118px;
    transform: rotateY(0deg) translateZ(340px);
    width: 680px;
    border-bottom-right-radius: 15%;
}


/**
* Left Side
**/
.gameboy_left {
    /* background-color: pink; */
    height: 1118px;
    transform: rotateY(-90deg) translateX(220px) translateZ(121px);
    width: 240px;
}


/**
* Right Side
**/
.gameboy_right {
    /* background-color: green; */
    height: 1118px;
    transform: rotateY(90deg) translateX(-220px) translateZ(561px);
    width: 240px;
}


/**
* Back Side
**/
.gameboy_back {
    /* background-color: purple; */
    height: 1118px;
    transform: rotateY(180deg) translateZ(-100px);;
    width: 680px;
    border-bottom-left-radius: 15%;
}


/**
* Top Side
**/
.gameboy_top {
    /* background-color: orange; */
    height: 240px;
    transform: rotateX(90deg) translateY(220px) translateZ(118px);
    width: 680px;
}


/**
* Back Side
**/
.gameboy_bottom {
    /* background-color: yellow; */
    height: 240px;
    transform: rotateX(-90deg) translateY(-220px) translateZ(998px);
    width: 680px;
}

.info-text {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    bottom: 3rem;
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 3rem;
    font-weight: bold;
    height: 6rem;
    margin: 0 10%;
    padding: 1.5rem;
    position: fixed;
    text-align: center;
    width: 80%;
}