@import 'common.css';


/* start */
.button_game_start {
    position: relative;
    z-index: 1;
    font-size: 35px;
    font-weight: 700;
    padding: 35px 55px;
    cursor: pointer;
}
.countdown {
    position: relative;
    z-index: 1;
    font-size: 200px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 5px 10px rgba(0,0,0, 0.1);
    display: none;
}

/* restart */
.popup_game_restart {
    text-align: center;
}
.result_points {
    margin-bottom: 45px;
}
.result_points_number {
    font-size: 75px;
    font-weight: 700;
    line-height: 1;
}


/* game */
.game {
    height: 100vh;
    background: url(../img/sky.jpeg) no-repeat center / cover;
}
.game .container {
    height: 100%;
    position: relative;
}
.grass {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 90px;
    background: url(../img/grass.svg) repeat-x center bottom / 90px;
}

/* objects */
.game_objects {
    position: relative;
}
.game_objects img {
    width: 90px;
    cursor: grab;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: object;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 20s;
}
@keyframes object {
    100% {
        top: calc(100vh - 100px);
    }
}
.game_objects img:active {
    cursor: grabbing;
}


/* cart */
.cart {
    width: 170px;
    position: absolute;
    bottom: -2px;
    left: -185px;
    z-index: 2;
    transition: 500ms;
}


/* data */
.game_data {
    position: absolute;
    top: 25px;
    right: -25px;
    transform: translateX(100%);
    width: 150px;
}


/* points */
.count_points {
    margin-top: 45px;
    background-color: rgba(255,255,255, 0.4);
    backdrop-filter: blur(5px);
    padding: 15px;
    border-radius: var(--br);
}
.count_points_number {
    font-weight: 700;
    font-size: var(--fs-big);
}


/* life */
.life {
    background-color: rgba(255,255,255, 0.4);
    backdrop-filter: blur(5px);
    padding: 15px;
    border-radius: var(--br);
}
.life_items {
    display: flex;
    justify-content: space-between;
    margin-left: -5px;
    margin-right: -5px;
}
.life_item {
    width: calc(33.3333% - 10px);
    margin-left: 5px;
    margin-right: 5px;
}