/* Header title */
:root{
    --red: #F71616;
    --green: #33F016;
    --blue: #2617CB;
}

#title-rock {
    color: #F71616;
}
#title-paper {
    color: #33F016;
}
#title-scissors {
    color: #2617CB;
}

#title-rock, #title-paper, #title-scissors {
    font-size: 60px;
    text-shadow: 2px 7px 10px rgb(166, 165, 165);
    font-weight: lighter;
}
.title {
    text-align: center;
    padding-top: 140px;
}

/* sub header */
.sub-title {
    text-shadow: 2px 7px 10px rgb(166, 165, 165);
    font-size: 15px;
    font-weight: lighter;
    text-align: center;
    font-style: bold;
}

/* Buttons */
.rock, .paper, .scissors {
    padding: 3px 30px;
    border-radius: 26px;
    color: white;
    border: none;
    font-size: 25px;
}
.rock {
    background-color: var(--red);
}
.paper {
    background-color: var(--green);
}
.scissors {
    background-color: var(--blue);
}
.buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    padding-top: 50px;
}
.ganhador, .perdedor {
    font-size: 55px;
    text-align: center;
}
.ganhador {
    color: var(--green);
}
.perdedor {
    color: var(--red);
}
#yw {
    color: var(--green);
}
#yl {
    color: var(--red);
}
.ou {
    color: black;
}