*{
    margin: 0%;
    padding: 0%;
    text-align: center;
}
header{
    background-color: lightyellow;
    text-align: center;
}
.choices{
    animation: fadeIn 1s;
    padding:2rem;
    justify-content:center;
    gap:3rem;
    /* animation-delay: 3s; */
}
@keyframes  fadeIn{
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}
#userchoices{
    position:absolute;
    top:2.3rem;
}
#compchoices{
    position:absolute;
    top:2.3rem;
    right:0%;
}
.choice,.compchoice{
    display:flex;
    align-items: center;
    justify-content: center;
    height:165px;
    width:165px;
    border-radius:50%;
}
.choice:hover{
    opacity:0.5; 
    cursor:cell;
    background-color:black;
}
img{
    height:150px;
    width:150px;
    object-fit:cover;
    border-radius:50%;
}
#vs{
    position:absolute;
    top:20rem;
    right:49.4%;
    visibility: hidden;
}
#score-board{
    display: flex;
    gap:5rem;
    justify-content:center;
    padding-bottom:2rem;
    padding-top:25rem;
    visibility: hidden;
}
#userscore,#compscore{
    display:inline;
    font-size:30px;
}
#msgbg{
    padding:10px;
    background-color:black;
    border-radius:10px;
    visibility:hidden;
}
#msg{   
    color:white;
    display:inline;
    font-size:20px;
}
pre{
    /* position:absolute;
    top:40rem;
    text-align: left; */
    padding: 20px;
}

#playbtn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    position: absolute;
    top: 10rem;
    left:37%;
    background-color: rgb(14, 245, 245);
    border: solid red;
    border-radius: 5px;
    padding: 5px;
}

#refresh{
    position: absolute;
    top: 2px;
    right: 2px;
    margin:2px;
}
#home{
    font-size: 1.5rem;
    padding: 2px;
    border-radius: 10px; 
}
#yes:hover{
    opacity:0.5;
}
button:hover{
    cursor:pointer;
    opacity: 50%;
}

.comphover:hover{
    opacity:0.5; 
    cursor:cell;
    background-color:black;
}
#playbtn2{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    position: absolute;
    top: 20rem;
    left:42%;
    background-color: rgb(14, 245, 245);
    border: solid red;
    border-radius: 5px;
    padding: 5px;
}
a{
    text-decoration: none;
    color:black;
}
.note{
    position: absolute;
    top:35rem;
    left:35%;
}

footer{
    /* background-color: rgb(219, 191, 150); */
    /* margin-bottom: 50px; */
}

section{
    background-color: rgb(178, 242, 243);
    padding: 20px; 
    margin: 100px 0px; 
    max-width: 90vw; 
    border-radius: 8px; 
    line-height: 1.6;
    box-shadow: 0px 2px 5px 1px;
    text-align: left;
    /* font-size: 1.2rem; */
}

section h2{
    font-size: 25px;
    text-align: left;
}
section h3{
    font-size: 21px;
    text-align: left;
}
section p, section strong, section ul li, section ul li em{
    font-size: 18px;
    text-size-adjust: none;
    text-align: left;
}

ul{
    margin-left: 40px;
    list-style-type: square;
}
#yes,#no{
    display:flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 3rem;
    border-radius: 20%;
    background-color: aqua;
    font-size: 20px;
    top: 5rem;
}
#yes{
    left: 45%;
}
#no{
    right:45%;
}