html,
body {
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
}

body {
    background: linear-gradient(135deg, #203e4a, #0f8b8d);
    background-repeat: none;
    background-attachment: fixed;
    background-position: center;

}

.card {
    display: flex;
    justify-content: center;
    gap:2em;
    margin-top: 2%;
}
.score{
    display:flex;
    font-family:hammersmith one;
    font-size:1rem;
    justify-content:center;
    align-items:center;
    width:200px;
}
.title {
    background: darkslategray;
    color: aqua;

    display: flex;
    padding: 0.2em;
    justify-content: center;
    border: 2px solid #00E6FE;
    box-shadow: 0 0 01px #00E6FE;
    animation: neon-glow 1.5s ease-in-out infinite alternate;
}
#win{
    width:300px;
   
    display:flex;
    justify-content: center;
    background:darkgray;
   height:150px;
    font-family:hammersmith one;
    font-size:1.5rem;
    color:aqua;
    align-items:center;
    background: darkslategray;
    animation: neon-glow 1.5s ease-in-out infinite alternate;

}
@keyframes neon-glow {
    0% {
        box-shadow: 0 0 10px #00E6FE;
    }

    100% {
        box-shadow: 0 0 15px #00E6FE, 0 0 20px #deb80d, 0 0 30px #00E6FE, 0 0 35px #00E6FE;
    }
}

.title p {
    font-size: 1.4rem;
    width: 44ch;
    text-align: center;
    text-transform: capitalize;
    font-family: kaushan script;
}

.players{
    margin-top:4%;
    display:flex;
    align-items: center;
    justify-content:center;
    gap:8em;
  
    
}
.player{
    background:aqua;
font-size:3.5rem;

width:290px;

display:flex;
justify-content:center;
border:4px solid white;
background:darkslategray;

}
#choose{
    animation: rockPaperScissors;
    animation-duration: 1s; 
}

.vs{
    font-family:dancing script;
    font-size:2rem;
    color:aqua
}
.player-name{
    display:flex;
    justify-content:center;
    gap:25.6em;
   
    margin-left:-4%;
}

.user{
    background:rgba(0,0,0,0.3);
    backdrop-filter: blur(1px);
    color:aqua;
    font-family:hammersmith one;
    padding-left:2em;
    padding-right:2em;
}
.comp{
    margin-left:0%;
}
.u1{
    margin-left:7%;
}

.option{
    position:absolute;
    displaY:flex;
    flex-direction:column;
    margin-left:7%;
    margin-top:2%;
 display:none;
 transition:2s;
}
.opt{
    background:rgb(46, 43, 43);
    border:1px solid rgb(46, 43, 43);
    border-radius:2em;
    padding:0.6em;

}
.opt:hover{
    cursor: pointer;
    box-shadow:0 0 10px;
}
.play-now{
    display:flex;
    justify-content:center;

}
#play{
    background:silver;
    font-size:1.5rem;
    width:100px;
    padding:0.4em;
    border-style:outset;
    border-color:darkorange;
    border-width:6px;
    font-family:hammersmith one;

}
#play:hover{
    transform:translateY(-10px);
    transition:0.5s ease;
    box-shadow:0 0 10px;
}

.windiv{
   
   display:flex;
   justify-content: center;
   
margin-top:-25%;
display:NONE;
}