<div class="bigtitle">
<h1>The Beginning</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('BeginningMainCharacter');" height = 100>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" style="transform: scaleX(-1);" height = 75>
</div>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="BeginningAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="BeginningInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BeginningCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BeginningMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BeginningCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="BeginningAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1494.png" width=725>
<p>
Under barren land,
Covered from the burning sun
you search for refuge
The last leaf falls
As night does, reluctantly.
Deep black crevices
invite shelter below life -
freedom in darkness.
Plotting a course by
the many eyes of crickets,
forlorn, clicking songs
louder, further away from
hellish infrareds.
Stones fall to the depths -
lost, unwanted, gone.
The earth speaks
in echoes and dripping water.
You must go farther.
Wander between stalactites
to the light in the distance.
The morning so far,
desperation near,
hope never ending.
Waiting for life to appear.
Wanting the solace of sleep.
The distance behind,
the choices that made ruin
what will mark the end...
And yet, beauty:
an orange-veined mushroom!
Target of hope set
Disappointment cast aside
Set the course ahead
Discoveries abound
The tunnel turned to expanse…
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Explore the left navigation bar a bit. You can also click on your character at the bottom. When you're ready, click the arrow on the bottom right to move forward.</p>
</div>
</div>
</div>
</div>
</body>
<div class="spacer"></div><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Beginning');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="infocontainer">
<div class="info">You have yet to find the map</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Beginning');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style>
<%
window.setup = window.setup || {};
s.audio = document.createElement('audio');
s.audio.src = 'https://dlclab.unc.edu/files/2020/11/mixkit-charlotte-586.mp3';
s.audio.loop = true;
s.audio.play();
%>
<div class="bigtitle">
<h1>Awake</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WakeUpMainCharacter');" height = 100>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OnlyLeft');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Beginning');" height = 75>
</div>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="WakeUpAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="WakeUpInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WakeUpCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WakeUpMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WakeUpCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="WakeUpAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1508.png" width=725>
<p>
You wake to the sound of a grandfather clock in the distance. No: not a clock. It sounds like one, though, steady and hollow.
Your eyes follow the sound to its source. Above you and far away, there’s a stalactite, moonlike in its distance and mass. A drop of water collects on the tip and falls. Tock.
Memory threatens to overwhelm you but subsides. Instead, you look around. Past the stalactite, the cave narrows and twists. Behind you, there’s a pebbly channel that must have once been an underground river.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>In addition to clicking the arrow on the bottom right to move forward, you can click on the arrow on the bottom left to move backwards.</p>
</div>
</div>
</div>
</div>
</body>
<div class="spacer"></div><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Beginning');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Beginning');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Beginning');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="infocontainer">
<div class="info">You have yet to find the map</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Beginning');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="spacer"></div>
<div class="choose">
<div class="right" onclick="window.story.show('Right');"><h1>Go forward</h1></div>
<div class="left" onclick="window.story.show('Left');"><h1>Follow the riverbed</h1></div>
</div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>You can choose between the box on the left or the box on the right. One leads you down a path you have not been before</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>The Labyrinth</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('RightMainCharacter');" height = 100>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FindMemory');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('RightOrLeft');" height = 75>
</div>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="RightAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="RightInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="RightCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="RightMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="RightCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="RightAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
Soon, the tunnel branches, then branches again, but you trace your finger along the map and follow that route. It’s still a labyrinth, but now you know the way. And eventually, the tunnel opens back up into a different cave, one filled with the hum of wings. But as you're about to enter, you almost trip over an old corn husk.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Click the forward arrow. When you come back to this screen, please click on the inventory item in the left navigation bar.</p>
</div>
</div>
</div>
</div>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>The Riverbed</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('LeftMainCharacter');" height = 100>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FindMap');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OnlyLeft');" height = 75>
</div>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="LeftAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="LeftInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="LeftCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="LeftMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="LeftCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="WakeUpAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
The riverbed widens as you follow it, picking your way carefully over the pebbles. Eventually, it opens up into another cavern, this one striped yellow and green with lichen. The river seeems to end here, and there are no other exits, but you spot something on top of a nearby rock. It looks like a map, the edges wrinkled like it had gotten wet and been laid out to dry. But that would have been a long time ago, when the river still ran. Whoever left it here must have never come back for it.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Once you click the forward button, please try to find the map with your flashlight and click on it.</p>
</div>
</div>
</div>
</div>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Right');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Left');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Right');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://webstockreview.net/images/corn-clipart-svg-10.png" onclick="window.story.show('Cornhusk');" height = 200>
<div></div>
</div>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the husk of corn.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Left');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Right');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Left');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Right');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Left');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="infocontainer">
<div class="info">You have yet to find the map</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Right');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Left');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Right');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Left');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><style>
/* Flashlight Overlay */
:root {
--cursorX: 30vw;
--cursorY: 30vh;
}
:root:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: fixed;
pointer-events: none;
background: radial-gradient(
circle 20vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 80%,
rgba(0,0,0,.95) 100%
)
}
</style>
<div class="spacer"></div>
<img class="map" onclick="window.story.show('RightOrLeft');" src="https://i.pinimg.com/originals/45/c3/e4/45c3e4e0ea799df0244381a4d2dc0a54.jpg"></img>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Left');" height = 75>
</div>
<style>
body {
background-image: url("https://cdn3.vectorstock.com/i/1000x1000/24/97/seamless-texture-ground-with-small-stones-vector-25552497.jpg");
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.map {
width: 100px;
height: 100px;
up: 10;
left: 5;
}
.rightsidenav img {
filter: invert(1);
}
div[onclick] { cursor: pointer; }
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Right');" height = 75>
</div>
<div class="spacer"></div>
<div class="teddybear">
<div class="foundtext">
<h1>You have found
<br>a husk of corn
<br><br>Check your inventory!</h1>
</div>
<img src="https://webstockreview.net/images/corn-clipart-svg-10.png" height = 200>
</div>
<style>
.foundtext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: var(--text-primary);
display: flex;
justify-content: flex-start;
align-items: space-evenly;
}
.teddybear {
width: 100%;
height: 75%;
padding: 50px 50px 50px 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: var(--bg-secondary);
}
.teddybear img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>Elevator</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');">
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('TestAlone');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
.buttonForward img {
filter: invert(1);
}
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="WithAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="WithInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WithCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WithMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WithCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="WithAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1505.png" width=725>
<p>
The elevator smells like metal and cigarette butts, like every other elevator you've smelled in your life. The ascent is much longer, though. Eventually, the elevator clangs, and the motion stops. Alex wipes the sweat from his brow. "Shall we see what we can find?"
</p>
</main>
</body>
<div class="mapspacer"></div><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Alone');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://freesvg.org/img/burning_cigarette_01.png" onclick="window.story.show('AloneCigarette');" height = 200>
<div></div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Alone');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 75>
<div class="charactertext">
<h1>
Alex
</h1>
<h3>
A small fellow distinguished by his choice of headwear and deeply cynical attitude.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Alone');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Alone');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Alone');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Alone');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="bigtitle">
<h1>Mine</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('MineMainCharacter');">
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="MineAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="MineInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="MineCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="MineMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="MineCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="MineAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1504.png" width=725>
<p>
There’s a sudden drop-off, and a rickety staircase descending into the depths. Around the perimeter of the hole are a few scattered crates and barrels, marked with symbols attesting to the explosive nature of their contents. They appear to have all been overturned, broken into, or deemed unusable, though.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please go to the map item in the left navigation bar to navigate your way around. Oh, and be sure to always check your inventory.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>Cricket Cave</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('CricketCaveMainCharacter');">
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="CricketCaveAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="CricketCaveInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="CricketCaveCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="CricketCaveMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="CricketCaveCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="CricketCaveAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1509.png" width=725>
<p>
It’s only when you hear them that you realize how silent it’s been, with nothing but that drip of water to indicate that time is passing at all. This cave, though, is full of sound. As you focus, you realize that what you had assumed were shadows are actually furry masses of insects. The shapes bleed into each other, part and dissolve as you watch, and then take flight with a noise like the scratching of a violin. A cricket lands in your hand and seemingly stares at you. You have a feeling that you may be able to remember something if you check your inventory. You're also very interested in going to the Abandoned Village and then the Mine after you explore a bit when you look at the map.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please go to the map item in the left navigation bar to navigate your way around. Oh, and be sure to always check your inventory.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>Abandoned Village</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('AbandonedVillageMainCharacter');">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" onclick="window.story.show('Ryan');">
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1516.png" width=725>
<p>
In the next cavern, there is what seems to be an encampment of some kind - there are some hapless tents strung up, a few sagging tables, even some food left out. You spot a calcified hunk of bread, a greenish sliver of meat, a piece of cheese bearded with mold. There’s even a cup of coffee, slick with separated oils, and a newspaper draped over one of the tables. Against yourself, your stomach growls, and you realize it’s been a long time since you’ve seen even so skeletal a meal. You hear noises coming from behind one of the tents.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please go to the map item in the left navigation bar to navigate your way around. Click on the image of the new character to talk to him. Oh, and be sure to always check your inventory.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>Mushroom Cave</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('MushroomCaveMainCharacter');">
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="MushroomCaveAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="MushroomCaveInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="MushroomCaveCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="MushroomCaveMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="MushroomCaveCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="MushroomCaveAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1510.png" width=725>
<p>
There’s more moisture in the air here; the walls of the cave are slick with it. The fungi have taken full advantage: here, the yellow and green lichen of the other caverns has bloomed into fluorescent pinks, blues, and oranges. Toadstools cluster at the bottom of the walls like froth at the base of a waterfall. A littered paper cup sits patiently next to the toadstools.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please go to the map item in the left navigation bar to navigate your way around. Oh, and be sure to always check your inventory.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>Old Bunker</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('OldBunkerMainCharacter');">
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="OldBunkerAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="OldBunkerInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="OldBunkerCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="OldBunkerMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="OldBunkerCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="OldBunkerAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1523.png" width=725>
<p>
Here, the sloping roof of the cave meets a sharp angle, the first you’ve seen so far. One wall of this cavern is a metal hatch, tarnished with age but still apparently solid. Next to it is a keypad covered with a dirty plastic box, apparently to keep moisture out. It doesn’t seem to have worked—tiny mushrooms are sprouting between each of the digits.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please go to the map item in the left navigation bar to navigate your way around. Oh, and be sure to always check your inventory.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Mine');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://cdn.pixabay.com/photo/2012/04/13/17/18/crate-32941_960_720.png" onclick="window.story.show('Crate');" height = 200>
<div></div>
</div>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the item.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Mine');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Mine');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<div class="mapplaces">
<div class="mapplace" onclick="window.story.show('CricketCave');">
Cricket Cave
</div>
<div class="mapplace" onclick="window.story.show('AbandonedVillage');">
Abandoned Village
</div>
<div class="mapplace" onclick="window.story.show('MushroomCave');">
Mushroom Cave
</div>
<div class="mapplace" onclick="window.story.show('OldBunker');">
Old Bunker
</div>
</div>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Mine');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Mine);" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Mine');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://cdn.pixabay.com/photo/2020/05/12/18/38/grasshopper-5164442_960_720.png" onclick="window.story.show('Cricket');" height = 200>
<div></div>
</div>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the item.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<div class="mapplaces">
<div class="mapplace" onclick="window.story.show('Mine');">
Mine
</div>
<div class="mapplace" onclick="window.story.show('AbandonedVillage');">
Abandoned Village
</div>
<div class="mapplace" onclick="window.story.show('MushroomCave');">
Mushroom Cave
</div>
<div class="mapplace" onclick="window.story.show('OldBunker');">
Old Bunker
</div>
</div>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCave');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunker');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://cdn4.iconfinder.com/data/icons/business-and-marketing-21/32/business_marketing_advertising_News__Events-61-512.png" onclick="window.story.show('Newspaper');" height = 200>
<div></div>
</div>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the item.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<div class="mapplaces">
<div class="mapplace" onclick="window.story.show('Mine');">
Mine
</div>
<div class="mapplace" onclick="window.story.show('CricketCave');">
Cricket Cave
</div>
<div class="mapplace" onclick="window.story.show('MushroomCave');">
Mushroom Cave
</div>
<div class="mapplace" onclick="window.story.show('OldBunker');">
Old Bunker
</div>
</div>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCave');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://i.pinimg.com/originals/eb/2d/c8/eb2dc86a78783874168aad79f6a58164.png" onclick="window.story.show('Froth');" height = 200>
<div></div>
</div>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the item.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCave');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCave');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<div class="mapplaces">
<div class="mapplace" onclick="window.story.show('Mine');">
Mine
</div>
<div class="mapplace" onclick="window.story.show('CricketCave');">
Cricket Cave
</div>
<div class="mapplace" onclick="window.story.show('AbandonedVillage');">
Abandoned Village
</div>
<div class="mapplace" onclick="window.story.show('OldBunker');">
Old Bunker
</div>
</div>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCave');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCave');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunker');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-keypad-outline-512.png" onclick="window.story.show('Plastic');" height = 200>
<div></div>
</div>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the item.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunker');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunker');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<div class="mapplaces">
<div class="mapplace" onclick="window.story.show('Mine');">
Mine
</div>
<div class="mapplace" onclick="window.story.show('CricketCave');">
Cricket Cave
</div>
<div class="mapplace" onclick="window.story.show('AbandonedVillage');">
Abandoned Village
</div>
<div class="mapplace" onclick="window.story.show('MushroomCave');">
MushroomCave
</div>
</div>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunker');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunker');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>Ryan</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('3choices');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
There are two people here, talking in low tones. You can’t make out all the words, but you hear the name “Alex" a few times, and “surface.” As you approach, one of them shushes the other, gesturing towards you. Then, he turns. “Hey!” he calls out with an awkward joviality that seems at odds with your surroundings. “Good to see someone else down here.”
</p>
</main>
</body>
<div class="mapspacer"></div>
<%
s.audio.pause();
s.audio.src = 'https://dlclab.unc.edu/files/2020/11/mixkit-valley-sunset-127.mp3';
s.audio.play();
%>
<div class="bigtitle">
<h1>Inner Bunker</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('BunkerMainCharacter');">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" onclick="window.story.show('Alex');">
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="BunkerAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="BunkerInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BunkerCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BunkerMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BunkerCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="BunkerAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1507.png" width=725>
<p>
In the next room, everything seems to be multiplied—dozens of cots, lockers, rusted desks pushed up against the wall.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Click on the image of the new character to talk to him. Oh, and be sure to always check your inventory.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 75>
<div class="charactertext">
<h1>
Alex
</h1>
<h3>
A small fellow distinguished by his choice of headwear and deeply cynical attitude.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>Alex</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('2choices');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
"Yeah, it's just me here," Alex says, settling on one of the cots. "Bit sad, isn't it? But could be a lot worse, I suppose. What is it you wanted to talk about?"
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click the forward arrow.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div>
<div class="spacer"></div>
<div class="choose">
<div class="left" onclick="window.story.show('AskAlex');"><h1>Ask about Alex</h1></div>
<div class="left" onclick="window.story.show('AskThem');"><h1>Ask about them</h1></div>
<div class="left" onclick="window.story.show('AskWhere');"><h1>Ask about where you are</h1></div>
</div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>You can choose between one of the three given choices.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>Memory of Insects</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCaveInventory');" height = 75>
</div>
<body>
<main>
<p>
Before the drought, there were the plagues. Dad used to make it into a science lesson, explaining about morphology and neurochemistry as the locusts battered our windows. Once it was over, Zachary would go out and collect the littered insect corpses, placing them carefully in a jar and burying it in the sandy dirt of our backyard. Once, after a bad season, Dad knocked the jar out of his hands, and it smashed on the ground. Zachary sorted through the splinters and picked each of the locusts back up, ignoring the cuts to his hands. The next day was the first time he left.
</p>
</main>
</body>
<div class="spacer"></div><div class="spacer"></div>
<div class="choose">
<div class="left" onclick="window.story.show('Left');"><h1>Follow the riverbed</h1></div>
</div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WakeUp');" height = 75>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the box in the middle of the screen.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>Memory of Corn</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('RightMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('CricketCave');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('RightInventory');" height = 75>
</div>
<body>
<main>
<p>
The corn grew high and dead that summer, each ear as hard and white as a knob of ivory. Dad was too used to the harvest to let it all stand, though, so he cut a maze through for you and Zachary. The sun was so hot by then that you couldn’t get halfway through before collapsing. When Zachary poked you and ran off giggling, though, you weren’t too tired to chase after him.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click the forward arrow.</p>
</div>
</div>
</div>
</div>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Memory of Crates</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('InnerMine');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MineInventory');" height = 75>
</div>
<body>
<main>
<p>
His new boyfriend was there to help him pack up - a lean guy, patchily clothed and bearded, and with eyes that burned when he talked. You hated the way Zachary looked at him, wanted to shake my brother and tell him not to trust anyone but family. Anyone but you. When they were leaving, the boyfriend turned to you and said, offhand, " You know, we could use someone like you in the cause.” He smelled like smoke and, horribly, like Zachary. You leaned away.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Memory of Newspapers</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillageInventory');" height = 75>
</div>
<body>
<main>
<p>
The mug shot didn’t improve his looks, but then you’d never thought he was handsome enough for your brother. The blocky letters proclaiming a failed ecoterrorist plot didn’t do him any favors either. After that, Dad became even more convinced that the two of you had to leave, and right away, without saying goodbye. He’d been paranoid ever since he’d found that thing growing in the grain silo. “If they’ve gotten to him,” he said, “he’s lost to us.” You didn’t have the heart to tell him that that had been true for a long time already.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Memory of Froth</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCave');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('MushroomCaveInventory');" height = 75>
</div>
<body>
<main>
<p>
The mug shot didn’t improve his looks, but then you’d never thought he was handsome enough for your brother. The blocky letters proclaiming a failed ecoterrorist plot didn’t do him any favors either. After that, Dad became even more convinced that the two of you had to leave, and right away, without saying goodbye. He’d been paranoid ever since he’d found that thing growing in the grain silo. “If they’ve gotten to him,” he said, “he’s lost to us.” You didn’t have the heart to tell him that that had been true for a long time already.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Memory of Plastic</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunker');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('OldBunkerInventory');" height = 75>
</div>
<body>
<main>
<p>
And then there was the spring that it rained plastic, showers of polystyrene, acrylic, bakelite. Zachary made castles of it in the backyard, shining and hot to the touch. You stayed inside, having learned by then not to trust gifts or synthetic materials. That was a lesson he only ever learned half of.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Inner Mine</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FindMetal1');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Crate');" height = 75>
</div>
<body>
<main>
<p>
As you descend, you see piles of rubble, crater-eaten tunnel walls. Then you look closer, and see the red gleam of metal. There’s ore in here, rich veins of it, some already extracted. But uncollected, unsold. Why? Nevertheless, you begin to collect it.
</p>
</main>
</body>
<div class="spacer"></div><style>
/* Flashlight Overlay */
:root {
--cursorX: 20vw;
--cursorY: 30vh;
}
:root:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: fixed;
pointer-events: none;
background: radial-gradient(
circle 20vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 80%,
rgba(0,0,0,.95) 100%
)
}
</style>
<div class="spacer"></div>
<img class="map" onclick="window.story.show('BunkerRevisited');" src="https://www.pinclipart.com/picdir/big/382-3820679_golden-clipart-golden-nuggets-gold-nugget-clip-art.png"></img>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FindMetal3');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
body {
background-image: url("https://image.freepik.com/free-vector/cartoon-stone-texture_1110-576.jpg");
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.map {
width: 100px;
height: 100px;
}
.rightsidenav img {
filter: invert(1);
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>Ryan</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('3choices');" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
“Oh, you know. Been better. I suppose we're lucky to have made it down here, though, no matter how tired I am of eating mushrooms. Thanks for asking, by the way—most of the folks we’ve met down here have just cared about whether we could help them or be a threat to them. I can see you’re not like that, though.”
</p>
</main>
</body>
<div class="mapspacer"></div>
<div class="bigtitle">
<h1>Ryan</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('DoorTutorial1');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
“Oh, you heard that, did you? Huh. Well, I guess there’s no harm sharing. Alex is - did you see that old bunker on your way in? Apparently someone named Alex got in and has been squatting there. Word is he’s got a way back up to the surface, if you’re willing to pay. They say just knock three times, like this.”
</p>
</main>
</body>
<div class="mapspacer"></div>
<div class="bigtitle">
<h1>Ryan</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('3choices');" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
“You really don’t know? I guess they always did say stress can cause memory loss. This is what Beth calls the Underdepth and I just call the Shithole. Half natural, half manmade cave system that was intended as a way to escape the climate crisis. The higher-ups abandoned it halfway through. Said that it was too energy-inefficient and we’d be better off focusing on space. They sealed it off, but some of us were still able to find our way down when things got real bad.”
</p>
</main>
</body>
<div class="mapspacer"></div>
<style>
/* Flashlight Overlay */
:root {
--cursorX: 50vw;
--cursorY: 20vh;
}
:root:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: fixed;
pointer-events: none;
background: radial-gradient(
circle 20vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 80%,
rgba(0,0,0,.95) 100%
)
}
</style>
<div class="spacer"></div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FindMetal2');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
body {
background-image: url("https://image.freepik.com/free-vector/cartoon-stone-texture_1110-576.jpg");
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.map {
width: 100px;
height: 100px;
}
.rightsidenav img {
filter: invert(1);
}
div[onclick] { cursor: pointer; }
</style><style>
/* Flashlight Overlay */
:root {
--cursorX: 20vw;
--cursorY: 70vh;
}
:root:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: fixed;
pointer-events: none;
background: radial-gradient(
circle 20vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 80%,
rgba(0,0,0,.95) 100%
)
}
</style>
<div class="spacer"></div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FindMetalFinal');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
body {
background-image: url("https://image.freepik.com/free-vector/cartoon-stone-texture_1110-576.jpg");
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.map {
width: 100px;
height: 100px;
}
.rightsidenav img {
filter: invert(1);
}
div[onclick] { cursor: pointer; }
</style><style>
/* Flashlight Overlay */
:root {
--cursorX: 20vw;
--cursorY: 70vh;
}
:root:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: fixed;
pointer-events: none;
background: radial-gradient(
circle 20vmax at var(--cursorX) var(--cursorY),
rgba(0,0,0,0) 0%,
rgba(0,0,0,.5) 80%,
rgba(0,0,0,.95) 100%
)
}
</style>
<div class="spacer"></div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Mine');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
body {
background-image: url("https://image.freepik.com/free-vector/cartoon-stone-texture_1110-576.jpg");
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.map {
width: 100px;
height: 100px;
}
.rightsidenav img {
filter: invert(1);
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('Knock2');" height = 100>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Maybe ask Ryan about a certain someone at the Abandoned Village to find out more.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('Knock3');" height = 200>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Maybe ask Ryan about a certain someone at the Abandoned Village to find out more.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('Knock4');" height = 300>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Maybe ask Ryan about a certain someone at the Abandoned Village to find out more.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Knocked3Times');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('Knock5');" height = 400>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Maybe ask Ryan about a certain someone at the Abandoned Village to find out more.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('Knock6');" height = 500>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Maybe ask Ryan about a certain someone at the Abandoned Village to find out more.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('OldBunker');" height = 600>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Maybe ask Ryan about a certain someone at the Abandoned Village to find out more.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>Old Bunker</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Knock1');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<main>
<p>
You come back to the Old Bunker after collecting some copper and you see a door in front of you.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click the forward arrow.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div>
<div class="bigtitle">
<h1>Greetings</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<main>
<p>
You knock three times with a hollow ringing sound. Eventually, the hatch swings aside and a young man stands in the shadows, frowning at you from over a pair of crooked glasses. "So you need something? I suppose you'd better come in."
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click the forward arrow.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="spacer"></div>
<div class="choose">
<div class="left" onclick="window.story.show('AboutPassage');"><h1>Ask about the passage to the surface</h1></div>
<div class="left" onclick="window.story.show('AboutHim');"><h1>Ask about him</h1></div>
</div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Bunker');" height = 75>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>You can choose between the box on the left or the box on the right. </p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>Alex</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('2choices');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<main>
<p>
"I don't see that that matters," he answers briskly. "Nice of you to ask, though."
</p>
</main>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>Alex</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 400>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="BunkerAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AboutInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BunkerCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BunkerMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="BunkerCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
He smiles humorlessly. "Sure, I can do that. Won't be free, though. Normally I'd ask for money or food, but it so happens that you're in luck. There's a part that just burned out, so I need to do some rewiring, but I don't have the copper for it. There should be some in the old mine to the west. If you bring me some copper, I'll get you up to the surface."
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please check your inventory.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AboutPassage');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://www.onlygfx.com/wp-content/uploads/2017/06/boy-silhouette-1.png" height = 75>
<img src="https://svgsilh.com/svg/576655.svg" onclick="window.story.show('ExaminesMetal');" height = 200>
<div></div>
</div>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click on the item.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>Alex</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('RyanWantsToJoin');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<main>
<p>
Alex examines the piece of metal you hand him. "Yeah, I guess this'll do. Ready to head up?"
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click the forward arrow.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>Ryan</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AlexAsksYou');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<main>
<p>
A voice comes from behind you. "Actually, Alex, would you mind taking us as well?" Ryan smiles at you from the entrance, Beth lurking behind him like a shadow.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click the forward arrow.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>Alex</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AloneOrWith');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<main>
<p>
Alex squints. "Oh, Ryan. Hello. Well, she got the copper for me; it's up to her."
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Please click the forward arrow.</p>
</div>
</div>
</div>
</div>
</body>
<div class="mapspacer"></div><div class="spacer"></div>
<div class="choose">
<div class="left" onclick="window.story.show('Alone');"><h1>Go alone</h1></div>
<div class="left" onclick="window.story.show('With');"><h1>Go with Ryan and Beth</h1></div>
</div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AbandonedVillage');" height = 75>
</div>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>You can choose between the box on the left or the box on the right.</p>
</div>
</div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>Elevator</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');">
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('TestWith');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
.buttonForward img {
filter: invert(1);
}
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.rightnav img {
height: 300px;
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="WithAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="WithInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WithCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WithMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="WithCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="WithAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1505.png" width=725>
<p>
The elevator smells like metal and cigarette butts, like every other elevator you've smelled in your life. The ascent is much longer, though. Eventually, the elevator clangs, and the motion stops. Alex wipes the sweat from his brow. "Shall we see what we can find?"
</p>
</main>
</body>
<div class="mapspacer"></div><div class="bigtitle">
<h1>About</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('With');" height = 75>
</div>
<body>
<main>
<p>
Explore Saddie's journey through the underdepth of an alternate reality where the world above is aflame. Experience her memories as you come to understand just where you are and try to find a certain someone. Try restarting the story to find the best ending and try to find all of the important clues to enjoy this game to the fullest. Have fun!!
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('With');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<img src="https://freesvg.org/img/burning_cigarette_01.png" onclick="window.story.show('WithCigarette');" height = 200>
<div></div>
</div>
</div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-between;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('With');" height = 75>
</div>
<div class="mapspacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 75>
<div class="charactertext">
<h1>
Ryan
</h1>
<h3>
He's a tall guy with curly hair and an affable bearing. He's always happy to talk. Says it takes his mind off things.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1515.png" height = 75>
<div class="charactertext">
<h1>
Beth
</h1>
<h3>
She doesn't say much. Maybe she thinks it would ruin her imposing presence, or maybe she's just shy.
</h3>
</div>
</div>
<div class="mapspacer"></div>
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1513.png" height = 75>
<div class="charactertext">
<h1>
Alex
</h1>
<h3>
A small fellow distinguished by his choice of headwear and deeply cynical attitude.
</h3>
</div>
</div>
<div class="spacer"></div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('With');" height = 75>
</div>
<div class="mapspacer"></div>
<img class="map" src="https://dlclab.unc.edu/files/2020/11/IMG_1506.png"></img>
<style>
.mapplace[onclick] { cursor: pointer; }
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.map {
width: 100%;
left: 0;
}
.info {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.infocontainer {
display: flex;
justify-content: space-evenly;
width: 100%;
left: 0;
z-index: -1;
}
</style><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('With');" height = 75>
</div>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body><div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('With');" height = 75>
</div>
<div class="spacer"></div>
<div class="listcharactersrows">
<div class="listcharacterscolumns">
<img class="character" src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" height = 75>
<div class="charactertext">
<h1>
Saddie
</h1>
<h3>
You can't remember much about the past few years, or anything really. But maybe your surroundings will help jog your memory.
</h3>
</div>
</div>
</div>
<style>
.charactertext {
background-image: var(--bg-primary);
width: 50%;
height: 80%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: space-evenly;
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.listcharactersrows {
display: flex;
flex-direction: column;
}
.listcharacterscolumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(to right, #23232e , #141418);
padding: 25px 25px 25px 25px;
}
.character {
height: 200px;
left: 0;
}
.listcharacterscolumns img {
filter: invert(1);
}
</style><div class="bigtitle">
<h1>Memory of Cigarettes</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Alone');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('AloneInventory');" height = 75>
</div>
<body>
<main>
<p>
He stubbed it out in the bowl of the water fountain. "It was nice of you to come back, Sadie, really. But I can't go with you. There are things we have to do." His eyes glittered with an intensity you didn't recognize in your sleepy, charming little brother.
As he turned and walked back towards the building, he spoke to you over his shoulder, without looking back. "If, after all this is over, you happen to be in the area, come find me. I'll be here."
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Memory of Cigarettes</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('With');" style="transform: scaleX(-1);" height = 75>
</div>
<div class="buttonBackward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('WithInventory');" height = 75>
</div>
<body>
<main>
<p>
He stubbed it out in the bowl of the water fountain. "It was nice of you to come back, Sadie, really. But I can't go with you. There are things we have to do." His eyes glittered with an intensity you didn't recognize in your sleepy, charming little brother.
As he turned and walked back towards the building, he spoke to you over his shoulder, without looking back. "If, after all this is over, you happen to be in the area, come find me. I'll be here."
</p>
</main>
</body>
<div class="spacer"></div><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('DoorTutorial2');" height = 100>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Knock three times.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('DoorTutorial3');" height = 200>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Knock three times.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" onclick="window.story.show('DoorTutorial4');" height = 300>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Knock three times.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="spacer"></div>
<div class="rightsidenav">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('Ryan2');" style="transform: scaleX(-1);" height = 75>
</div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<main>
<div class="choose">
<img src="https://image.flaticon.com/icons/png/512/32/32533.png" height = 400>
</div>
<div class="mapspacer"></div>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Knock three times.</p>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
</main>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.rightsidenav img {
filter: invert(1);
}
.choose {
display: flex;
flex-direction: row-reverse;
justify-content: space-evenly;
width: 100%;
left: 0;
}
.right {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
.left {
background: linear-gradient(to right, #23232e , #141418);
width: 200px;
height: 200px;
padding: 25px 25px 25px 25px;
color: #b6b6b6;
display: flex;
justify-content: center;
align-items: center;
}
div[onclick] { cursor: pointer; }
</style><div class="bigtitle">
<h1>Ryan</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1512.png" height = 400>
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('3choices');" style="transform: scaleX(-1);" width = 100>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
</style>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<span class="link-text logo-text">Under<br>depth</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageInventory" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="cat"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-cat fa-w-16 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCharacters" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="alien-monster"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M160,320h64V224H160Zm192-96v96h64V224Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Characters</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageMap" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-station-moon-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Map</span>
</a>
</li>
<li class="nav-item">
<a data-passage="AbandonedVillageCredits" class="nav-link">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="space-shuttle"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Credits</span>
</a>
</li>
<li class="nav-item" id="themeButton">
<a data-passage="AbandonedVillageAbout" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="solarIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sun"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-sun fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
class="fa-primary"
></path>
</g>
</svg>
<svg
class="theme-icon"
id="darkIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="sunglasses"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
class="fa-primary"
></path>
</g>
</svg>
<span class="link-text">Themify</span>
</a>
</li>
</ul>
</nav>
<main>
<p>
"Yeah, just like that. I also heard that Alex needs some copper. So maybe try your luck at the mine."
</p>
</main>
</body>
<div class="mapspacer"></div>
<div class="bigtitle">
<h1>The Surface</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('AloneMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('RememberAlone');" style="transform: scaleX(-1);" height = 75>
</div>
<body>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1524.png" width=725>
<p>
The surface assaults you with an oppressive heat, as you expected. The world is burning, after all—you can see it there now; a column of black smoke, the skeletal arms of what once was pine.
You travel for a few hours, not knowing what you're looking for, your companion keeping to a subdued silence. Eventually, though, you find it: a squat gray building glittering with broken glass. In front of it, a a young man, arguing with someone who's obscured by the scant shade of a doorway. He looks familiar.
Again, memory threatens to overwhelm you, and this time it does, crashing over your head like a breaker on the shore. You drop to your knees.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>The Surface</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('RememberWith');" style="transform: scaleX(-1);" height = 75>
</div>
<body>
<main>
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1524.png" width=725>
<p>
The surface assaults you with an oppressive heat, as you expected. The world is burning, after all—you can see it there now; a column of black smoke, the skeletal arms of what once was pine.
You travel for a few hours, not knowing what you're looking for, your companions keeping to a subdued silence. Eventually, though, you find it: a squat gray building glittering with broken glass. In front of it, a a young man, arguing with someone who's obscured by the scant shade of a doorway. He looks familiar.
Again, memory threatens to overwhelm you, and this time it does, crashing over your head like a breaker on the shore. You drop to your knees.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Memories</h1>
</div>
<div class="rightnav">
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>1</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>2</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>3</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>4</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>5</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>6</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>7</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('WithRemember');">
<div>8</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>9</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>10</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>11</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('WithForgot');">
<div>12</div>
</div>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
</div>
<style>
div[onclick] { cursor: pointer; }
.spacerstuff {
width: 5px;
height: 40px;
background-color: var(--bg-primary);
}
.numberrow {
width: 75%; /* Full-height: remove this if you want "auto" height */
height: 100px; /* Set the width of the sidebar */
background-color: var(--text-secondary);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px;
border-style: solid;
border-color: var(--bg-primary);
border-width: 5px;
}
.numberstuff {
width: 25%;
color: var(--bg-primary);
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px;
}
</style>
<div class="mapspacer"></div>
<ul>
<li>
<input type="checkbox" id="myCheckbox7" />
<label for="myCheckbox7"><img src="https://svgsilh.com/svg/576655.svg" /> </label>
</li>
<li>
<input type="checkbox" id="myCheckbox11" />
<label for="myCheckbox11"><img src="https://cdn.pixabay.com/photo/2018/04/15/18/58/drugs-3322489__340.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="https://webstockreview.net/images/corn-clipart-svg-10.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox5" />
<label for="myCheckbox5"><img src="https://cdn.fastly.picmonkey.com/content4/previews/main/butterflies/butterfly_02_550.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox10" />
<label for="myCheckbox10"><img class="invertstuff" src="https://i.pinimg.com/originals/eb/2d/c8/eb2dc86a78783874168aad79f6a58164.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3"><img src="https://cdn.pixabay.com/photo/2020/05/12/18/38/grasshopper-5164442_960_720.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox4" />
<label for="myCheckbox4"><img src="https://cdn4.iconfinder.com/data/icons/business-and-marketing-21/32/business_marketing_advertising_News__Events-61-512.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox9" />
<label for="myCheckbox9"><img src="https://webstockreview.net/images/clipart-telephone-moblie-13.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox6" />
<label for="myCheckbox6"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-keypad-outline-512.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox8" />
<label for="myCheckbox8"><img src="https://freesvg.org/img/burning_cigarette_01.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2"><img src="https://cdn.pixabay.com/photo/2012/04/13/17/18/crate-32941_960_720.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox12" />
<label for="myCheckbox12"><img src="https://freesvg.org/img/Coffee-Cup-Silhouette.png" /></label>
</li>
</ul>
<style>
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="myCheckbox"] {
display: none;
}
label {
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 154px;
width: 154px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label {
border-color: #ddd;
}
:checked + label:before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked + label img {
transform: scale(0.9);
/* box-shadow: 0 0 5px #333; */
z-index: -1;
}
</style>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
.invertstuff {
filter: invert(1);
}
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<body>
<p>
Please click on all of the objects that triggered your memories, and then click the box that contains the number of items you clicked.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>8 just might be ther answer? You probably should've just paid more attention in the game.</p>
</div>
</div>
</div>
</div>
</body>
<div class="spacer"></div>
<div class="bigtitle">
<h1>The Surface</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1525.png" height = 400>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FinalCredits');" style="transform: scaleX(-1);" height = 75>
</div>
<body>
<main>
<p>
You recognize the man as your brother, Zachary, and sprint towards him. He looks up, eyes wide with surprise, and makes a noise you can't hear but can vividly imagine. His companion steps out from the doorway and lifts a blunt-nosed gun. In response, Ryan and Beth raise their own weapons. You hadn't realized they were armed, but you're grateful for it now, as it buys you the time you need to reach Zachary and clasp his hands in your own. "I came back. Like you said."
He doesn't say anything, still looking into your eyes with disbelief and hope. but there will be time enough to talk, once you've both headed back to the Underdepth. This time, he'll come with you.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>The Surface</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FinalCredits');" style="transform: scaleX(-1);" height = 75>
</div>
<body>
<main>
<p>
No, it's not him, or at least you can't be sure. Your memories are too patchy to leap out from your hiding spot on the basis of a few dim recollections from a long-gone childhood. This is a dangerous place, and you'll be of little use to anyone if you're shot or taken for mad. You'll come back if you remember more. But for now, you turn and head reluctantly back towards the Underdepth.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>The Surface</h1>
</div>
<div class="spacer"></div>
<div class="rightnav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1525.png" height = 400>
</div>
<style>
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rightnav img {
filter: invert(1);
}
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FinalCredits');" style="transform: scaleX(-1);" height = 75>
</div>
<body>
<main>
<p>
You recognize the man as your brother, Zachary. You're about to run to him when you see the other man step from the shadows, and see the blunt-nosed gun in his hand. Him, you recognize from the newspaper, and the day Zachary moved out before that. Hardbitten now, changed by prison and by the end of the world. You can tell if you ran out now, he'd shoot, maybe even if Zachary recognized you. His isn't a world that places a premium on family reunions, you imagine.
That's OK. You can wait; if there's one thing everyone still has enough of, it's time. You'll talk to Zachary sometime later, after the hateful sun has gone down, when you can get him alone. Or if they always travel in pairs, maybe you'll go back and see if Ryan and Beth could help protect you. Maybe you haven't yet burned your bridges with them. Regardless, for the time being, you watch and wait.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Memories</h1>
</div>
<div class="rightnav">
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>1</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>2</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>3</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>4</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>5</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>6</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>7</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('AloneRemember');">
<div>8</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>9</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>10</div>
</div>
</div>
<div class="numberrow">
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>11</div>
</div>
<div class="spacerstuff"></div>
<div class="numberstuff" onclick="window.story.show('AloneForgot');">
<div>12</div>
</div>
</div>
<div class="spacer"></div>
<div class="spacer"></div>
</div>
<style>
div[onclick] { cursor: pointer; }
.spacerstuff {
width: 5px;
height: 40px;
background-color: var(--bg-primary);
}
.numberrow {
width: 75%; /* Full-height: remove this if you want "auto" height */
height: 100px; /* Set the width of the sidebar */
background-color: var(--text-secondary);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px;
border-style: solid;
border-color: var(--bg-primary);
border-width: 5px;
}
.numberstuff {
width: 25%;
color: var(--bg-primary);
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 10px;
}
</style>
<div class="mapspacer"></div>
<ul>
<li>
<input type="checkbox" id="myCheckbox7" />
<label for="myCheckbox7"><img src="https://svgsilh.com/svg/576655.svg" /> </label>
</li>
<li>
<input type="checkbox" id="myCheckbox11" />
<label for="myCheckbox11"><img src="https://cdn.pixabay.com/photo/2018/04/15/18/58/drugs-3322489__340.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="https://webstockreview.net/images/corn-clipart-svg-10.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox5" />
<label for="myCheckbox5"><img src="https://cdn.fastly.picmonkey.com/content4/previews/main/butterflies/butterfly_02_550.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox10" />
<label for="myCheckbox10"><img class="invertstuff" src="https://i.pinimg.com/originals/eb/2d/c8/eb2dc86a78783874168aad79f6a58164.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3"><img src="https://cdn.pixabay.com/photo/2020/05/12/18/38/grasshopper-5164442_960_720.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox4" />
<label for="myCheckbox4"><img src="https://cdn4.iconfinder.com/data/icons/business-and-marketing-21/32/business_marketing_advertising_News__Events-61-512.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox9" />
<label for="myCheckbox9"><img src="https://webstockreview.net/images/clipart-telephone-moblie-13.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox6" />
<label for="myCheckbox6"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-keypad-outline-512.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox8" />
<label for="myCheckbox8"><img src="https://freesvg.org/img/burning_cigarette_01.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2"><img src="https://cdn.pixabay.com/photo/2012/04/13/17/18/crate-32941_960_720.png" /></label>
</li>
<li>
<input type="checkbox" id="myCheckbox12" />
<label for="myCheckbox12"><img src="https://freesvg.org/img/Coffee-Cup-Silhouette.png" /></label>
</li>
</ul>
<style>
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="myCheckbox"] {
display: none;
}
label {
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 154px;
width: 154px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label {
border-color: #ddd;
}
:checked + label:before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked + label img {
transform: scale(0.9);
/* box-shadow: 0 0 5px #333; */
z-index: -1;
}
</style>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
.invertstuff {
filter: invert(1);
}
.rightnav {
width: 200px; /* Full-height: remove this if you want "auto" height */
height: 100%; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: var(--bg-primary);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<body>
<main>
<p>
Please click on all of the objects that triggered your memories, and then click the box that contains the number of items you clicked.
</p>
</main>
<div class="mapspacer"></div>
<style>
#id01 {
display: none;
}
.button {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.w3-container {
background-color: var(--bg-primary);
border: none;
color: var(--text-primary);
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.x {
cursor: pointer;
}
</style>
<div class="w3-modal-content">
<button class="button" onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Help</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span class="x" onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>8 just might be ther answer? You probably should've just paid more attention in the game.</p>
</div>
</div>
</div>
</div>
</body>
<div class="spacer"></div>
<div class="bigtitle">
<h1>The Surface</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
.buttonBackward img {
filter: invert(1);
}
</style>
<div class="rightsidenav">
<img src="https://dlclab.unc.edu/files/2020/11/IMG_1514.png" onclick="window.story.show('WithMainCharacter');" height = 75>
</div>
<div class="buttonForward">
<img src="https://www.freeiconspng.com/uploads/return-button-png-26.png" onclick="window.story.show('FinalCredits');" style="transform: scaleX(-1);" height = 75>
</div>
<body>
<main>
<p>
No, it's not him, or at least you can't be sure. Your memories are too patchy to leap out from your hiding spot on the basis of a few dim recollections from a long-gone childhood. This is a dangerous place, and you'll be of little use to anyone if you're shot or taken for mad. You'll come back if you remember more. But for now, you turn and head reluctantly back towards the Underdepth.
</p>
</main>
</body>
<div class="spacer"></div><div class="bigtitle">
<h1>Credits</h1>
</div>
<div class="spacer"></div>
<style>
body {
background-image: linear-gradient(red, yellow);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
main {
background: linear-gradient(to right, #23232e , #141418);
color: #b6b6b6;
}
.rightsidenav img {
filter: invert(1);
}
.buttonForward img {
filter: invert(1);
}
</style>
<body>
<main>
<p>
Underdepth
</br>Coded and designed by Noah MacFarlane
</br>Written by Eli Hardwig
</br>Illustrated by Molly Hanna
</br>Music by Carter Scott
</p>
</main>
</body>