*, *:before, *:after {
			padding: 0;
			margin: 0;
			border: 0;
			-webkit-box-sizing: border-box;
			        box-sizing: border-box;
}

html, body {
			height: 100%;
			background-color: #333;
			font-family: consolas, monospace;
			color: #fff;
			font-size: 16px;
}

a {
			text-decoration: none;
}

.wrapper {
			min-height: 100%;
			position: relative;
			overflow: hidden;
}

.game {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			cursor: url("../../img/cursor.ico") 24 24, auto;
}

.game:hover .game__win {
			-webkit-animation: win 60s steps(1) forwards;
			        animation: win 60s steps(1) forwards;
}

.game:hover .game__counter:after {
			-webkit-animation: timer_1 60s steps(60) forwards;
			        animation: timer_1 60s steps(60) forwards;
}

.game:hover .game__text span:after {
			-webkit-animation: timer_2 60s steps(60) forwards;
			        animation: timer_2 60s steps(60) forwards;
}

.game__body:hover .game__counter:after,
.game__body:hover .game__text span:after,
.game__body:hover .game__text {
			-webkit-animation-play-state: paused;
			        animation-play-state: paused;
			visibility: visible;
}

.game__body,
.game__items {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			pointer-events: none;
}

.game__body:before,
.game__body:after,
.game__items:before,
.game__items:after {
			content: "";
			pointer-events: all;
			width: 33.333vw;
			height: 33.333vh;
			position: absolute;
			z-index: 1;
			display: inline-block;
}

.game__body:before {
			background-color: yellow;
			-webkit-animation: fly_1 3s infinite;
			        animation: fly_1 3s infinite;
}

.game__body:after {
			background-color: blue;
			-webkit-animation: fly_2 7s infinite;
			        animation: fly_2 7s infinite;
}

.game__items:before {
			background-color: green;
			-webkit-animation: fly_3 5s infinite;
			        animation: fly_3 5s infinite;
}

.game__items:after {
			background-color: red;
			-webkit-animation: fly_4 11s infinite;
			        animation: fly_4 11s infinite;
}

@-webkit-keyframes fly_1 {
			25% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			50% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			75% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}

@keyframes fly_1 {
			25% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			50% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			75% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}
@-webkit-keyframes fly_2 {
			25% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			50% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			75% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}
@keyframes fly_2 {
			25% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			50% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			75% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}
@-webkit-keyframes fly_3 {
			25% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			50% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			75% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}
@keyframes fly_3 {
			25% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			50% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			75% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}
@-webkit-keyframes fly_4 {
			25% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			50% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			75% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}
@keyframes fly_4 {
			25% {
						-webkit-transform: translate(66.667vw, 0vh);
						        transform: translate(66.667vw, 0vh);
			}
			50% {
						-webkit-transform: translate(0vw, 66.667vh);
						        transform: translate(0vw, 66.667vh);
			}
			75% {
						-webkit-transform: translate(66.667vw, 66.667vh);
						        transform: translate(66.667vw, 66.667vh);
			}
			0%, 100% {
						-webkit-transform: translate(0px, 0px);
						        transform: translate(0px, 0px);
			}
}
@-webkit-keyframes win {
			100% {
						visibility: visible;
			}
}
@keyframes win {
			100% {
						visibility: visible;
			}
}
@-webkit-keyframes timer_1 {
			0% {
						text-indent: -300ch;
			}
			50% {
						color: yellow;
			}
			100% {
						color: red;
						text-indent: 0ch;
			}
}
@keyframes timer_1 {
			0% {
						text-indent: -300ch;
			}
			50% {
						color: yellow;
			}
			100% {
						color: red;
						text-indent: 0ch;
			}
}
@-webkit-keyframes timer_2 {
			0% {
						text-indent: 0ch;
			}
			50% {
						color: yellow;
			}
			100% {
						color: red;
						text-indent: -300ch;
			}
}
@keyframes timer_2 {
			0% {
						text-indent: 0ch;
			}
			50% {
						color: yellow;
			}
			100% {
						color: red;
						text-indent: -300ch;
			}
}
.game__body:hover:before,
.game__body:hover:after,
.game__body:hover .game__items::before,
.game__body:hover .game__items:after {
			display: none;
}

.game__body:hover .game__items {
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 20;
			background-color: #333;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			text-align: center;
			pointer-events: all;
}

.game__text {
			font-style: 40px;
			visibility: hidden;
}

.game__text span {
			font-style: 40px;
			width: 44px;
			display: inline-block;
			vertical-align: middle;
			overflow: hidden;
}

.game__counter {
			position: absolute;
			bottom: 20px;
			left: 20px;
			width: 44px;
			background-color: #000;
			z-index: 10;
			font-style: 26px;
			overflow: hidden;
			white-space: nowrap;
}

.game__text span:after,
.game__counter:after {
			display: block;
			content: "00:0000:0100:0200:0300:0400:0500:0600:0700:0800:0900:1000:1100:1200:1300:1400:1500:1600:1700:1800:1900:2000:2100:2200:2300:2400:2500:2600:2700:2800:2900:3000:3100:3200:3300:3400:3500:3600:3700:3800:3900:4000:4100:4200:4300:4400:4500:4600:4700:4800:4900:5000:5100:5200:5300:5400:5500:5600:5700:5800:5900:00";
}

.game__win {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 10;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			background-color: #333;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			text-align: center;
			font-size: 40px;
			visibility: hidden;
}

.info {
			position: absolute;
			right: 20px;
			bottom: 20px;
			z-index: 50;
}

.info__icon {
			display: inline-block;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			border: 1px solid #fff;
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 23px;
}

.info__body {
			display: none;
			position: absolute;
			bottom: 0;
			right: 0;
			background-color: #000;
			width: 250px;
			border-radius: 0 0 18 0;
			padding: 40px 5px 35px 20px;
}

.info__body:target {
			display: block;
}

.info__close {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 18px;
			color: #fff;
}

.info__text {
			padding: 0px 10px 0px 0px;
}

.info__text p {
			margin: 0px 0px 10px 0px;
}

.info__text p:last-child {
			margin: 0;
}