/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,500;0,700;1,400&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #24272e;
}

/**************HEADER SECTION*********************/

header{
    background: white;
    padding: 20px;
}

header > h1{
    color: #24272e;
    text-align: center;
    font-family: Asap, sans-serif;
}

/**************SCORE BOARD SECTION*********************/

.score-board{
    font-size: 46px;
    margin: 20px auto;
    border: 3px solid white;
    width: 25%;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    padding: 1rem, 1.2rem;
    font-family: Asap, sans-serif;
    position: relative;
}

.badge{
    background: #e2584d;
    color: #fff;
    font-size: 14px;
    padding: 2px 10px;
    font-family: sans-serif;
}

#user-label{
    position: absolute;
    top: 1rem;
    left: -2.45rem;
}

#computer-label{
    position: absolute;
    top: 1rem;
    right: -2.7rem;
}

/**************ROUND WINNER SECTION*********************/
.result{
    font-size: 2.5rem;
    margin: 3rem;
    color: #fff;
}

.result > p{
    text-align: center;
    font-family: Asap, sans-serif;
    font-weight: bold;
}


/**************ROCK-PAPER-SCISSORS BUTTONS SECTION*********************/
.img{
    transform: scale(1.4);
}

.choices{
    text-align: center;
    margin: 3rem 0;
}

.choice{
    margin: 0 1.2rem;
    border: 4px solid #fff;
    border-radius: 50%;
    padding: 1.7rem;
    display: inline-block;
    transition: all 0.3s ease;
}

.choice:hover{
    cursor: pointer;
    background: #394053;
}


/**************FOOTER AND ACTION SECTION*********************/
#action-message{
    text-align: center;
    color: #fff;
    font-family: Asap, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
}

footer{
    margin-top: 3rem;
    text-align: center;
    color: #fff;
    font-family: Asap, sans-serif;
    font-size: 0.8rem;
}

/**************ANIMATION OF ROCK PAPER SCISSORS SECTION*********************/
.green-glow{
    border: 4px solid #1fdf1f;
    box-shadow: #17aa17;
}

.red-glow{
    border: 4px solid #ff0000;
    box-shadow: #af0000;
}

.grey-glow{
    border: 4px solid #9b9999;
    box-shadow: grey;
}