body {position: relative; display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-size: 15px; min-height: 100vh; margin: 0; background: #222; }
.game_outer {position: relative; width: 60vh;  }
.game_outer .game {position: relative; padding-bottom: 150%; background: #fff; overflow: hidden;}
@media (max-aspect-ratio: 2/3) {
	.game_outer {width: 90%; width: calc(100% - 20px);  }
}
.game .score {position: absolute; font-size: 5%; top: 5%; right: 5%; color: #fff; z-index: 100; text-align: right; line-height: 1; font-size: 2vw; }
.game .score b {display: block; font-size: 3em; font-weight: 700; }

.car {position: absolute; left: 50%; top: 80%; width: 14%; z-index: 10; transform: translate(-50%, 0); transition: all 0.3s; }
.car i {position: relative; display: block; padding-bottom: 193%; background-position: center; background-repeat: no-repeat; background-size: contain;}
.car i {padding-bottom: 209%; background-image: url("../img/carA.png")}

.opponent {position: absolute; left: 50%; z-index: 10; transform: translate(-50%, 0); }
.opponent.opponent1 {width: 14%;}
.opponent.opponent2 {width: 14%;}
.opponent.opponent3 {width: 14%;}
.opponent.opponent4 {width: 18%;}
.opponent i {position: relative; display: block; padding-bottom: 200%; background-position: center; background-repeat: no-repeat; background-size: contain;}
.opponent.opponent1 i {padding-bottom: 209%; background-image: url("../img/car1.png")}
.opponent.opponent2 i {padding-bottom: 215%; background-image: url("../img/car2.png")}
.opponent.opponent3 i {padding-bottom: 195%; background-image: url("../img/car3.png")}
.opponent.opponent4 i {padding-bottom: 212%; background-image: url("../img/car4.png")}

.oops{position: absolute; width: 30%; transform: translate(-50%, -50%); z-index: 120;}
.oops:after {content: ""; display: block; padding-bottom: 100%; }
.oops .oops1 {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/oops1.svg") center no-repeat; backgorund-size: contain;}
.oops .oops2 {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/oops2.svg") center no-repeat; backgorund-size: contain;}



.points {position: absolute; color: #fff; font-size: 2em; transform: translate(-50%, -50%);}
.stationary {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.road {position: absolute; width: 100%; background: url("../img/bg.jpg") bottom repeat-y; background-size: 100% 100%; }
.road:after {content: ""; position: relative; display: block; padding-bottom: 100%; }

.road .present {position: absolute; width: 10%; transform:translate(-50%, -50%); }
.road .present i {position: relative; display: block; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../img/present1.png"); transition: all 0.3s }
.road .present.got i {transform:scale(0); opacity: 0;}
.road .rock {position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain; }
.road .rock:after {content: ""; position: relative; display: block; padding-bottom: 100%; }
.road .rock1 {background-image: url("../img/rock1.png");}
.road .rock2 {background-image: url("../img/rock2.png");}
.road .rock3 {background-image: url("../img/rock3.png");}
.road .rock4 {background-image: url("../img/rock4.png");}

.road .tree {position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain; }
.road .tree:after {content: ""; position: relative; display: block; padding-bottom: 100%; }
.road .tree1 {background-image: url("../img/tree1.png");}
.road .tree2 {background-image: url("../img/tree2.png");}
.road .tree3 {background-image: url("../img/tree3.png");}

.closure {position: absolute; display: flex; flex-direction: column; z-index: 1;}
.closure:before {content: ""; display: block; padding-bottom: 220%; flex-grow: 0; flex-shrink: 0; background-size: 100% auto; background-position: center; background-repeat: no-repeat;}
.closure > div {flex-grow: 1;  background-repeat: repeat-y; background-size: 25% auto;}
.closure:after {content: ""; display: block; padding-bottom: 220%; flex-grow: 0; flex-shrink: 0; background-size: 100% auto; background-position: center; background-repeat: no-repeat;}
.closure.closure-l > div {background-image: url("../img/cone.png"); background-position: top right; }
.closure.closure-r > div {background-image: url("../img/cone.png"); background-position: top left; }
.closure.closure-l:before {background-image: url("../img/cone1.png"); }
.closure.closure-l:after {background-image: url("../img/cone2.png"); }
.closure.closure-r:before {background-image: url("../img/cone2.png"); }
.closure.closure-r:after {background-image: url("../img/cone1.png"); }

.button {
	position: absolute;
	width: 14%;
	bottom: 1.5%;
	border-radius: 50%;
	cursor: pointer;
	background-position:center;
	background-repeat: no-repeat;
	background-color: #b50000;
	background-size: contain;
	box-shadow: inset -3px -5px 10px 2px rgba(0,0,0,0.5);
	border: 2px solid rgba(0,0,0,0.5);
}
.button:after{content: ""; display: block; padding-bottom: 100%; }
.button.button-left {left: 2%; background-image: url("../img/buttonLeft.svg")}
.button.button-right {right: 2%; background-image: url("../img/buttonRight.svg")}
.button:hover {
	box-shadow: inset -3px -5px 10px 2px rgba(0,0,0,0.5), 0px 0px 3px 3px rgba(255,255,255,0.3);	
	outline: 2px solid #fff;
	background-color: #f00;
}