html{
    height: 100%;
    background: radial-gradient(#ffffff, #9198e5) no-repeat;
    background-size: cover;
    
}

@font-face {
    src: url('./assets/fonts/pokemon-dp-pro.ttf');
    font-family: pokemon;
}

body {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: pokemon;
    margin: 0;
    padding: 0;
}

.battle{
    position: relative;
    top: 15vh;
    left: 17.5vw;
    margin: 0;
}

.battle-area, .chat{
    display: inline-block;
}

.battle-area{
    position: absolute;
    width: 40vw;
    height: 40vh;
    background-image: url(./assets/images/battle_background2.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    border-width: 2px;
    border-style: solid;
    border-color: #333;

}

.userBall, .oppBall{
    width: 1.4vw;
    display: block;
}

.sprite{
    position: absolute;
    z-index: 10; 
    width: 8vw;
}

.oppdiv{
    flex-direction: column;
    margin-top: 2vh;
    display: none;
}

.oppPokeball{
    display: flex;
    margin-left: auto;
    top: 1vh;
    right: 1vw;
    justify-content: flex-start;
    position: absolute;
    gap: .5vw;
}

.oppHealthBar{
    width: 20vw;
    height: 6vh;
    margin-left: auto;
    margin-top: 0;
    background-color: white;
    display: flex;
    position: absolute;
    top: 4vh;
    right: 0vw;
}

.oppHP{
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 2vw;
    position: absolute;
}


.oppPkm {
    position: absolute;
    top: 10vh;
    right: 15vw;
}

.userdiv{
    flex-direction: column;
    margin-top: 2vh;
    position: relative;
    display: none;
}

.userPokeball{
    display: flex;
    margin-right: auto;
    margin-top: 0;
    justify-content: flex-start;
    position: absolute;
    top: 13vh;
    left: 1vw;
    gap: 0.5vw;
    
}

.userHealthBar{
    width: 20vw;
    height: 6vh;
    margin-right: auto;
    margin-top: 0;
    background-color: white;
    display: flex;
    position: absolute;
    top: 16vh;
    left: 0vw;
}

.userHP{
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 2vw;
    position: absolute;
}

.userPkm{
    position: absolute;
    top: 22.55vh;
    left: 6vw;
    z-index: 6;
}

.buttons{
    width: 40vw;
    height: 30vh;
    background-color: rgb(145, 152, 229);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    margin: 0;
    position: absolute;
    top: 40vh;
    z-index: 7;
    
}

.start{
    margin-top: 11vh;
}

.startbtn{
    width: 16vw;
    height: 8vh;
    font-size: 3vw;
    display: block;
}

.playbtn{
    width: 16vw;
    height: 8vh;
    font-size: 3vw;
    display: none;
}

.moves{
    margin: 0;   
    gap: .2vw;
}

.switchPkm{
    margin-top: 2vh;
    gap: .4vw;
}

.moves, .switchPkm{
    display: flex;
}

.move{
    display: none;
    width: 9vw;
    height: 6vh;
    font-size: 1.6vw;
    line-height: 0;
    line-height: normal;
    justify-content: center;
    align-items: center;
}

.pkm{
    display: none;
    width: 6vw;
    height: 4vh;
    font-size: 1.5vw;
    line-height: normal;
    justify-content: center;
    align-items: center;
}

button{
    text-align: center;
    font-family: pokemon;
}

.chat{
    display: flex;
    flex-direction: column;
    width: 25vw;
    height: 70vh;
    background-color: white;
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    position: relative;
    top: 15vh;
    left: 57.6vw;
    z-index: 10;
    overflow-y: auto;
    padding: 0;
    margin: 0;
}

p{
    color: black;
    z-index: 11;
    font-size: 2w;
    display: block;
    margin: .4vh 0 0 .5vw;
}

h3{
    color: black;
    z-index: 11;
    font-size: 2.5w;
    display: block;
    margin: 2vh 0 0 .5vw;
}