-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
395 lines (347 loc) · 24.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Meaningful Acts: RPG storytelling</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Averia Sans Libre">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="custom_mods.css">
<!--. ....... :.,... ....... . ............. .. ... . .. ... ...+N~. .
..~........,..........:7IZ,.~?II?++=~~~::::::::::::::~$OOZZ8OO888DD888888DDDDN8O
.,~=====+?IIZDDDNDDDDDDDDOZZOOZZ$7I?=~~:::~~~+??III?++$8O8OOO8DDDDDD88DDDNNND,..
?+??++++?II7ZDDDDNNNNDDD8O8DNNNNNDO$?=~~~=+?7Z88DD8O$I$D888OO8DDDDDDDDDDNNMMMZM$
.:I7II??I777ZNNNDNNNNNDD8DNNNMMMMNNDO7+==+IODNNMMMNNDOZNDD8D8DDDDDDDDDDNNMMMMMMO
..,.$$777777ONNNNNNNNNDD8DNMMMMMMMMNDO7+=+$8NMMMMMMMN8ZNNNDDDDDNDDNNNNNNNMMMMM7.
..+=77777$$$O88DNNNNNNNDDNMMMMMMMMMMN8ZI+IOMMMMMMMMMMDODMNNNNNNNDDNDNNNNNMMM...=
..+IIIIII7$$Z8OODMNNMNNDDDMMMMMMMMMMNDZ??IOMMMMMMMMMMDOOMNMNNNNNNNNNNNNNNNMMMM.,
.=I?????I7$$ZOOO8NNMMNDO8NMMMMMMMMMMD8ZI+?78MMMMMMMMMD$$NNDDNNNNNNNNNNNNNMMMM=:.
..I?IIII77$ZZ88OODNNMNOZONMMMMMMMMND8OZ7+=?IZMMMMMMMNO+INZ8DNNNNMMMNNNNNNMMMMZ88
,=I?+IIII7ZZZZZODD8DN8Z$ODNMMMMMMN8OOZZ7+===?DMMMMMN8Z=?OI8NNNNNNNNNNNNNNMMMMN,.
,.=I=IIII7ZZZZOO8DD8DOZ$88DDDDDDDDOOZZ$I+===+ZDNND88ZI~+I?DNNNNNMMNNNNNNNMMMM...
+7I77III77$ZZZZZOOOO8OZO88D88888OZ8ZOO$?=====$O8OZ$77+==++DNNNNNMMMNNNNNMMMMMM..
..?=I7I77$ZZZZZZZOOOOZZ8DDDDD88887ZO8DD$I???+?I8OZZZZ+===INNNNNNMMMNNNNNMMMMMN..
.I+77777$$ZZOZZOOOO8OZO8DDDDDDDD$ZZZ8DDDOZ$7II88$OOO$7=~?8NNNNNNMMNNNNNNMMMMMD..
..I,7$$$$ZZOOOOOODMM8O8ODDDNDNNDDNNMMMMMMMMMNOO88OZO$7=DNNMMMMMMMMMNMNNMMMMMMMM.
..IZZZZZZOO8888888NMNODDDDNNNNNMMMMMMMMMMMMMMMNNDZZZ7++NMMMMMMMMMMMMMMMMMMMMMM7.
.I~.ZZZZOO88888888DMN8DDDDNNNDNMMMMMMMMMMMMMMMMMN87Z$=IMMMMMMMMMMMMMMMMMMMMMM.:.
:OOO77OOO888DDDDDDDNMDDNNNNNNDNMMMMMfindmeMMMMMMDO7O$?OMMMMMMMMMMMMMMMMMMMMMM~=.
I+88888888DDDDDNNNNNNNNNNNNNNDNMMMMMMMMMMMMMMMMOOZ$OZ$NMMMMMMMMMMMMMMMMMMMMMM+$.
+O88888888DDDDNNNNNDNNMMNNNNNNNMMMMMMMMMMMMMMMM7ZZ$OZNMMMMMMMMMMMMMMMMMMMMMMMMN,
ZNDDDDDDDDDNNNNMMMNNNNMMMMMMNNNMMMMMMMMMMMMMMMN$Z8ZONMMMMMMMMMMMMMMMMMMMMMMMMMD.
...,+DDDDDNNNNMMMMMNNNMMMMMMMNNMMMMMMMMMMMMMMM$ZOOO8MMMMMMMMMMMMMMMMMMMMMMMMM..,
.,DMNNNNNNNNNMMMMMMNNMMMMMMMMMMMMMMMMMMMMMMMMNZODD8DMMMMMMMMMMMMMMMMMMMMMMMMNMN.
Z$NNNNNNNNNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNODDD8NMMMMMMMMMMMMMMMMMMMMMMMMM~O8
.INNNNNNNNNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNOD888NMMMMMMMMMMMMMMMMMMMMMMMMMMN.
.MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNZ8888NMMMMMMMMMMMMMMMMMMMNNMMMM.
.=MMMMN7=..:8?MM:M7MMMMMMMMMMMMMMMMMMMMMMM.M8ND887DNMMMMMMMMMMMMMMMNMMNNDDMM,, $-->
<style>
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url("images/regio_tall2.png");
min-height: 100%;
}
/* Second image (Contact) */
.bgimg-2 {
background-image: url("images/toronto_dread2.png");
min-height: 60%;
}
/* Third image (Game) */
.bgimg-3 {
background-image: url("images/jupiters_eye2.png");
min-height: 60%;
}
/* Fourth image (Contact) */
.bgimg-4 {
background-image: url("images/closeup_painting2.png");
min-height: 60%;
}
/* Fifth image (Contact) */
.bgimg-5 {
background-image: url("images/tentacle_field.svg");
min-width: 100%;
min-height: 400px;
}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<ul class="w3-navbar w3-black w3-card-2 w3-left-align">
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
<a class="w3-padding-large" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
</li>
<li class="w3-hide-small"><a href="#about" class="w3-padding-large">ABOUT</a></li>
<li class="w3-hide-small"><a href="#game" class="w3-padding-large">GAME</a></li>
<li class="w3-hide-small"><a href="#story" class="w3-padding-large">STORY</a></li>
<li class=><a href="#contact" class="w3-padding-large">PLAY</a></li>
<li class="w3-hide-small w3-dropdown-hover">
<a href="javascript:void(0)" class="w3-hover-none w3-padding-large" title="More">Details <i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#game">GAME</a>
<a href="#story">STORY</a>
<a href="#">PARTICIPANTS</a>
</div>
</li>
<!-- some day I'd like this to be visible no matter what in some sort of drop down menu perhaps -->
<li class="w3-hide-medium w3-hide-small w3-right w3-padding-large">
<audio controls autoplay>
<source src="sounds/Purist_Trail_of_Cthulhu_Theme2.mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>
</li>
</ul>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
<ul class="w3-navbar w3-left-align w3-black">
<li><a class="w3-padding-medium" href="#about">ABOUT</a></li>
<li><a class="w3-padding-medium" href="#game">GAME DETAILS</a></li>
<li><a class="w3-padding-medium" href="#story">STORY DETAILS</a></li>
<li><a class="w3-padding-medium" href="#">PARTICIPANTS</a></li>
</ul>
</div>
<!-- First Parallax Image with fading in hook -->
<div class="bgimg-1 w3-display-container" id="home">
<div class="w3-display-middle" style="white-space:pre;">
<div class="w3-align-left w3-padding-large introtext">
<span class="t1 animate">There will be puzzles </span><span class="animate t2">and there will be cunning.</span>
<span class="animate t3">There will be tragedy </span><span class="animate t4">and there will be heroics.</span>
<span class="animate t5">There will be mystery </span><span class="animate t6">and there will be insight.</span>
<span class="animate t7">Collect clues and unravel the horror: </span><span class="sanimate t8">in the end</span><span class="sanimate t9"> nothing</span><span class="sanimate t10"> will</span><span class="sanimate t11"> save</span><span class="sanimate t12"> you.</span>
<span class="sanimate t13">Return to reality with only the memories of your meaningful acts.</span>
</div>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h1 class="w3-center">Welcome prospective player<span class="blink">_</span></h1>
<div class="w3-panel w3-light-grey w3-leftbar">
<i class="w3-serif w3-xlarge">That is not dead that can eternal lie <br> And with strange aeons even death may die <br></i>
<span class="w3-sans"> - H.P. Lovecraft</span>
</div>
<h2>The Pitch</h2>
<p>The <em>Trail of Cthluhu</em> Corebook says to pitch your game as X meets Y so that potential players will get a sense of what your game is like. I decided that as an organizer
(known in-game as a Keeper) my game will aim to capture the tragic character arcs of
<a href="https://s-media-cache-ak0.pinimg.com/originals/df/2a/1f/df2a1f185c3c9fe86c224a6d44c8ad17.gif">Penny Dreadful</a> with the open world reality-simulating "normal" of
<a href="https://cdn.mmos.com/wp-content/gallery/second-life-overview/Second-Life-Profile.jpg">Second Life</a>. The goal of this game is to explore your
<a href="https://youtu.be/YfY1lfFu8j8?t=45s">character</a> (known in-game as an Investigator) and the <a href="https://youtu.be/_ccxVZXRZS8?t=10s">environment</a> in a space where you have the freedom to be as unashamedly
cautious or reckless as you can conceive. We will build this story together.</p>
<h2>About my approach</h2>
<p>I have always been drawn to the work of <a href="https://en.wikipedia.org/wiki/H._P._Lovecraft">H.P. Lovecraft</a> because he managed to conjure such bizarre atmospheres in his writing.
As I studied science in school, as I ponder the world, as I live my life: there has always been space for the types of unsettling questions which plagued the minds' of his characters.
During one of my winter breaks from <a href="http://www.pnas.org/content/112/2/313.full.pdf">graduate school</a>, I purchased the <em>Masks of Nyarlathotep</em> and read the exciting adventure outlined
for the <em>Call of Cthulhu</em> game system. The expansive and deadly world steeped in the Mythos seemed like something I wanted to contribute to. However, I had reservations about the reliance on
<a href="https://feministfrequency.com/video/not-your-exotic-fantasy">cultural stereotypes</a> to create atmosphere and on stats-based dice rolls to progression of the story. I had heard about a
more investigation focused rules system (GUMSHOE), so I headed to the <a href="http://www.torontopubliclibrary.ca/merril/">Merril Collection</a> at the Lillian H. Smith Library to read some of the
Corebook for <em>Trail of Cthulhu</em>.
<p>Kenneth Hite's introduction in that book opens with a wonderfully written reason why <em>Trail of Cthluhu</em> exists. That small sequence of paragraphs, set my fleshy gears into a slow
and determined torque. Before I left to return for Chicago I stopped by the downtown <a href="http://www.htnorth.com/">Hairy Tarantula</a> to buy myself a copy. I resolved to <a href="#game">try</a>
to use this investigation focused system to tell horror stories I could morally support. I aspire to create a foreboding imaginary space where players can roleplay their Investigators' unique
<a href="https://en.wikipedia.org/wiki/Paradise_Lost">falls</a> while progressing via their wits through various levels of oppressive power and ignorance. I believe the potentially most powerful
aspects of such a space are: to provide the freedom to make "impractical" decisions and follow through on the consequences. To listen to the imagined fears of others and vocalize their imagined
solutions, no matter their "triviality". To visualize actions we might be uncomfortable with, and through that process come to a better understanding on how to plan meaningful action in our
(sometimes) <a href="https://www.youtube.com/watch?v=q54VyCpXDH8">unbalanced</a> lives.</p>
</div>
<!-- Second Parallax Image with game headline -->
<div class="bgimg-2 w3-display-container w3-opacity-min" id="game">
<div class="w3-display-middle" style="white-space:nowrap;">
<h1 class="w3-xxxlarge w3-text-light-grey w3-wide">This Game</h1>
</div>
</div>
<!-- Container (Game Section) -->
<div class="w3-content w3-container w3-padding-64">
<div class="w3-row-padding">
<div class="w3-half" id="format">
<h2>Format and Style</h2>
<p>I will be running Purist campaigns as the Keeper for 4 or fewer players and their Investigators. Campaigns will be 3-4 sessions long with each session with at least
3 hours of gameplay. Purist refers to a thematic orientation of the plot towards philosophical horror. In my case, this will not preclude an exciting firefight or
interpersonal drama, but rather indicate that both those actions will carry with it a heavy cost (in Health and Stability respectively). I will focus the story on
the terrible consequences of revealing Mythos truth and the personal costs for the Investigators. Motivations (known in-game as Drives) will play a large role in moving
the plot and I will work with each player to finalize the Drive of their Investigator. The world will react as realistically as I can imagine it and I encourage players
to tread carefully. Prioritize survival, but as this is a horror game you will have to venture out on a limb to progress the investigation!</p>
</div>
<div class="w3-half">
<h2>Setting</h2>
<p>Our game will start in the city of Toronto and will involve minimal intercontinental travel. I will try and involve players with the creation of the hook
(the reason why their Investigator is where they are and involved with the plot). Cities will be a critical resource and location for investigations.
Campaigns will be set in the present day and two <a href="#rulesvar">new abilities</a> will be added to govern the knowledge of computers and their use. As
<em>Trail of Cthulhu</em> was written for a 1930's setting, please imagine appropriate updates to the occupational abilities and run them by the Keeper as you
build your Investigator. Games will require that Investigators have working knowledge of the English language. I encourage players to think about how their Investigator has
come to Toronto. Are they a long time local? Did they move for work? Did they move come as a refugee? There will be an attempt to replicate the forces of the
law so make sure that you're ready to go of the grid if you have (or want) to engage in illegal activities.</p>
</div>
</div>
<div class="w3-row-padding">
<div class="w3-half" id="build">
<h2>Investigator build limitations</h2>
<p>The following are restrictions to consider when building your Investigators:</p>
<ul>
<li>All occupations and abilities will be permitted, but take care to properly integrate them for the modern world. <em>For example: how does
an Alienist make money in the modern world, does this modify their Credit Rating? Where do you have access to a horse for Riding?</em></li>
<li>Similarly, make sure you are prepared to say how you will use the skills you choose. A google-able answer is sufficient for most cases.</li>
<li>To conform to the Purist campaign I will be restricting Health and Stability pools to 12. Sanity will be capped at 10.</li>
<li>Choosing Sources of Stability (in addition to Pillars of Sanity) is a mandatory build task.</li>
<li>General build points will be set at 60 and Investigative build points at 18. No inter-party build point trading will be permitted.</li>
<li>Have fun and take the liberty to work things to make them more flavourful. <a href="#contact">Contact</a> me for suggestions or to verify a modification.</li>
</ul>
</div>
<div class="w3-half" id="rulesvar">
<h2>Rule variations</h2>
<p>Each person can be assumed to know how to use a computer, but they are not necessarily going to be able to get the information or functions they want from it. Keep in mind that often
computers are only the medium in which we interface with knowledge and people, therefore other Investigative abilities may be better suited than computer related abilities for your
Investigator. Interpersonal skills can be used to get information from people over IRC or social media. Academic skills can be used to interpret or execute information dug up from databases.
For other use cases of the computer, the following abilities (1 Investigative, 1 General) will be added to the game to reflect the use of this powerful modern tool:</p>
<div class="w3-accordion w3-light-grey">
<button onclick="myAccordian('section2')" class="w3-btn-block w3-left-align w3-slim w3-large">Coding (<em class="w3-sans">Technical ability</em>)</button>
<div id="section2" class="w3-accordion-content w3-container">
<div>You can are able to write computer code in language you also have a point in. Given enough time and access to the right documentation you may be able to write code in other
formal languages used by machines. You can:
</div>
<div>
<ul>
<li><em>sort though large datasets</em></li>
<li><em>improve a predictive model</em></li>
<li><em>automate a series of program actions</em></li>
<li><em>read existing code to determine their general function</em></li>
<li><em>find unusual elements in existing code</em></li>
</ul>
</div>
<div>As an Occupational ability, the following occupations are candidates for use of Coding:
</div>
<div>
<ul>
<li><span class="w3-slim w3-large">Military (Engineers, Navy and Officers):</span> may substitute Coding for Outdoorsman</li>
<li><span class="w3-slim w3-large">Professor and Scientist:</span> may choose Coding as one of their two occupational abilities</li>
</ul>
</div>
</div>
<button onclick="myAccordian('section3')" class="w3-btn-block w3-left-align w3-slim w3-large">Internet (<em class="w3-sans">General ability</em>)</button>
<div id="section3" class="w3-accordion-content w3-container">
<div>You are experienced in leveraging the myriad technologies of the Internet to find information. A good way to think of someone trained in this skill is
as a tech savvy consumer who is familiar with the newest consumer programs and/or connected to the right networks. Given the proper permissions,
Credit Rating, and/or contacts you can:
</div>
<div>
<ul>
<li><em>set up a web server</em></li>
<li><em>use TOR</em></li>
<li><em>determine the credibility of web sources</em></li>
</ul>
</div>
<div>Internet doubles as an investigative ability when used to gather clues by:
</div>
<div>
<ul>
<li><em>finding hidden contact information</em></li>
<li><em>accessing private communications</em></li>
<li><em>downloading pirated files</em></li>
</ul>
</div>
<div>As an Occupational ability, the following occupations are candidates for use of Internet:
</div>
<div>
<ul>
<li><span class="w3-slim w3-large">Criminal:</span> may substitute Internet for Locksmith or Shadowing</li>
<li><span class="w3-slim w3-large">Journalist and Private Investigator:</span> may substitute Internet for Photography</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Third Parallax Image with story headline -->
<div class="bgimg-3 w3-display-container w3-opacity-min" id="story">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-xxxlarge w3-text-light-grey w3-wide">Our Story</span>
</div>
</div>
<!-- Story Section -->
<div class="w3-content w3-container w3-padding-64">
<h1>Letters from the lost</h1>
<p>The story section for the site will be for cross campaign communication. If you are enjoying the gameplay with your Investigator, please consider writing an in-character letter
to an NPC, Pillar of Stability or other PC. I would recommend the format of an email or perhaps a blog post. Send me the material and I will post it here along
with other documents which belong to the world and the ongoing intrusions of the Mythos. Don't hesitate to contact me if you want to contribute something and are
not currently engaged in a campaign. There undoubtedly will be a place for your twisted imagination to deposit its sticky eggs into this fledgling digital corpse.</p>
<p>As you can probably guess, this section will take some time to get off the ground. I am hopeful it will grow into a special record of the meaningful acts committed
for reasons entirely human in the face of indifferent forces.</p>
<div class="w3-accordion w3-light-grey">
<button onclick="myAccordian('section4')" class="w3-btn-block w3-left-align w3-wide">Campaign <span style="text-decoration: line-through">ZERO<span></button>
<div id="section4" class="w3-accordion-content w3-container">
<div>NOW ACCEPTING PLAYERS</div>
<div>NOW ACCEPTING PLAYERS</div>
<div>NOW ACCEPT1NG PLAYERS</div>
<div>NOW ACC3PT1NG PLAYER5</div>
<div>N0W ACC3PT1NG PLAYER5</div>
<div>N0W ACC3PT1NG PL8Y3R5</div>
</div>
<button onclick="myAccordian('section5')" class="w3-btn-block w3-left-align w3-wide">From Beyond</button>
<div id="section5" class="w3-accordion-content w3-container">
<div class="w3-padding-small">A series of dead(?) links</div>
<a href="#">a letter from Martha Blokke</a>
<a href="#">the last tweet from James Cheung</a>
<a href="#" style="white-space: pre-wrap">an email from Marcel Furchette to Jean Nobruga</a>
<a href="#">an anonymous blog post</a>
<div class="w3-padding-small">The link to the future page</div>
<a href="#">read more</a>
</div>
<button onclick="myAccordian('section6')" class="w3-btn-block w3-left-align w3-slim">at the End there will still be our w͐̀̀͛̚or̽ͪ͐ͪͭͨ͋d̄ͮͨ̋s̔̆̎̆</button>
<div id="section6" class="w3-accordion-content w3-container" style="white-space: pre-wrap">
<div class="w3-padding-small">︿_____︿__︿︿__________<span class="w3-hover-text-deepred">✞</span> _____________</div>
<div class="w3-padding-small">ѧѦ ѧ ︵͡︵︵ ̢︵ Ѧѧ ︵͡ ︵ ѧ Ѧ︵<span class="w3-hover-text-deepred"> ̵̗̊o̵̖ </span>︵ ѦѦ ѧ</div>
<div class="w3-padding-small">w̘͞ḛ̸̲͙̖̼͙s͖̮̦e̗r̦ṿ̖̩̪͎̼̭et̞̱̺̮̩͠ẖ̠͙͔͍e̹̪<span class="w3-hover-text-deepred">m҉̘͇̼͉͔̜a̴̰̲̖̘s̗̹̫̫̲t̨eͅr̨̻͎</span>b̦͠e͖̝t̛͇̮̞̳̩̲͍w̷̮͕e̺͔̘e҉̪n̝̹̩͙ sl̶͉̜̼͖̹̥̲e̺͙̖̦͟e̥̣p̹̗̞͙a͚̘̮̟̟ń̩̞̮͎͈̝̫d͈̦̫̬͈w̲̩ak̘̺͇i̼̞n̤̬̭͝g̢̩͉</div>
</div>
</div>
</div>
<!-- Fourth Parallax Image with contact headline -->
<div class="bgimg-4 w3-display-container w3-opacity-min" id="contact">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-xxxlarge w3-text-light-grey w3-wide">Let's play!</span>
</div>
</div>
<!-- Contact Section -->
<div class="w3-content w3-container w3-padding-64">
<h1>Join a game</h1>
<p> As you may have gleaned from the <a href="#format">game</a> section of the site: I would like to play <em>Trail of Cthulhu</em> as an organizer/ Dungeon Master (known in-game as a Keeper).
Campaigns will be 3-4 sessions long with each session with at least 3 hours of gameplay. Sessions will run in my home with up to 4 players and their characters
(known in-game as Investigators). I hope the "mini campaigns" to be fun and challenging, collaborative story-telling experiences with a blend of gameplay and opportunities
for socializing. I will try to keep the narrative going over the course of many mini campaigns with players and/or Investigators freely dropping out and joining as required.</p>
<p> I hope to run these for as long as I have the fortitude. If you like your Investigator and they survive: you can play them again. If you didn't
like your Instigator or they didn't survive: you can make a new one. And of course, if the experience wasn't your cup of tea I hope to see you again in some other capacity</p>
<p> My first contact with you as a player will involve setting you up with the materials to <a href="#build">build</a> your Investigator, setting your boundaries, and determining some common interests/goals.
Upon reaching a group of players who have made their Investigator, I will facilitate the scheduling of the sessions. Wash. Rinse. Repeat. (I hope, wish me luck! Please feel free to
provide criticism, recommendations or praise for this project.)</p>
<div class="w3-row-padding">
<div class="w3-twothird">
<div class="w3-panel w3-grey w3-leftbar w3-border-black">
<p>If the voices in your head tell you that playing this game is a good idea, contact me RIGHT NOW by
<a href="mailto:[email protected]?Subject=mythos" target="_top">email</a> with "mythos" in the subject line to schedule your game!
</div>
</div>
<div class="w3-third w3-margin-top">
<i class="fa fa-map-marker" style="width:30px"></i> Court Square, Long Island City, USA<br>
<i class="fa fa-phone" style="width:30px"></i> Phone: 3125325036<br>
<i class="fa fa-envelope" style="width:30px"> </i> Email: [email protected]<br>
</div>
</div>
</div>
<!-- footer -->
<div class="bgimg-5 w3-display-container">
<div class="w3-display-middle w3-padding-0" id="poem">
<p class="w3-center"><a href="https://www.poetryfoundation.org/poems-and-poets/poems/detail/47536" style="text-decoration:none">Then practice losing farther, losing faster: <br> places, and names, and where it was you meant <br> to travel. None of these will bring disaster." <br> -Elizabeth Bishop</a></p>
</div>
<div class="w3-display-bottomright w3-container w3-right-align w3-tiny" style="line-height:1" id="copyright">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">meaningful acts</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://danwchan.ca" property="cc:attributionName" rel="cc:attributionURL">Daniel W Chan</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</div>
</div>
<!-- javascript -->
<script src="scripts.js"></script>
</body>
</html>