*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    background: linear-gradient(135deg, #ff0057, #7b2ff7, #00c6ff);
    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite;
    height: 100vh;
}
@keyframes gradientMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}
/* HEADER */
h1{
    color:#fff;
    background:#000;
    text-align:center;
    padding:1rem;
    font-size:clamp(1.2rem,3vw,2rem);
}

/* CHOICES WRAPPER */
.choices{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
    margin-top:2rem;
}

/* EACH CHOICE */
.choice{
    height:150px;
    width:150px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:20px;
    transition:0.3s;
}

.choice:hover{
    transform:scale(1.08);
    background:#eee;
    cursor:pointer;
}

/* IMAGES */
.choice img{
    height:130px;
    width:130px;
    object-fit:cover;
    border-radius:20px;
}

/* SCORE BOARD */
.score-board{
    display:flex;
    justify-content:center;
    gap:5rem;
    margin-top:2rem;
    text-align:center;
}

.score p{
    font-size:1.2rem;
}

#user,#ai{
    font-size:3rem;
    font-weight:bold;
}

/* MESSAGE */
.msg-container{
    display:flex;
    justify-content:center;
    margin-top:2rem;
}

#msg{
    background:#000;
    color:#fff;
    padding:1rem 2rem;
    border-radius:10px;
    font-size:clamp(1rem,2.5vw,1.6rem);
    text-align:center;
    max-width:90%;
}

/* ---------------- MOBILE ---------------- */
@media (max-width:768px){

    .choice{
        height:120px;
        width:120px;
    }

    .choice img{
        height:100px;
        width:100px;
    }

    .score-board{
        gap:2rem;
    }

    #user,#ai{
        font-size:2.2rem;
    }
}

/* SMALL PHONES */
@media (max-width:480px){

    .choices{
        gap:1rem;
    }

    .choice{
        height:100px;
        width:100px;
    }

    .choice img{
        height:80px;
        width:80px;
    }

    h1{
        font-size:1.2rem;
    }
}