-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
500 lines (468 loc) · 33.9 KB
/
index.html
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Meta tag to access responsive media queries: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Open+Sans:400,600" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<!-- CSS stylesheet -->
<link rel="stylesheet" href="styles/style.css">
<!-- Webpage title -->
<title>Hot Mess Express</title>
</head>
<body>
<!-- HEADER -->
<header>
<div class="logoBackground">
<!-- Header Logo -->
<div class="headerLogo wrapper">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="hotMessLogo" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:pink;" cx="256" cy="256" r="256" />
<path style="fill:#FFFBEB;" d="M458.587,355.801l-81.052,16.391c-8.471,1.713-16.728-3.766-18.441-12.237
s3.766-16.728,12.237-18.441l81.052-16.391c3.292-0.666,5.427-3.885,4.762-7.176L425.812,163.01
c-0.666-3.292-3.884-5.428-7.176-4.762l-81.052,16.391c-8.471,1.713-16.727-3.765-18.441-12.237
c-1.713-8.471,3.766-16.728,12.237-18.441l81.052-16.391c20.206-4.086,39.971,9.029,44.057,29.236l31.333,154.937
C491.909,331.951,478.793,351.715,458.587,355.801z" />
<g>
<path style="fill:#D8E0C9;" d="M319.144,162.403c1.713,8.472,9.97,13.95,18.441,12.237l70.405-14.238l-6.204-30.677l-70.405,14.238
C322.91,145.675,317.431,153.932,319.144,162.403z" />
<path style="fill:#D8E0C9;" d="M441.737,327.277l-70.405,14.238c-8.471,1.713-13.95,9.97-12.237,18.441s9.97,13.95,18.441,12.237
l70.405-14.238L441.737,327.277z" />
</g>
<path style="fill:#FFFBEB;" d="M447.64,425.97c-15.26,17.26-32.9,32.53-52.58,45.27l-131.93,26.67l-51.71,10.46h-0.01
c-21.97-3.9-43.19-10.64-63.15-19.93c-2.41-4.22-4.19-8.88-5.21-13.9L84.06,182.85l-9.45-46.73c-0.72-3.56,1.59-7.03,5.15-7.75
l65.04-13.15l225.85-45.68c3.56-0.72,7.04,1.59,7.76,5.15l11.61,57.41l6.2,30.68l2.34,11.56l31.41,155.31v0.01l6.2,30.67
l10.67,52.77C447.72,417.44,447.96,421.76,447.64,425.97z" />
<path style="fill:#D8E0C9;" d="M263.13,497.91l-51.71,10.46h-0.01c-21.97-3.9-43.19-10.64-63.15-19.93
c-2.41-4.22-4.19-8.88-5.21-13.9L84.06,182.85l-9.45-46.73c-0.72-3.56,1.59-7.03,5.15-7.75l65.04-13.15
c-3.57,0.72-5.87,4.19-5.15,7.75l2.42,11.96l32.82,162.28l3.53,17.45l29.67,146.73c0.1,0.51,0.22,1.02,0.34,1.53
c0.12,0.52,0.25,1.04,0.39,1.55c0.09,0.31,0.18,0.63,0.27,0.94c0.2,0.68,0.41,1.36,0.65,2.02c0.14,0.42,0.29,0.83,0.44,1.23
c0.04,0.12,0.08,0.23,0.13,0.35c0.2,0.52,0.41,1.03,0.63,1.54c0.25,0.58,0.51,1.15,0.78,1.72s0.55,1.12,0.84,1.67
c0,0.01,0.01,0.02,0.01,0.03c0.29,0.54,0.58,1.07,0.89,1.6c0.03,0.05,0.06,0.11,0.09,0.16c0.25,0.43,0.51,0.85,0.77,1.27
c0.09,0.15,0.18,0.29,0.28,0.43c0.27,0.43,0.55,0.85,0.85,1.27c0.27,0.4,0.56,0.8,0.85,1.19c0.11,0.15,0.22,0.3,0.33,0.44
c0.28,0.38,0.58,0.76,0.88,1.13l0.15,0.18c0.36,0.45,0.73,0.89,1.11,1.32c0.45,0.5,0.9,0.99,1.35,1.47c0.38,0.4,0.77,0.78,1.16,1.16
c0.47,0.46,0.95,0.91,1.43,1.34h0.01C233.32,496.42,248.12,500.95,263.13,497.91z" />
<path style="fill:#F3D75C;" d="M201.745,491.167c-19.192,3.881-37.897-8.531-41.778-27.723L96.93,151.728
c-0.823-4.071,1.809-8.038,5.88-8.861l252.238-51.009c4.071-0.823,8.038,1.809,8.861,5.88l63.038,311.716
c3.881,19.192-8.531,37.897-27.723,41.778L201.745,491.167z" />
<g>
<path style="fill:#E8C63A;" d="M142.069,134.927l-39.259,7.939c-4.071,0.823-6.703,4.791-5.88,8.861l63.038,311.716
c3.881,19.192,22.586,31.604,41.778,27.723l20.965-4.24c-7.251-6.483-12.546-15.276-14.622-25.542L142.069,134.927z" />
<path style="fill:#E8C63A;" d="M363.908,97.737c-0.823-4.071-4.791-6.703-8.861-5.88l-252.237,51.01
c-4.071,0.823-6.703,4.791-5.88,8.861l9.516,47.057c0.247,0.745,0.496,1.515,0.752,2.332c3.487,11.171,6.551,25.208,9.795,40.069
c4.067,18.635,8.273,37.904,13.7,52.787c4.77,13.082,12.987,30.473,29.21,30.471c1.412,0,2.849-0.146,4.269-0.433
c12.269-2.482,19.543-13.235,21.621-31.958c1.5-13.517,0.529-30.166-0.499-47.793c-1.814-31.117-4.073-69.843,11.475-72.989
c12.076-2.443,23.317-8.033,32.51-16.165c1.135-1.004,2.637-1.557,4.229-1.557c0.438,0,0.877,0.042,1.305,0.127
c3.131,0.618,6.335,0.932,9.524,0.932c3.283,0,6.592-0.333,9.832-0.988c11.235-2.273,21.393-8.423,28.602-17.317
c1.403-1.732,3.442-2.726,5.592-2.726c1.384,0,2.748,0.417,3.946,1.208c5.314,3.505,11.1,6.338,17.195,8.418l0.191,0.063
c18.062,5.76,28.794,23.167,38.263,38.526c9.013,14.619,17.524,28.427,32.031,28.426c0.002,0,0.005,0,0.007,0
c2.144-0.001,4.307-0.337,6.461-0.987L363.908,97.737z" />
</g>
<g>
<circle style="fill:#FCE583;" cx="266.77" cy="341.12" r="21.11" />
<circle style="fill:#FCE583;" cx="218.75" cy="278.45" r="14.189" />
<circle style="fill:#FCE583;" cx="224.2" cy="403.2" r="11.853" />
<circle style="fill:#FCE583;" cx="359.1" cy="359.95" r="33.385" />
<circle style="fill:#FCE583;" cx="249.46" cy="182.83" r="9.44" />
</g>
<path style="fill:#FFFBEB;" d="M420.428,89.319c-2.587-12.785-11.193-22.807-22.266-27.737c-0.27-1.681-0.605-3.365-1.013-5.05
c-7.962-32.913-40.454-54.473-73.875-49.022c-10.668,1.74-20.267,5.945-28.342,11.92c-4.933,3.65-11.335,4.447-17.185,2.593
c-6.561-2.08-13.726-2.572-20.951-1.11c-0.544,0.11-1.067,0.263-1.602,0.393c-10.989-9.535-26.116-14.057-41.478-10.949
c-11.422,2.311-21.066,8.472-27.908,16.84c-13.525-20.034-38.207-31.053-63.376-25.96C99.607,5.856,82.305,22.529,75.798,43.283
c-2.035,6.49-6.5,11.986-12.657,14.874c-17.774,8.338-30.095,26.46-30.095,47.484c0,1.346,0.052,2.68,0.153,4
c0.348,4.538-0.615,9.102-3.079,12.929c-6.16,9.566-8.463,21.628-5.225,33.671c5.466,20.332,26.122,33.739,46.925,30.499
c9.174-1.429,17.118-5.702,23.165-11.734l0.009,0.006c31.896-18.718,31.163,146.487,67.193,139.196
c36.03-7.29-12.867-143.541,32.597-152.74c10.822-2.19,20.365-7.161,28.049-14.014c3.775-3.367,8.931-4.577,13.893-3.593
c4.96,0.983,10.192,1.023,15.458-0.043c9.383-1.899,17.309-6.981,22.881-13.894c5.552-6.888,15.361-8.36,22.747-3.488
c4.625,3.051,9.643,5.501,14.92,7.302c42.209,13.46,48.393,76.009,72.677,65.239c12.57-5.575,16.688-36.539,17.004-68.739
C416.073,122.02,423.77,105.837,420.428,89.319z" />
</svg>
<h1>Hot<span class="break">Mess</span> Express</h1>
</div>
<!-- Header Logo ends -->
</div>
</header>
<!-- HEADER ENDS -->
<!-- MAIN (2 Sections: Homepage + Gampage) -->
<main>
<!-- SECTION 1: HOMEPAGE SECTION -->
<section class="homePage" id="homePage">
<div class="instructionsContainer wrapper">
<!-- Instructions -->
<div class="instructions">
<div class="instructionsTitle">
<h2>How to Play</h2>
<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="vomitIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M504.485,343.671c4.151,0,7.515-3.364,7.515-10.521V136.767c0-1.145-3.364-4.509-7.515-4.509h-96.188 c-4.151,0-7.515,3.364-7.515,7.515v149.793H247.984c-4.151,0-7.515,3.364-7.515,7.515v43.084c0,1.259,0.316,2.498,0.921,3.604 l0.185,0.348c6.437,12.118,31.126,51.657,78.549,51.657h82.757l22.334,67.003c1.023,3.069,3.895,5.138,7.129,5.138h72.141 c4.151,0,7.515-3.364,7.515-7.515v-85.166c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515v77.652H437.76 l-22.334-67.003c-1.023-3.069-3.895-5.138-7.129-5.138h-88.172c-37.63,0-58.307-31.06-64.626-42.479v-33.67h241.472v31.562 C496.971,340.308,500.334,343.671,504.485,343.671z M415.812,289.566V147.288h81.159v142.278H415.812z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M464.407,172.337h-32.063c-4.151,0-7.515,3.364-7.515,7.515s3.364,7.515,7.515,7.515h10.117 c-1.029,2.643-1.6,5.514-1.6,8.517c0,12.983,10.563,23.546,23.546,23.546s23.546-10.563,23.546-23.546 C487.953,182.899,477.39,172.337,464.407,172.337z M464.407,204.399c-4.696,0-8.517-3.82-8.517-8.517s3.82-8.517,8.517-8.517 s8.517,3.82,8.517,8.517S469.103,204.399,464.407,204.399z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M325.763,148.675c-10.073,3.36-23.975-2.19-37.417-7.556c-14.014-5.595-28.504-11.378-41.837-8.715 c-24.468,4.894-33.537,20.345-36.837,32.444c-2.991,10.965-1.695,21.044-1.247,23.778c0.41,25.892,21.587,46.832,47.575,46.832 c25.066,0,45.653-19.482,47.451-44.098c14.629-7.011,25.326-17.968,31.597-32.598 C337.552,152.921,331.785,146.673,325.763,148.675z M256,220.431c-14.606,0-26.996-9.666-31.111-22.937 c7.959,1.445,19.538,3.011,32.371,3.011c1.99,0,4.011-0.038,6.053-0.119c8.622-0.345,16.596-1.446,23.903-3.266 C283.22,210.581,270.742,220.431,256,220.431z M222.83,181.753c-0.148-3.423,0.017-8.336,1.466-13.388 c3.314-11.558,11.544-18.5,25.161-21.223c8.953-1.795,21.339,3.154,33.317,7.935c10.397,4.151,21.023,8.393,31.398,9.433 C290.531,193.19,238.98,185.138,222.83,181.753z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M336.157,244.477h-95.738c-9.768-7.912-49.838-40.359-53.543-43.208c-4.985-3.836-11.167-5.501-17.402-4.687 c-6.146,0.802-11.623,3.915-15.449,8.776L69.33,301.373c-0.111,0.125-0.219,0.256-0.321,0.389 c-6.615,8.599-10.956,31.572-3.621,42.571c11.88,17.822,40.641,56.692,55.385,76.489H23.546C10.563,420.822,0,431.385,0,444.368 c0,12.983,10.563,23.546,23.546,23.546h144.282c12.662,0,23.352-10.443,23.564-23.144c0.063-3.781-0.814-7.552-2.504-10.932 l-49.66-99.319l54.036-64.469l23.924,16.314c4.175,3.361,9.402,5.205,14.766,5.205h104.203v0.001 c12.983,0,23.546-10.563,23.546-23.546C359.703,255.04,349.14,244.477,336.157,244.477z M175.446,440.559 c2.789,5.577-1.405,12.325-7.618,12.325H23.546c-4.696,0-8.517-3.82-8.517-8.517c0-4.696,3.82-8.517,8.517-8.517h112.219 c6.065,0,9.658-7.161,6.012-12.023c-0.48-0.64-48.152-64.232-63.885-87.833c-2.721-4.08-0.868-19.713,2.903-24.903l7.157-8.113 l34.483,34.483c0.662,0.662,1.421,1.166,2.226,1.53L175.446,440.559z M296.579,276.54h-64.626c-1.988,0-3.925-0.701-5.454-1.975 c-0.185-0.153-0.377-0.3-0.575-0.435l-29.815-20.332c-3.191-2.174-7.513-1.579-9.994,1.382l-56.863,67.843l-31.338-31.338 l67.533-76.558c0.111-0.126,0.219-0.257,0.322-0.39c1.387-1.804,3.393-2.958,5.649-3.252c2.252-0.297,4.489,0.307,6.293,1.695 c3.189,2.452,37.577,30.279,55.315,44.65c1.339,1.084,3.009,1.676,4.731,1.676h58.822V276.54z M336.157,276.54h-24.548v-17.033 h24.548c4.696,0,8.517,3.82,8.517,8.517C344.673,272.72,340.853,276.54,336.157,276.54z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M239.969,44.086c-12.983,0-23.546,10.563-23.546,23.546c0,12.983,10.563,23.546,23.546,23.546 s23.546-10.563,23.546-23.546C263.515,54.649,252.952,44.086,239.969,44.086z M239.969,76.149c-4.696,0-8.517-3.82-8.517-8.517 s3.82-8.517,8.517-8.517s8.517,3.82,8.517,8.517S244.665,76.149,239.969,76.149z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M360.203,156.305c-12.983,0-23.546,10.563-23.546,23.546s10.563,23.546,23.546,23.546 c12.983,0,23.546-10.563,23.546-23.546C383.75,166.868,373.187,156.305,360.203,156.305z M360.203,188.368 c-4.696,0-8.517-3.82-8.517-8.517s3.82-8.517,8.517-8.517c4.696,0,8.517,3.82,8.517,8.517S364.9,188.368,360.203,188.368z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M111.718,124.243c-12.983,0-23.546,10.563-23.546,23.546s10.563,23.546,23.546,23.546s23.546-10.563,23.546-23.546 C135.264,134.805,124.702,124.243,111.718,124.243z M111.718,156.305c-4.696,0-8.517-3.82-8.517-8.517s3.82-8.517,8.517-8.517 s8.517,3.82,8.517,8.517S116.414,156.305,111.718,156.305z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M328.141,100.196h-8.517v-8.517c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515v8.517h-8.517 c-4.151,0-7.515,3.364-7.515,7.515c0,4.151,3.364,7.515,7.515,7.515h8.517v8.517c0,4.151,3.364,7.515,7.515,7.515 c4.151,0,7.515-3.364,7.515-7.515v-8.517h8.517c4.151,0,7.515-3.364,7.515-7.515C335.656,103.559,332.292,100.196,328.141,100.196 z"
fill="#0f0d0f" />
</g>
</g>
<g>
<g>
<path d="M199.89,124.243h-8.517v-8.517c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515v8.517h-8.517 c-4.151,0-7.515,3.364-7.515,7.515c0,4.151,3.364,7.515,7.515,7.515h8.517v8.517c0,4.151,3.364,7.515,7.515,7.515 c4.151,0,7.515-3.364,7.515-7.515v-8.517h8.517c4.151,0,7.515-3.364,7.515-7.515S204.042,124.243,199.89,124.243z"
fill="#0f0d0f" />
</g>
</g>
</svg>
</div>
<div class="instructionsText">
<p><span class="highlight">You were wild last night.</span> Now you have to deal with the consequences. <span class="highlight">Hot Mess Express</span> is here to you give you some tough love on how to get through this special circle of hell you created. It's time to get yourself together.</p>
<p id="disclaimer"><span class="highlight">*Disclaimer:</span> Advice includes tried and tested methods by Victoria Chan. Quality of life not guaranteed.</p>
</div>
</div>
<!-- Instructions End -->
<!-- Homepage Buttons -->
<div class="homeBtns">
<!-- guide button -->
<button id="guideBtn">
<p>Hangover Guide</p>
</button>
<!-- game button 1 (displayed in wide screen) -->
<button id="gameBtn1" class="gameBtns">
<p>All Aboard!</p>
</button>
<!-- game button 2 (displayed in small screen) -->
<button id="gameBtn2" class="gameBtns">
<p>All Aboard!</p>
</button>
</div>
</div>
</section>
<!-- END OF SECTION 1: HOMEPAGE -->
<!-- SECTION 2: GAMEPAGE -->
<section class="gamePage" id="gamePage">
<div class="wrapper">
<h2>On a scale of 1 to 5 ...</h2>
<h3>How bad is your hangover?</h3>
<!-- Question Form -->
<form class="questionForm">
<!-- Level 1 Hangover -->
<div class="optionsContainer">
<div class="option option1">
<p>1. The Pardon</p>
<label for="option1">
<input type="radio" id="option1" name="option" value="hangover1">
<span class="icon icon1"></span>
</label>
</div>
<!-- Level 2 Hangover -->
<div class="option option2">
<p>2. Wine Flu</p>
<label for="option2">
<input type="radio" id="option2" class="test" name="option" value="hangover2">
<span class="icon icon2"></span>
</label>
</div>
<!-- Level 3 Hangover-->
<div class="option option3">
<p>3. Shame Spiral</p>
<label for="option3">
<input type="radio" id="option3" name="option" value="hangover3">
<span class="icon icon3"></span>
</label>
</div>
<!-- Level 4 Hangover -->
<div class="option option4">
<p>4. Edge of Death</p>
<label for="option4">
<input type="radio" id="option4" name="option" value="hangover4">
<span class="icon icon4"></span>
</label>
</div>
<!-- Level 5 Hangover -->
<div class="option option5">
<p>5. *Total Trainwreck*</p>
<label for="option5">
<input type="radio" id="option5" name="option" value="hangover5">
<span class="icon icon5"></span>
</label>
</div>
</div>
<!-- Submit Results Button -->
<div class="submitForm">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg id="vomitBag" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.01 512.01" style="enable-background:new 0 0 512.01 512.01;" xml:space="preserve">
<g>
<g>
<path d="M511.557,488.09l-39.552-113.432V8.01c0-2.432-1.104-4.72-2.992-6.24c-1.896-1.512-4.392-2.08-6.744-1.568l-70.264,15.616
L321.741,0.202l-0.008,0.04c-1.4-0.312-2.864-0.296-4.256,0.184l-45.216,15.072l-37.28-14.912c-1.76-0.704-3.712-0.768-5.504-0.16
l-45.216,15.072l-37.28-14.912c-1.768-0.704-3.704-0.768-5.504-0.16L96.005,15.578L50.533,0.426
c-2.44-0.84-5.12-0.416-7.208,1.088c-2.088,1.504-3.32,3.928-3.32,6.496v366.648L0.453,488.09
c-0.296,0.84-0.448,1.736-0.448,2.632v13.288c0,4.424,3.576,8,8,8h352h64h80c4.424,0,8-3.576,8-8v-13.288
C512.005,489.826,511.853,488.93,511.557,488.09z M328.005,17.986l62.264,13.84c1.144,0.248,2.328,0.248,3.472,0l62.264-13.84
v86.8c-8.176,1.624-13.368,5.552-17.696,8.88c-4.792,3.68-8.256,6.344-15.952,6.344c-7.688,0-11.16-2.664-15.944-6.344
c-5.6-4.304-12.568-9.656-25.696-9.656s-20.096,5.36-25.688,9.656c-4.792,3.688-8.248,6.344-15.928,6.344
c-4.984,0-8.152-1.192-11.096-2.984V17.986z M56.005,19.114l37.472,12.48c1.64,0.544,3.424,0.544,5.064,0l45.216-15.072
l37.28,14.912c1.76,0.712,3.712,0.768,5.504,0.16l45.216-15.072l37.28,14.912c1.768,0.712,3.704,0.768,5.504,0.16l37.464-12.48
v87.648c-3.872-1.616-8.52-2.752-14.496-2.752c-13.12,0-20.08,5.352-25.672,9.656c-4.784,3.68-8.248,6.344-15.928,6.344
c-7.68,0-11.136-2.656-15.92-6.344c-5.592-4.296-12.552-9.656-25.672-9.656s-20.08,5.36-25.672,9.656
c-4.792,3.688-8.24,6.344-15.92,6.344s-11.136-2.656-15.92-6.344c-5.6-4.296-12.56-9.656-25.672-9.656s-20.072,5.36-25.664,9.656
c-4.784,3.688-8.24,6.344-15.912,6.344s-11.128-2.656-15.896-6.336c-4.32-3.328-9.496-7.256-17.656-8.88V19.114z M272.005,490.722
v5.288h-256v-3.936l39.552-113.432c0.296-0.84,0.448-1.736,0.448-2.632V121.458c2.848,1.128,5.192,2.808,7.888,4.888
c5.6,4.304,12.552,9.664,25.664,9.664s20.08-5.36,25.672-9.664c4.784-3.68,8.24-6.336,15.904-6.336
c7.68,0,11.136,2.656,15.92,6.344c5.592,4.296,12.552,9.656,25.672,9.656s20.08-5.36,25.672-9.656
c4.792-3.688,8.24-6.344,15.92-6.344s11.136,2.656,15.92,6.344c5.6,4.296,12.56,9.656,25.672,9.656
c13.128,0,20.088-5.36,25.68-9.656c4.792-3.688,8.24-6.344,15.92-6.344c6.88,0,10.4,2.192,14.496,5.288v249.36L272.453,488.09
C272.157,488.93,272.005,489.826,272.005,490.722z M496.005,496.01h-72h-64h-72v-3.936l39.552-113.432
c0.296-0.84,0.448-1.736,0.448-2.632V134.458c3.16,0.936,6.768,1.552,11.096,1.552c13.128,0,20.088-5.352,25.68-9.656
c4.784-3.68,8.248-6.344,15.936-6.344c7.688,0,11.16,2.664,15.944,6.344c5.6,4.304,12.56,9.656,25.696,9.656
s20.104-5.352,25.704-9.656c2.712-2.08,5.072-3.768,7.944-4.904v254.56c0,0.896,0.152,1.792,0.448,2.632l39.552,113.432V496.01z"
/>
</g>
</g>
<g>
<g>
<path d="M104.005,160.01c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S121.653,160.01,104.005,160.01z
M104.005,208.01c-8.824,0-16-7.176-16-16c0-8.824,7.176-16,16-16s16,7.176,16,16C120.005,200.834,112.829,208.01,104.005,208.01z
" />
</g>
</g>
<g>
<g>
<path d="M272.005,320.01c-13.232,0-24,10.768-24,24s10.768,24,24,24s24-10.768,24-24S285.237,320.01,272.005,320.01z
M272.005,352.01c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8c4.416,0,8,3.584,8,8C280.005,348.426,276.421,352.01,272.005,352.01z"
/>
</g>
</g>
<g>
<g>
<path d="M376.005,152.01c-17.648,0-32,14.352-32,32s14.352,32,32,32s32-14.352,32-32S393.653,152.01,376.005,152.01z
M376.005,200.01c-8.824,0-16-7.176-16-16c0-8.824,7.176-16,16-16c8.824,0,16,7.176,16,16
C392.005,192.834,384.829,200.01,376.005,200.01z" />
</g>
</g>
<g>
<g>
<path d="M400.005,360.01c-13.232,0-24,10.768-24,24s10.768,24,24,24s24-10.768,24-24S413.237,360.01,400.005,360.01z
M400.005,392.01c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8c4.416,0,8,3.584,8,8C408.005,388.426,404.421,392.01,400.005,392.01z"
/>
</g>
</g>
<g>
<g>
<path d="M104.005,400.01c-22.056,0-40,17.944-40,40c0,22.056,17.944,40,40,40c22.056,0,40-17.944,40-40
C144.005,417.954,126.061,400.01,104.005,400.01z M104.005,464.01c-13.232,0-24-10.768-24-24s10.768-24,24-24s24,10.768,24,24
S117.237,464.01,104.005,464.01z" />
</g>
</g>
<g>
<g>
<polygon points="117.661,325.666 106.349,314.354 96.005,324.698 85.661,314.354 74.349,325.666 84.693,336.01 74.349,346.354
85.661,357.666 96.005,347.322 106.349,357.666 117.661,346.354 107.317,336.01 " />
</g>
</g>
<g>
<g>
<polygon points="173.661,245.666 162.349,234.354 152.005,244.698 141.661,234.354 130.349,245.666 140.693,256.01
130.349,266.354 141.661,277.666 152.005,267.322 162.349,277.666 173.661,266.354 163.317,256.01 " />
</g>
</g>
<g>
<g>
<polygon points="213.661,173.666 202.349,162.354 192.005,172.698 181.661,162.354 170.349,173.666 180.693,184.01
170.349,194.354 181.661,205.666 192.005,195.322 202.349,205.666 213.661,194.354 203.317,184.01 " />
</g>
</g>
<g>
<g>
<polygon points="381.661,445.666 370.349,434.354 360.005,444.698 349.661,434.354 338.349,445.666 348.693,456.01
338.349,466.354 349.661,477.666 360.005,467.322 370.349,477.666 381.661,466.354 371.317,456.01 " />
</g>
</g>
<g>
<g>
<path d="M232.005,416.01h-16v-16c0-4.424-3.576-8-8-8h-16v-16h-16v24c0,4.424,3.576,8,8,8h16v16c0,4.424,3.576,8,8,8h16v16h16v-24
C240.005,419.586,236.429,416.01,232.005,416.01z" />
</g>
</g>
<g>
<g>
<path d="M272.005,176.01c-4.424,0-8,3.576-8,8v16h-16c-4.424,0-8,3.576-8,8v16h-16v16h24c4.424,0,8-3.576,8-8v-16h16
c4.424,0,8-3.576,8-8v-16h16v-16H272.005z" />
</g>
</g>
<g>
<g>
<rect x="152.005" y="304.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="200.005" y="320.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="80.005" y="264.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="256.005" y="264.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="168.005" y="464.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="344.005" y="304.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="384.005" y="256.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="424.005" y="152.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="336.005" y="232.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="424.005" y="232.01" width="16" height="56" />
</g>
</g>
<g>
<g>
<rect x="408.005" y="312.01" width="16" height="16" />
</g>
</g>
<g>
<g>
<rect x="432.005" y="456.01" width="16" height="16" />
</g>
</g>
</svg>
<!-- Submit Button -->
<label class="visuallyHidden" for="submit">Help Me</label>
<input type="submit" id="submit" name="submit" value="Help me">
</div>
</form>
<!-- End of Question Form -->
<!-- Results (generated via Script.js) -->
<div class="resultsContainer">
<div class="results">
<div class="titleResult"></div>
<div class="textResult" id="results"></div>
</div>
</div>
<!-- End of Results -->
</div>
</section>
<!-- END OF SECTION 2: GAME PAGE -->
</main>
<!-- END OF MAIN -->
<!-- ASIDE (1 Section: Hangover Guidepage) -->
<aside>
<!-- SECTION 3: GUIDEPAGE STARTS -->
<section class="guidePage" id="guidePage">
<div class="guideHeading">
<h3>The 5 Levels of a Hangover</h3>
<i class="fas fa-skull"></i>
<button id="exitBtn">
<i class="far fa-times-circle"></i>
</button>
</div>
<div class="guideContent wrapper">
<div class="level">
<h4><span class="number">1.</span> The Pardon</h4>
<p>No physical pain, a touch of smugness, mild to non-existent headaches. You're also hungry as hell.</p>
</div>
<div class="level">
<h4><span class="number">2.</span> Wine Flu</h4>
<p>Mild nausea, mental and physical slowness, general irritability with (and a possible urge to kill) immediate friends and family.</p>
</div>
<div class="level">
<h4><span class="number">3.</span> Shame Spiral</h4>
<p>Otherwise known as "hangxiety," this level involves a mixture of guilt, self-loathing and paranoia over possible things said and done the night before, coupled with a questionable stomach.</p>
</div>
<div class="level">
<h4><span class="number">4.</span> Edge of Death</h4>
<p>You're starving but afraid to eat, and find yourself rotating between dizziness, hot and cold sweats, and light sobbing.</p>
</div>
<div class="level">
<h4><span class="number">5.</span> Total Trainwreck*</h4>
<p>You've reached the apocalypse. Not only are you experiencing the "holy trinity" - extreme headaches, vomiting and diarrhea, but you're trying to fill the gaps left by your lost wallet, wig, friendships, memory, and of course, dignity.</p>
</div>
</div>
</section>
<!-- END OF SECTION 3: GUIDEPAGE -->
</aside>
<!-- END OF ASIDE -->
<!-- FOOTER STARTS -->
<footer>
<div class="footerText wrapper">
<p>© Hot Mess Express</p>
<p>Icons courtesy of Font Awesome & Flaticon.</p>
</div>
</footer>
<!-- END OF FOOTER -->
<!-- jQuery-->
<script src='https://code.jquery.com/jquery-3.2.1.min.js' integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4='crossorigin='anonymous'></script>
<!-- JavaScript -->
<script src="script.js"></script>
</body>
</html>