|
1 | | -h1 { display: flex; |
2 | | - justify-content:center; |
3 | | - color: #266150; |
4 | | - font-size:xx-large; |
5 | | - font-weight:bolder; |
6 | | - font-family: 'Rubik', sans-serif; |
| 1 | +h1 { |
| 2 | + display: flex; |
| 3 | + justify-content: center; |
| 4 | + color: #266150; |
| 5 | + font-size: xx-large; |
| 6 | + font-weight: bolder; |
| 7 | + font-family: "Rubik", sans-serif; |
7 | 8 | } |
8 | 9 |
|
9 | | -.score{ |
10 | | - display: flex; |
11 | | - justify-content: center; |
12 | | - color: darkcyan; |
13 | | - position: relative; |
14 | | - |
| 10 | +.score { |
| 11 | + display: flex; |
| 12 | + justify-content: center; |
| 13 | + color: darkcyan; |
| 14 | + position: relative; |
15 | 15 | } |
16 | | -.label{ |
17 | | - display: flex; |
18 | | - justify-content: center; |
19 | | - color: #e03131; |
20 | | - font-weight:bolder; |
21 | | - font-family: 'Rubik', sans-serif; |
22 | | - line-height: 1.8; |
| 16 | +.label { |
| 17 | + display: flex; |
| 18 | + justify-content: center; |
| 19 | + color: #e03131; |
| 20 | + font-weight: bolder; |
| 21 | + font-family: "Rubik", sans-serif; |
| 22 | + line-height: 1.8; |
23 | 23 | } |
24 | 24 |
|
25 | | -.players{ |
26 | | - display: flex; |
27 | | - justify-content: center; |
28 | | - color: #4F4846; |
29 | | - text-indent: 25px; |
30 | | - font-weight: bold; |
31 | | - font-family: 'Anton', sans-serif; |
| 25 | +.players { |
| 26 | + display: flex; |
| 27 | + justify-content: center; |
| 28 | + color: #4f4846; |
| 29 | + text-indent: 25px; |
| 30 | + font-weight: bold; |
| 31 | + font-family: "Anton", sans-serif; |
32 | 32 | } |
33 | 33 |
|
34 | | -.buttons{ |
35 | | - display: flex; |
36 | | - justify-content: center; |
37 | | - margin-top: 15px; |
38 | | - |
39 | | - |
| 34 | +.buttons { |
| 35 | + display: flex; |
| 36 | + justify-content: center; |
| 37 | + margin-top: 15px; |
40 | 38 | } |
41 | 39 |
|
42 | | -.p1button{ |
43 | | - background-color: #adb5bd; |
44 | | - box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); |
45 | | - margin-right: 15px; |
46 | | - border-radius: 12px; |
47 | | - font-size: 16px; |
48 | | - |
49 | | - border: none; |
50 | | - padding: 15px 32px; |
51 | | - font-weight: bolder; |
| 40 | +.p1button { |
| 41 | + background-color: #adb5bd; |
| 42 | + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), |
| 43 | + 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| 44 | + margin-right: 15px; |
| 45 | + border-radius: 12px; |
| 46 | + font-size: 16px; |
| 47 | + |
| 48 | + border: none; |
| 49 | + padding: 15px 32px; |
| 50 | + font-weight: bolder; |
52 | 51 | } |
53 | | -.p1button:active{ |
54 | | - transform: translateY(4px); |
| 52 | +.p1button:active { |
| 53 | + transform: translateY(4px); |
55 | 54 | } |
56 | 55 |
|
| 56 | +.p2button { |
| 57 | + background-color: #adb5bd; |
| 58 | + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), |
| 59 | + 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| 60 | + margin-right: 15px; |
| 61 | + border-radius: 12px; |
| 62 | + font-size: 16px; |
57 | 63 |
|
58 | | -.p2button{ |
59 | | - background-color: #adb5bd; |
60 | | - box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); |
61 | | - margin-right: 15px; |
62 | | - border-radius: 12px; |
63 | | - font-size: 16px; |
64 | | - |
65 | | - border: none; |
66 | | - font-weight: bolder; |
67 | | - padding: 15px 32px; |
| 64 | + border: none; |
| 65 | + font-weight: bolder; |
| 66 | + padding: 15px 32px; |
68 | 67 | } |
69 | | -.p2button:active{ |
70 | | - transform: translateY(4px); |
| 68 | +.p2button:active { |
| 69 | + transform: translateY(4px); |
71 | 70 | } |
72 | | -.reset{ |
73 | | - background-color: #DDAF94 ; |
74 | | - box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); |
75 | | - margin-right: 15px; |
76 | | - border-radius: 12px; |
77 | | - font-size: 16px; |
78 | | - |
79 | | - border: none; |
80 | | - font-weight: bolder; |
81 | | - padding: 15px 32px; |
| 71 | +.reset { |
| 72 | + background-color: #ddaf94; |
| 73 | + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), |
| 74 | + 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| 75 | + margin-right: 15px; |
| 76 | + border-radius: 12px; |
| 77 | + font-size: 16px; |
| 78 | + |
| 79 | + border: none; |
| 80 | + font-weight: bolder; |
| 81 | + padding: 15px 32px; |
82 | 82 | } |
83 | | -.reset:active{ |
84 | | - transform: translateY(4px); |
| 83 | +.reset:active { |
| 84 | + transform: translateY(4px); |
85 | 85 | } |
86 | 86 |
|
| 87 | +body { |
| 88 | + height: 100%; |
| 89 | + display: flex; |
| 90 | + justify-content: center; |
| 91 | + align-items: center; |
| 92 | + background-color: #ffc078; |
| 93 | +} |
87 | 94 |
|
88 | | -body |
89 | | -{ |
90 | | - |
91 | | - height: 100%; |
92 | | - display: flex; |
93 | | - justify-content: center; |
94 | | - align-items: center; |
95 | | - background-color: #ffc078; |
96 | | - |
97 | | - |
| 95 | +html { |
| 96 | + height: 100%; |
98 | 97 | } |
99 | 98 |
|
100 | | -html{ |
101 | | - height: 100%; |
102 | | - } |
| 99 | +.winner { |
| 100 | + color: green; |
| 101 | +} |
103 | 102 |
|
104 | | -.winner{ |
105 | | - color:green; |
106 | | - |
| 103 | +.loser { |
| 104 | + color: red; |
107 | 105 | } |
108 | 106 |
|
109 | | - .loser{ |
110 | | - color: red; |
111 | | - |
112 | | - } |
0 commit comments