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

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

a {
    text-decoration: none;
}

.head {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnb {
    color: aqua;
}

.btn {
    margin-left: 20px;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    background-color: rgb(27, 112, 79);
    z-index: 60;
}

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

.game {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: url(../imges/img/svg/cool.svg) 5 5, auto;
    fill: orange;

}

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

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

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

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

.game__body,
.game__items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-block;
    border-radius: 50%;
}

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

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

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

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

@keyframes win {
    0% {}

    100% {
        visibility: visible;
    }
}

@keyframes fly_1 {
    25% {
        transform: translate(66.667vw, 0vh);
    }

    50% {
        transform: translate(66.667vw, 66.667vh);
    }

    75% {
        transform: translate(0vw, 66.667vh);
    }

    0%,
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes fly_2 {
    25% {
        transform: translate(0vw, 66.667vh);
    }

    50% {
        transform: translate(66.667vw, 0vh);
    }

    75% {
        transform: translate(66.667vw, 66.667vh);
    }

    0%,
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes fly_3 {
    25% {
        transform: translate(66.667vw, 0vh);
    }

    50% {
        transform: translate(0vw, 66.667vh);
    }

    75% {
        transform: translate(66.667vw, 66.667vh);
    }

    0%,
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes fly_4 {
    25% {
        transform: translate(66.667vw, 0vh);
    }

    50% {
        transform: translate(66.667vw, 66.667vh);
    }

    75% {
        transform: translate(0vw, 66.667vh);
    }

    0%,
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes timer_1 {
    100% {
        text-indent: -300ch;
    }

    50% {
        color: yellow;
    }

    0% {
        color: red;
        text-indent: 0ch;
    }
}

@keyframes timer_1 {
    0% {
        text-indent: 0ch;
    }

    50% {
        color: yellow;
    }

    100% {
        color: red;
        text-indent: -300ch;
    }
}

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

.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: 50;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: all;
}

.game__body:hover .game__text {
    visibility: visible;
}

.game__text span {
    font-size: 40px;
    width: 109px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    color: blue;
}

.game__counter {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 72px;
    font-size: 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:5901:00';
}

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


.info {
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #fff;
}

.info__icon {
    position: absolute;
    right: 40px;
    bottom: 60px;
}


.info__block {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info__close {
    position: absolute;
    right: 65px;
    bottom: 33px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #fff;
}

.info__text {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    text-align: center;
    letter-spacing: 0.03em;

    color: #fff;
}

.info__text p:not(:last-child) {
    margin-bottom: 30px;
}