rps/style.css at main · rayssarrsilva/rps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/* 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;
}