.game {
    margin-top: 15vh;

}
.forBackflex{
    display: flex;
    justify-content: center;
    
}
.back {
    width: 50vw;
    height: 50vh;
    background-color: aquamarine;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    cursor: url("/img/target.png"), pointer;
}
.buttontext{
    color: white;
    margin: 0 auto;
    font-size: 2rem;
    text-align: center;
}
.chaykaflex {
    display: flex;
    justify-content: center;
}

.chayka {
    background-image: url("/img/chayka.png");
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    margin: 0 auto;

}
.alert{
    color:white;
  text-align: center;
    max-width: 500px;
font-size: 1.5rem;
 left: 20%;
    background-color: #272b30;
    margin: 0 auto;
    /* position: absolute;
    z-index: 100; */
}  
.alerttel{
    opacity: 0;
}  
.alerttel1{
opacity: 1;
    color:white;
  text-align: center;
    max-width: 500px;
font-size: 1.5rem;
    margin:0 auto;
    

}
.alerttel1 a{
    background-color: #272b30;
    list-style: none;
    color: #FFB742;}

    .nazad{
        color: #FFB742;
        font-style: italic;
        text-decoration: underline;
    }
.warship {
    background-image: url("/img/warship.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;
}

.forPosition{position: relative;}
.allertchayka {
    color: #272b30;
    font-size: 1rem;
    border: 4px solid #272b30;
    width: 200px;
    border-radius: 20px;
    margin: 0 auto;
    text-align: center;
}

.hidden {
    display: none;
}

.warship2 {
    background-image: url("/img/warship2.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;

}

.warship3 {
    background-image: url("/img/warship3.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;

}

.warship4 {
    background-image: url("/img/warship4.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;

}

.warship5 {
    background-image: url("/img/warship5.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;

}

.warship6 {
    background-image: url("/img/warship6.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;

}

.warship10 {
    background-image: url("/img/warship2.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;

}

.warship7 {
    background-image: url("/img/warship6.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;

}

.warship8 {
    background-image: url("/img/warship2.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;
}

.warship9 {
    background-image: url("/img/warship3.png");
    width: 70px;
    height: 70px;
    background-size: 70px 70px;
    position: absolute;
    z-index: 1;
    bottom: 0;
}

.fall {
    animation: fall 2s;
    -moz-animation:fall 2s; 
    -webkit-animation:fall 2s; 
}

/* .chayka2{
    background-image: url("/img/chayka2.png");
    width: 50px;
    height: 50px;
    background-size: 50px 50px; 
    margin: 0 auto;
    
} */
.chaykafl {
    animation: chaykafly 10s infinite;
    -moz-animation:chaykafly 10s infinite ;
    -webkit-animation:chaykafly 10s infinite ;
}

.flexwave {
    justify-content: center;
    display: flex;

}

.wave {
    background-image: url("/img/waves.png");
    width: 100px;
    height: 100px;
    background-size: 100px 100px;
}

.animate {
    animation: wavesRun 2s infinite;
    -moz-animation: wavesRun 2s infinite;
    -webkit-animation:  wavesRun 2s infinite;;
}

.animate2 {
    animation: wavesRun2 2s infinite;
    -moz-animation: wavesRun2 2s infinite;
    -webkit-animation: wavesRun2 2s infinite;;
}

/* кнопки */

.button {

    background-color: #272b30;
    border-radius: 20px;
    margin-top: 20px;
    margin-left: 20px;
    width: 250px;
    font-size: 2rem;
    color: #FFB742;
}

.buttonOnceMore {
    display: none;
}
.flexForbuttonTimer{
    display: flex;
    flex-direction: column;
}
.flexbuttongame {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
}

.buttonOnceMoreShow {

    background-color: #272b30;
    border-radius: 20px;
 
    width: 300px;
    font-size: 2rem;
    color: #FFB742;
}


/* стилізація таймера та балів */

.timerflex {
    justify-content: center;
    display: flex;

}


.timer {
    margin-left: 20px;
    width: 100px;
    margin-bottom: 20px;
    border-radius: 20px;
    border: 4px solid #272b30;
    display: flex;
    flex-direction: column;
    background-color: #272b30;
    font-size: 1.5rem;
    text-align: center;
    color: white;

    box-shadow: 2px 2px 2px #FFB742;
}

.timer2 {
    margin-left: 20px;
    width: 100px;
    margin-bottom: 20px;
    border-radius: 20px;
    border: 4px solid #272b30;
    display: flex;
    flex-direction: column;

    background-color: #272b30;
    font-size: 1.5rem;
    text-align: center;
    color: white;
box-sizing: border-box;
    box-shadow: 2px 2px 2px #FFB742;
}

.seconds1 {
    box-sizing: border-box;
    color: #FFB742;
margin: 0 auto;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    background-image: url("/img/warship3.png");
font-size: 2rem;
padding-top: 10%;
text-align: center;
}


.timercount {

    background-color: #323436;
    color: #FFB742;
}
.rules{

    padding-top: 20px;
 position: absolute;
    z-index: 1000;
    color:white;
    text-align: center;
      max-width: 70vw;
  font-size: 1.5rem;
   left: 15%;
      background-color: #272b30;
      line-height: 2rem;   
}
.rules span{
    color: #FFB742;
}
.ruleshidden{
    display: none;
}



@keyframes wavesRun {
    0% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-20px);
    }
}

@keyframes wavesRun2 {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(20px);
    }
}

@keyframes chaykafly {
    0% {
        transform: translateX(100px);
        opacity: 1;
    }

    20% {
        opacity: 0.5;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: translateX(-100px);
        opacity: 1;
    }
}

@keyframes fall {
    0% {
        opacity: 1;
        transform: translateY(0);

    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: translateY(110vh);

    }
}

/* moz */

@-moz-keyframes wavesRun {
    0% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-20px);
    }
}

@-moz-keyframes wavesRun2 {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(20px);
    }
}

@-moz-keyframes chaykafly {
    0% {
        transform: translateX(100px);
        opacity: 1;
    }

    20% {
        opacity: 0.5;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: translateX(-100px);
        opacity: 1;
    }
}

@-moz-keyframes fall {
    0% {
        opacity: 1;
        transform: translateY(0);

    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: translateY(110vh);

    }
}

/* kit */


@-webkit-keyframes wavesRun {
    0% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-20px);
    }
}

@-webkit-keyframes wavesRun2 {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(20px);
    }
}

@-webkit-keyframes chaykafly {
    0% {
        transform: translateX(100px);
        opacity: 1;
    }

    20% {
        opacity: 0.5;
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: translateX(-100px);
        opacity: 1;
    }
}

@-webkit-keyframes fall {
    0% {
        opacity: 1;
        transform: translateY(0);

    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: translateY(110vh);

    }
}

@media screen and (max-width: 900px) {
    .game {
        margin-top: 30vh;
    
    }
    .wave{
        margin-top: 5%;
    }
    .chayka,.warship,.warship2,.warship3,.warship4,.warship5,.warship6,.warship7,.warship8,.warship9,.warship10 {
        width: 50px;
        height: 50px;
        background-size: 50px 50px;  
    }}

@media screen and (max-width: 450px) {
   

   
    .forBackflex{
        display: block;
    }

    .back {
        width: 90vw;
       
    }
   
    .flexbuttongame {
        margin: 0 auto;
    }
    .button{
        margin-bottom: 20px;
    }
    .rules img{
     display: none;
    }
}