Owens

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[floor 1 door]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0680.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> Once inside you feel the cool air of the AC and the ambiance of the outside is replaced with the quiet hum of the inside. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a id="nav-arrow" href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-up { display: none; } #hidden-link-down { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link-up">[[up]]</span> <span id="hidden-link-down">[[down]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0681.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> The door is open, you should go upstairs to class. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-up tw-link').click()" style="position:fixed; top:50%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-down tw-link').click()" style="position:fixed; top:68%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="arro back.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[go to class]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0683.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> The hallway is well lit and a little long. You can hear your footsteps echoing and you can smell a hint of paint in the cool air. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[floor 1 door]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0681.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> This isnt where your class is, it's a little creepy down there too </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="arro back.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[leave class]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0685.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> Time to work, you can see everyone is logged in. You hope you're not late </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-left { display: none; } #hidden-link-right { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link-left">[[look left]]</span> <span id="hidden-link-right">[[look right]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0686.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You must have gotten lost in your project, by the time you looked up everyone was gone and its gotten dark. Time to go. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-left tw-link').click()" style="position:fixed; top:70%; left:5%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="leftarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-right tw-link').click()" style="position:fixed; top:70%; left:92%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="rightarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #nav-arrow { display: none; } </style> <span id="hidden-link">[[leave class]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('lookleft-floor-2.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You dont see anything </div> <a id="nav-arrow" href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="arro back.png" style="width:100%; height:100%; object-fit:contain;"> </a> <script> setTimeout(function() { document.getElementById('nav-arrow').style.display = 'block'; }, 5000); </script>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #nav-arrow { display: none; } </style> <span id="hidden-link">[[go right]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('lookright-floor-2.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You feel a slight ominous presence this way but this is the way out </div> <a id="nav-arrow" href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a> <script> setTimeout(function() { document.getElementById('nav-arrow').style.display = 'block'; }, 5000); </script>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-left { display: none; } #hidden-link-right { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link-left">[[go downstairs]]</span> <span id="hidden-link-right">[[go to hallway]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('stairs door floor2 copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> The ominous feeling has gotten a little stronger, but something seems particularly off with the hallway. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-left tw-link').click()" style="position:fixed; top:70%; left:5%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="leftarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-right tw-link').click()" style="position:fixed; top:70%; left:92%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="rightarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[go futher]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('hallwayupstairsbegin copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You proceed to the hallway, your curiousity is too great. It seems unnaturally dark down there. You feel something's eyes on you from the inky blackness. Something calls to you. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[go down to floor 1]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('f1door copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> Everything seems a little darker than you remember. Not just because it's night. It's almost like the light is being sucked away. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[return]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('hallwayup2 copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> Something is off. You think something is there. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[go right]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('hallwayupend copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> There's nothing? Must be your imagination lets go home. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="arro back.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-left { display: none; } #hidden-link-right { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link-left">[[go down to basement]]</span> <span id="hidden-link-right">[[exit floor 1]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('floor1 choice copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You arrive to the door to leave but there is something calling you to the basement. The door out also seems unnaturally cold. You must choose. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-left tw-link').click()" style="position:fixed; top:70%; left:5%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="leftarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>  <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-right tw-link').click()" style="position:fixed; top:70%; left:92%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="rightarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[exit]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0725.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> Against your judgement you decide to push open the door to see the world has gained life again. The silence has been broken by the murmur of other students and light is beaming inside. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a id="nav-arrow" href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[continue to basement]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('downstairs 1-0 copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You start down the stairs </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[open the door fr]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('basementdoor2 copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You approach the door. Something is really wrong. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #nav-arrow { display: none; } </style> <span id="hidden-link">[[open door]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('lookingleftfrbasement.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <a id="nav-arrow" href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="arro back.png" style="width:100%; height:100%; object-fit:contain;"> </a> <script> setTimeout(function() { document.getElementById('nav-arrow').style.display = 'block'; }, 5000); </script>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #nav-arrow { display: none; } </style> <span id="hidden-link">[[go down right hallway]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('lookleftbasement.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <a id="nav-arrow" href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a> <script> setTimeout(function() { document.getElementById('nav-arrow').style.display = 'block'; }, 5000); </script>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-left { display: none; } #hidden-link-right { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link-left">[[continue]]</span> <span id="hidden-link-right">[[go through side door]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('basementhallway copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> It is very unsettling here, you want to escape but the back of your mind is scratching at your skull to get to the end of the hallway. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-left tw-link').click()" style="position:fixed; top:70%; left:5%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-right tw-link').click()" style="position:fixed; top:70%; left:92%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="rightarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } </style> <span id="hidden-link">[[exit1]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('rightspooky copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> Curiousity has gotten the best of you </div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[open exit door]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('basement exit1 copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> As you pass the room to the right of you there is that feeling of being watched again. The eyes dig into you yet you feel if you looked it would be the end. You continue. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-title { display: none; } #restart-btn { display: none; position: fixed; top: 70%; left: 48%; width: 80px; height: 80px; background: rgba(200, 0, 0, 0.7); border: 3px solid rgb(220, 0, 0); cursor: pointer; align-items: center; justify-content: center; color: white; font-size: 11px; font-family: sans-serif; text-shadow: 1px 1px 2px black; box-shadow: 0 0 12px rgba(220,0,0,0.6); text-decoration: none; text-align: center; transition: background 0.2s, transform 0.2s; z-index: 1; } </style> <span id="hidden-link-title">[[Title]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('deth.gif'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <a id="restart-btn" href="javascript:void(0)" onclick="document.querySelector('#hidden-link-title tw-link').click()" onmouseover="this.style.background='rgba(220,0,0,0.9)'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(200,0,0,0.7)'; this.style.transform='scale(1)'"> Try Again </a> <script> setTimeout(function() { var btn = document.getElementById('restart-btn'); btn.style.display = 'flex'; }, 6000); </script>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } </style> <span id="hidden-link">[[exit 2]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('exit door basement copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> The longing feeling you have felt pushing you down here is at it's peak. You NEED to see what is past this door. It must be the exit. Finally. </div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-title { display: none; } </style> <span id="hidden-link-title">[[Title]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0726.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You are free! You have escaped this strange encounter. You could have sworn it was night but you must have not slept enough. </div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-title tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; background:rgba(0,200,80,0.7); border:3px solid rgb(0,220,80); border-radius:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:white; font-size:11px; font-family:sans-serif; text-shadow:1px 1px 2px black; box-shadow:0 0 12px rgba(0,220,80,0.6); text-decoration:none; text-align:center; transition:background 0.2s, transform 0.2s; z-index:1;" onmouseover="this.style.background='rgba(0,220,80,0.9)'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(0,200,80,0.7)'; this.style.transform='scale(1)'"> Play Again </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-title { display: none; } </style> <span id="hidden-link-title">[[Title]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('lostforever copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> What you felt was a lie. You are lost for the rest of your days to wander the halls of this place. It is unnaturally cold and unimaginably dark. Theres something in that darkness. </div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-title tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; background:rgba(0,200,80,0.7); border:3px solid rgb(0,220,80); border-radius:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:white; font-size:11px; font-family:sans-serif; text-shadow:1px 1px 2px black; box-shadow:0 0 12px rgba(0,220,80,0.6); text-decoration:none; text-align:center; transition:background 0.2s, transform 0.2s; z-index:1;" onmouseover="this.style.background='rgba(0,220,80,0.9)'; this.style.transform='scale(1.1)'" onmouseout="this.style.background='rgba(0,200,80,0.7)'; this.style.transform='scale(1)'"> Play Again </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } </style> <span id="hidden-link">[[beginning]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('Alternate start screen.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } </style> <span id="hidden-link">[[walk in]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0677.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> You are on your way to your ASIM 1300 class, it is a sunny day today and you can hear the distant conversations of other students around you along with the songs of a couple birds. Lets go in. </div> <a id="nav-arrow" href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link { display: none; } #map-link tw-link { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; font-family: sans-serif !important; text-decoration: none !important; } #map-link tw-link:hover { color: rgba(255,255,255,0.9) !important; } </style> <span id="hidden-link">[[open door]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('basementdoor1 copy.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <div style="position:fixed; top:10%; left:50%; transform:translateX(-50%); width:50%; background:rgba(0,0,0,0.6); color:white; font-size:16px; font-family:Georgia,serif; line-height:1.7; padding:20px 28px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; text-align:center; z-index:1;"> The basement door is in view. It isnt the same as you remember. The darkness around you has continued to darken as you move toward it. You move seemingly not of your own accord. Something is calling. </div> <div id="map-link" style="position:fixed; bottom:12px; left:15px; z-index:2;">[[map]]</div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link tw-link').click()" style="position:fixed; top:70%; left:48%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="uparrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } </style>  <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('Map.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div>

<style> tw-passage, tw-story, body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #444 !important; } #hidden-link-left { display: none; } #hidden-link-right { display: none; } </style> <span id="hidden-link-left">[[look left hallway]]</span> <span id="hidden-link-right">[[look right hallway]]</span> <div style="position:fixed; top:0; left:0; width:100vw; height:100vh; background-image: url('IMG_0708.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0;"> </div> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-left tw-link').click()" style="position:fixed; top:70%; left:5%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="leftarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a> <a href="javascript:void(0)" onclick="document.querySelector('#hidden-link-right tw-link').click()" style="position:fixed; top:70%; left:92%; width:80px; height:80px; cursor:pointer; z-index:1; transition:transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> <img src="rightarrow.png" style="width:100%; height:100%; object-fit:contain;"> </a>