Issues:
1:root {
2
--color-blue: #0057b7;
3
--color-yellow: #ffd700;
4
--color-dark: #000;
5
--color-light: #f5f5f5;
6
--ff-body: 'Smooch Sans', sans-serif;
7
--shadow-default: rgba(0, 0, 0, 0.24) 0px 3px 8px;
8}
9
10* {
11 box-sizing: border-box;
12 background-color: var(--color-light);
13 letter-spacing: .03em;
14 margin: 0;
15 max-width: 100%;
16 font-family: var(--ff-body);
17 overflow-y: hidden;
18 line-height: .9em;
19}
20
21/* common parameters*/
22
23.btn {
24 text-align: center;
25 cursor: pointer;
26
display: flex;
27 box-shadow: var(--shadow-default);
28}
29
30a {
31 text-decoration: none;
32}
33
34@media screen and (prefers-reduced-motion) {
35
36 a#btn-clickme:hover,
37 #btn-reset:hover,
38 .uchoice:hover>svg>path {
39 transform: none;
40 transition: none;
41 }
42}
43
44/*header: title, click me button (support)*/
45
46header {
47 height: 25vh;
48 background-color: var(--color-blue);
49
display: flex;
50 position: relative;
51 flex-direction: column;
52 box-shadow: 0 10px 10px -5px;
53 padding: 3rem 3rem 0 3rem;
54}
55
56.title {
57
display: flex;
58 flex-direction: column;
59 height:fit-content;
60}
61
62.title>h1 {
63
display: flex;
64 color: var(--color-light);
65 background-color: var(--color-blue);
66 font-weight: 700;
67
font-size: 5vmax;
68}
69
70.title>h2 {
71
display: flex;
72 color: var(--color-light);
73 background-color: var(--color-blue);
74
font-size: 2vmax;
75 font-weight: 500;
76}
77
78.div-support {
79 position: absolute;
80 bottom: 0;
81 right: 0;
82 justify-content: flex-end;
83}
84
85a#btn-clickme.btn {
86 color: var(--color-light);
87 background-color: var(--color-blue);
88
display: flex;
89 border-radius: 0;
90
font-size: 2vmax;
91 font-weight: 500;
92 padding: .5rem;
93}
94
95a#btn-clickme:hover {
96 color: var(--color-yellow);
97 transition: .5s ease-in-out;
98}
99
100/*main: scores-area, game-area, reset-area*/
101
102.main {
103 position: relative;
104 height: 100%;
105 background-color: var(--color-light);
106}
107
108.scores-area,
109.game-area {
110 width: 100%;
111 position: relative;
112}
113
114/*scores-area: left(user score), middle(result), right(computer score)*/
115
116.scores-area {
117 height: 20vh;
118
display: flex;
119 align-items: center;
120}
121
122.scores-area>* {
123 color: var(--color-dark);
124 font-weight: 400;
125
font-size: 5vmax;
126 text-align: center;
127 justify-content: center;
128}
129
130#user-score,
131#computer-score {
132 color: var(--color-dark);
133 font-weight: 400;
134
font-size: 4vmax;
135}
136
137#result-message {
138
display: flex;
139 align-items: center;
140 color: var(--color-light);
141 flex: 0 1 33.33%;
142 font-weight: 700;
143
font-size: 4vmax;
144 background-color: var(--color-blue);
145 visibility: hidden;
146 text-align: center;
147 box-shadow: var(--shadow-default);
148 border-radius: .1rem;
149 padding: .3rem 0;
150}
151
152.left {
153 flex: 0 1 33.33%;
154}
155
156.right {
157 flex: 0 1 33.33%;
158}
159
160/*game-area: user choices (left), computer choices(right), svg images*/
161
162.game-area {
163 height: 35vh;
164
display: flex;
165 width: 100%;
166 flex-direction: row;
167 justify-content: space-evenly;
168 align-items: center;
169}
170
171.user-choices,
172.computer-choices {
173
display: flex;
174 flex-direction: row;
175}
176
177.user-choices {
178 justify-content: flex-end;
179}
180
181.computer-choices {
182 justify-content: flex-end;
183}
184
185#path-rock,
186#path-paper,
187#path-scissors,
188#path-lizard,
189#path-spock {
190 display: none;
191}
192
193hr {
194 height: 35vh;
195 width: 1px;
196 background-color: var(--color-yellow);
197 border: none;
198}
199
200/*game-area single choices, svg images*/
201
202svg {
203 width: 9vw;
204
margin-inline: .2rem;
205 height: auto;
206}
207
208.user-choices,
209.computer-choices {
210
display: flex;
211 flex-wrap: wrap;
212}
213
214.uchoice,
215.cchoice {
216
display: flex;
217 flex-direction: column;
218 cursor: pointer;
219}
220
221.cchoice svg>path {
222 stroke: var(--color-blue);
223
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
224}
225
226/*reset-area: reset button*/
227
228.reset-area {
229
display: flex;
230 height: 15vh;
231 width: 100%;
232 align-items: center;
233 justify-content: center;
234}
235
236#btn-reset {
237 border: none;
238 background-color: var(--color-blue);
239 color: var(--color-light);
240 align-items: center;
241
font-size: 2.5vmax;
242 font-weight: 700;
243 border-radius: .1rem;
244 padding: .3rem 1.2rem;
245}
246
247#btn-reset:hover {
248 background-color: var(--color-yellow);
249 transition: .5s ease-in-out;
250 color: var(--color-blue);
251}
252
253/*footer: credits paragraph*/
254
255footer {
256
display: flex;
257 height: 5vh;
258 justify-content: center;
259 background-color: var(--color-yellow);
260 position: fixed;
261 width: 100%;
262 bottom: 0;
263 box-shadow: var(--shadow-default);
264}
265
266footer>p {
267
display: flex;
268 font-weight: 500;
269 font-size: 3vh;
270 color: var(--color-dark);
271 background-color: var(--color-yellow);
272 text-align: center;
273 align-items: center;
274}
275
276/* media queries*/
277
278@media only screen and (max-width: 768px) {
279
280 /*header*/
281 header {
282 height: 20vh;
283 padding: 1.5rem 2rem 0 2rem;
284 }
285
286 .title>h2,
287 a#btn-clickme.btn {
288 font-size: 2.4vh;
289 }
290
291 /*scores area*/
292 .scores-area {
293 height: 15vh;
294 display: grid;
295
grid-template-areas: "left right""middle middle";
296
grid-template-columns: 50vw 50vw;
297
grid-template-rows: auto;
298 }
299
300 .left {
301
grid-area: left;
302 align-self: end;
303 }
304
305 #result-message {
306
grid-area: middle;
307 align-self: end;
308 }
309
310 .right {
311
grid-area: right;
312 align-self: end;
313 }
314
315 /*game area*/
316 .game-area {
317 height: 50vh;
318 justify-content: space-around;
319 }
320
321 .computer-choices,
322 .user-choices {
323 flex-direction: column;
324 }
325
326 svg {
327 height: 9vh;
328 width: auto;
329 margin-bottom: .1rem;
330 }
331
332 /*reset area*/
333 .reset-area {
334 height: 10vh;
335 }
336
337 #btn-reset {
338
font-size: 3.5vmax;
339
340 }
341
342 /*footer*/
343 footer>p {
344 font-size: 2vh;
345 }
346}