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 font-weight: 600;
26 cursor: pointer;
27
display: flex;
28 box-shadow: var(--shadow-default);
29}
30
31a {
32 text-decoration: none;
33}
34
35@media screen and (prefers-reduced-motion) {
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}
60
61.title>h1 {
62
display: flex;
63 color: var(--color-light);
64 background-color: var(--color-blue);
65 font-weight: 700;
66
font-size: 5vmax;
67}
68
69.title>h2 {
70
display: flex;
71 color: var(--color-light);
72 background-color: var(--color-blue);
73
font-size: 2vmax;
74 font-weight: 500;
75}
76
77.div-support {
78 position: absolute;
79 bottom: 0;
80 right: 0;
81 justify-content: flex-end;
82}
83
84a#btn-clickme.btn {
85 color: var(--color-light);
86 background-color: var(--color-blue);
87
display: flex;
88 border-radius: 0;
89
font-size: 2vmax;
90 font-weight: 500;
91 padding: .5rem;
92}
93
94a#btn-clickme:hover {
95 color: var(--color-yellow);
96 transition: .5s ease-in-out;
97}
98
99/*main: scores-area, game-area, reset-area*/
100
101.main {
102 position: relative;
103 height: 100%;
104 background-color: var(--color-light);
105}
106
107.scores-area,
108.game-area {
109 width: 100%;
110 position: relative;
111}
112
113/*scores-area: left(user score), middle(result), right(computer score)*/
114
115.scores-area {
116 height: 20vh;
117
display: flex;
118 align-items: center;
119}
120
121.scores-area>* {
122 color: var(--color-dark);
123 font-weight: 400;
124
font-size: 5vmax;
125 text-align: center;
126 justify-content: center;
127}
128
129#user-score,
130#computer-score {
131 color: var(--color-dark);
132 font-weight: 400;
133
font-size: 4vmax;
134}
135
136#result-message {
137
display: flex;
138 align-items: center;
139 color: var(--color-light);
140 flex: 0 1 33.33%;
141 font-weight: 700;
142
font-size: 4vmax;
143 background: var(--color-blue);
144 visibility: hidden;
145 text-align: center;
146 box-shadow: var(--shadow-default);
147 border-radius: .1rem;
148 padding: .3rem 0;
149}
150
151.left {
152 flex: 0 1 33.33%;
153}
154
155.right {
156 flex: 0 1 33.33%;
157}
158
159/*game-area: user choices (left), computer choices(right), svg images*/
160
161.game-area {
162 height: 35vh;
163
display: flex;
164 width: 100%;
165 flex-direction: row;
166 justify-content: space-evenly;
167 align-items: center;
168}
169
170.user-choices,
171.computer-choices {
172
display: flex;
173 flex-direction: row;
174}
175
176.user-choices {
177 justify-content: flex-end;
178}
179
180.computer-choices {
181 justify-content: flex-end;
182}
183
184#path-rock,
185#path-paper,
186#path-scissors,
187#path-lizard,
188#path-spock {
189 display: none;
190}
191
192hr {
193 height: 35vh;
194 width: 1px;
195 background: var(--color-yellow);
196 border: none;
197}
198
199/*game-area single choices, svg images*/
200
201svg {
202 width: 9vw;
203
margin-inline: .2rem;
204 height: auto;
205}
206
207.user-choices,
208.computer-choices {
209
display: flex;
210 flex-wrap: wrap;
211}
212
213.uchoice,
214.cchoice {
215
display: flex;
216 flex-direction: column;
217 cursor: pointer;
218}
219
220.uchoice:hover>svg>path,
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: 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: 1.5vmax;
270 color: var(--color-dark);
271 background: 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 /*scores area*/
280 .scores-area {
281 height: 15vh;
282 display: grid;
283
grid-template-areas: "left right" "middle middle";
284
grid-template-columns: 50vw 50vw;
285
grid-template-rows: auto;
286 }
287 .left {
288
grid-area: left;
289 align-self: end;
290 }
291 #result-message {
292
grid-area: middle;
293 align-self: end;
294 }
295 .right {
296
grid-area: right;
297 align-self: end;
298 }
299 /*game area*/
300 .game-area {
301 height: 50vh;
302 justify-content: space-around;
303 }
304 .computer-choices,
305 .user-choices {
306 flex-direction: column;
307 }
308 svg {
309 height: 9vh;
310 width: auto;
311 margin-bottom: 0.1rem;
312 }
313 /*reset area*/
314 .reset-area {
315 height: 5vh;
316 }
317}