*{
    margin:0 0 0 0;
    box-sizing: border-box;
    padding: 0 0 0 0;
    font-family: 'neucha',cursive;
}

h2{
    color: #F7E987;
}

img{
    height: 13vh;
    width: 13vh;
}

main{
    background-color:#252B48;
    height: 100vh;
    overflow: hidden;
}

.title{
    display: flex;
    justify-content: space-evenly;
    padding: 4vh;
    background-color: #1b3262;
    color: #5B9A8B;
}

.titlekid{
    display: flex;
    gap:1vw;
}

.bg{
    height: 90%;
}

.score{
    text-align: center;
    display: flex;
    justify-content: space-around;
    padding: 40px;
}

#play{
    display: flex;
    height: 100%;
}

.computerside{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.computerside>div{
    height: 33%;
}

.computerside>div{
    display: none;
}





.playerside{
    width: 50%;
    height: 80%;
}

.playerside>div{
    display: flex;
    justify-content: center;
    height: 33%;
}


.playerside>div>img:hover{
    height: 18vh;
    width: 18vh;    
    background-blend-mode: multiply;
    background-color: #252B48;
}

.win{
    display: none;
    position: absolute;
    top: 40%;
    left: 35%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 50px;
    color: #F7E987;
    background-color: rgb(0, 109, 100);
    padding: 40px;
    z-index: 9999;
    border-radius: 30%;
}

#pwin,#cwin,#draw{
    display: none;
}


audio{
    display: none;
    background-color: transparent;
    color: black;
}

audio::-webkit-media-controls-panel{
    background-color: #1b3262;
    border: transparent;
}

.logo{
    height: 4vh;
    width: auto;
}

@media (max-height:810px) {
    img{
        height: 15vh;
        width: auto;
    }
}

@media (max-height:896px) {
    img{
        height: 20vh;
        width: auto;
    }
    h2,h1{
        font-size: 1.5vh;
    }
}

@media (max-height:478px) {
    img{
        height: 15vh;
        width: auto;
    }
    h2{
        font-size: 0.1vh;
    }
}

@media (max-height:667px) {
    img{
        height: 15vh;
        width: 15vh;
    }
    h2{
        font-size: 4vw;
    }
    .logo{
        height: 3vh;
        width: auto;
    }
    img::hover{
        height: 12vh;
        width: auto;
    }
}

@media(max-height:916px){
    img{
        height: 10vh;
        width: auto;
    }
    #computerscore #playerscore{
        font-size: 1vh;
    }
    h1{
        font-size: 2vh;
    }
    img::hover{
        height: 12vh;
        width: auto;
    }
}