@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@500&display=swap');

*{
    margin: 0;padding: 0;
}

body{
    overflow: hidden;
    background: linear-gradient(rgb(43, 42, 51) 10%,rgb(8, 8, 158) 90%);
}
.fight{
    font-size:5vw;
    height:12vh;
    color:rgb(154, 150, 237);
    font-weight: bold;
    font-family:'Tektur', cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    /* visibility: hidden; */
}
.reload{
    font-size:2vh;
    padding:2vh;
    color:rgb(250, 250, 250);
    background-color: rgb(7, 7, 75);
    border-radius: 50%;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility:hidden;
    margin:auto;
}
.health{
    width:100vw;
    height: 6vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* visibility: hidden; */
}
.hHP{
    margin-left:300px;
}
.vHP{
    margin-right:300px;
}
.hHP,.vHP{
    width:300px;
    height:6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bolder;
    font-size: large;
    text-align:center;
}
.hHP>p,.vHP>p{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: red;
    width:100%;
    font-weight: bolder;
    font-size: large;
    text-align:center;
}
.hHP img,.vHP img{
    height:6vh;padding-right:15px;
}
.gameContainer>p{
    margin: 30px;
}
.gameContainer{
    background-image: url("images/moon.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    width:100vw;
    height:100vh;
}
.hero{
    background-image: url("images/goku.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;width: 170px;
    position: absolute;
    bottom:60px;
    left:200px;
}
.villain{
    background-image: url("images/beerus.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 280px;width: 170px;
    position: absolute;
    bottom:60px;
    left: calc(100% - 370px);
}
.blue{
    background-image: url("images/blue.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;width: 100px;
    position: absolute;
    bottom:180px;
    left:120px;
}
.purple{
    background-image: url("images/purple.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;width: 100px;
    position: absolute;
    bottom:180px;
    left:-50px;
}
.gameContainer>p{
    font-size: 13px;
    color:rgb(75, 20, 20);
}
.infor{
    height:100vh;
    width:80vw;
    margin:auto;
    padding: 20px;
    font-size: 35px;
    font-family:'Tektur', cursive;
    text-align: center;
    color:rgb(141, 187, 252);
    visibility: visible;
}
.infor>button{
    height:50px;
    margin:30px;
    width:100px;
    border: 2px dotted black;
    font-family:'Tektur', cursive;
    border-radius: 50%;
    background-color: rgb(12, 96, 231);
    color:rgb(153, 224, 248);
    visibility: visible;
}




/*JUMP ANIMATION*/
.jump{
    animation:jump 0.8s linear;
}
@keyframes jump{
    0%{
        bottom:60px;
    }
    /* 25%{
        bottom:350px;
    } */
    50%{
        bottom:450px;
    }
    /* 75%{
        bottom:350px;
    } */
    100%{
        bottom:60px;
    }
}


/*ATTACK ANIMATIONS*/
.animateBlue{
    animation: blu 1.5s linear;
}
.animatePurple{
    animation: purpl 1.5s linear;
}

@keyframes blu{
    0%{
        left:120px
    }
    100%{
        left:100vw;
    }
}
@keyframes purpl{
    0%{
        left:-50px;
    }
    100%{
        left:-100vw;
    }
}