agnes/alienhospital
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
alienhospital/fic/dp/time.html
owoctober f2f4d4699a first
2025-12-23 05:56:17 -05:00

669 lines
No EOL
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Change your site title: (It is shown in the tab) -->
<title>AL13NH0SP1T4L</title>
<!-- Change your site description: (It is shown in Google results) -->
<meta content="My personal website!" name="description" />
<!-- Setting character encoding and viewport size. Do not remove. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- FavIcon (small image in tab), change to any image you want: -->
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- CSS: -->
<!-- You will have to change this to "../style.css" if this HTML file is in a subfolder, to "../../style.css" if this HTML file is in 2 subfolders, etc. -->
<link href="./style.css" rel="stylesheet" />
<script>
// Template generated with petrapixel's layout generator.
// (Please do not remove this credit.)
console.log("%c Template generated with petrapixel's layout generator.", "font-size: 14pt;");
console.log("%c https://petrapixel.neocities.org/coding/layout-generator", "font-size: 14pt;");
</script>
</head>
<body>
<!-- The next line is a skip-to-content link for keyboard users. Do not remove it! -->
<a href="#content" id="skip-to-content-link">Skip to content</a>
<div class="layout">
<!-- =============================================== -->
<!-- HEADER -->
<!-- =============================================== -->
<header>
<div class="header-image">
<img src="https://i.ibb.co/d4wzWNJw/tumblr-9521a9fc973bc72adeebdf473bee6653-94ca1a4f-540.png" alt="" />
</div>
<div class="header-content">
<div class="header-title"></div>
<!-- NAVIGATION -->
<nav>
<ul>
<li><a href="/homepage">Home</a></li>
<li><a href="/about">About Me</a></li>
<li><a href="/shrines">Shrines</a></li>
<li><a href="/resources">Resources</a></li>
<li>
<strong>More</strong>
<ul>
<li><a href="/paint">Games - Paint</a></li>
<li><a href="/kidpix">Games - Kidpix</a></li>
<li><a href="/secrets">Well of Secrets</a></li>
<li><a href="/fanworks">Archive of My Fanworks</a></li>
<li><a href="/links">Even More Links!</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main id="content"> <!-- Do NOT remove the ID here -->
<!-- =============================================== -->
<!-- MAIN CONTENT -->
<!-- =============================================== -->
<section>
<h1>
<a href="/fic/directory">Back</a>
</h1>
<h2>the second hand unwinds (time after time)</h2>
|| Dr. Tyme-centric.
<hr>
<p>Somewhere in the depths of space, a meteorite breaks off and begins its saunter towards the planet below.</p><p> </p><p>Its descent takes time. In several years, when it hits the surface, this will be ironic. Inside of this meteorite there is a feast, and somewhere on a beach in Bali, one man is having a particularly horrible day. The timestamp on this does not matter; he is always having a horrible day.</p><p> </p><p><em> Enlightenment, </em> thinks this man, who is Jonathan Tyme, or will be Jonathan Tyme at some point in the near future or the distant past. <em> Awakening. </em></p><p> </p><p>The beach is barren, today, empty and lifeless. No one else is here. Jonathan closes his eyes, tries to feel the sunset soak into his cells and bring momentary peace over him like a shadow, and the shadow comes in the form of the cold, biting at him —-</p><p> </p><p>this isn’t right.</p><p> </p><p>He opens one eye and the sun’s beauty has faded into a cloud of darkness, which hurls itself toward the Earth at a speed that Jonathan cannot comprehend. He backs up, stumbles over his ankles, his humanity slamming into the sand head-first. When—</p><p> </p><p>When it hits the ground, the water is knocked backwards in what he initially perceives as a message of divinity, parting the seas, halving them in formulaic perfection. It has to be something holy—-</p><p> </p><p>and then he notices that the rock in front of him is a rock, and is a rock that has split into a beautiful, sirensong luring violet stone that calls to him with a wail. The water slowly spreads back into its original place, lapping at his thighs and knees, but he manages to grab a shard of the stone with his hands and rises to his feet, <em> running running, always running—- </em></p><p> </p><p>His vision goes angelic, blinding whitest light filling up his eyes as his head once again tingles against the beach floor—</p><p> </p><p><em> Continuinium </em>and he feels every string of suffering that has ever existed and he sees wars that have already passed and wars that will be fought in the future to devastate and terrorize and he sees pain and he sees pain and he sees pain and he sees:</p><p> </p><p>spaceships and drought and famine and gunshots ring through to shake him and he sees:</p><p> </p><p>guillotines and bayonets and energy-driven weapons and so many weapons and so much goddamn <em> pain </em>radiating out of and into his body, which has now become a vessel for everything that has ever unfolded and everything that has yet to unfold and he sees:</p><p><br />
<br />
<br />
<br />
</p><p>It is August 8, 1980; so many years in Jonathan Tyme’s future, and there are bright lights that shine rainbow and dozens of people tangled together in roller skates and he sees:</p><p> </p><p>Two men, hand in hand, acting as if the world is the habitat of only them in this moment, as they curl into each other, a slow dancing position. One of them laughs as the music changes, transforming into an upbeat tune, <em> bad girls, talking about the sad girls, sad girls, talking about bad girls, yeah, </em> but he just rests his head back on his partner’s shoulder, and their dance continues slow, elegant, in contrast to their surroundings. They sway back and forth, and no one stares, no one growls or hurries away. Jonathan Tyme, so innocent despite his own fear, thinks: <em> this must be it, this must be what the truth of humanity is like, the ability to safely lose yourself—- </em></p><p> </p><p>And his vision flows back true, the beach surrounding him golden once again; he’s back in the present. He has been ripped from the peak of humanity. He can see his reflection in this stone — the continuinium — and his eyes look different now, a different glow, a new kind of shine, a glittering hunger.</p><p> </p><p>+</p><p> </p><p>He drills a small hole in the continuinium and strings twine through it, wears it around his neck, and then he goes to bed, tries to forget today. Tries to forget that one piece of serenity. Tries to forget the slivers of pain. </p><p> </p><p>It simply follows him into his subconscious. He struggles against it; in his dream he is strapped to a table and injected with substances; in his dream he dies over and over and is born again only to die again and live again <em> and; </em>in his dream he exists like this:</p><p> </p><p>[ Jonathan Tyme, born August 7th, 2087 to wealthy parents on a newly discovered planet after all the rich have abandoned a dying Earth. He takes his own life at sixteen;</p><p> </p><p>Jonathan Tyme, born 1349; his mother dies of the Plague three days afterward; his father a week later; himself at age two;</p><p> </p><p>Jonathan Tyme, born 2509, created and designed in a lab to be perfect;</p><p> his nurse is 146 years old as humanity has found the solution to aging. He dies at the age of ninety, taken too soon;</p><p> </p><p>Jonathan Tyme, created as a sentient android by Dr. N. Caulder in the year 3010;</p><p> </p><p>Jonathan Tyme, living these lives, reincarnate ].</p><p> </p><p>He feels the universal pain seep into him—-</p><p> </p><p>When his eyes open, the white light is back; he must be dead, he thinks, until it clears up and he is in a continually white room, barren except for his bed, which is now also white and attached to the wall.</p><p> </p><p>“Good morning,” says an inhuman perfect voice, “Captain Tyme.”</p><p> </p><p>“Who said that?”</p><p> </p><p>“The ship’s software. You know that.”</p><p> </p><p>“This is a ship?” he asks; in his time, ships rest in the ocean. </p><p> </p><p>“Yes,” the software chimes. “You are on the Continuous Space Program’s main level, a semi-classified science vessel tasked with exploring the edges of uncharted space.”</p><p> </p><p>“...Huh.”</p><p> </p><p>He reaches for his neck —- the stone is still safe around him. He grasps it, tries to think of the music, of the lights, of the love—</p><p> </p><p>Of the—-</p><p> </p><p>the—-</p><p> </p><p>“Next one’s for the bad girls,” booms a new voice -- this one entirely human — and he’s—- August 8, 1980 — </p><p> </p><p>Someone places a hand on his shoulder, and he jolts. </p><p> </p><p>“Oh, jeez, sorry.”</p><p> </p><p>Jonathan turns. The man’s face is reddened; he pulls away, flustered; something within Jonathan himself does not want him to pull away, wants the opposite.</p><p> </p><p>“Nah, it’s fine, I just didn’t see you.”</p><p> </p><p>He smiles, his teeth that blinding white, sharp. “You wanna dance?”</p><p> </p><p>He freezes, hesitant, like a frightened animal that knows it is about to meet its end — but he smiles back, tries to be warm. “Yeah, alright.”</p><p> </p><p>He looks down; he’s already in skates. The man takes his hand, leads him to the middle of the floor, and then places his hand around Jonathan’s hips — he jolts again. </p><p> </p><p>“I promise I don’t bite,” says the man, and Jonathan realizes that he does not know this man’s name, comes to the subsequent realization that he doesn’t want to know this man’s name. He relaxes, and the man sways him like in his vision, slow to the increasing beat.</p><p> </p><p>And then he whispers, against Jonathan’s ear, “Watch me,” pulls away. A crowd quickly gathers as he begins to spin, performing skating moves that Jonathan didn’t know were possible, moving swiftly through various people, dipping and contorting and flying in enchanting jitters. Jonathan is intrigued, mesmerized by what his body can do, feels something burn consuming inside his stomach.</p><p> </p><p>He skates back to Jonathan. “I can teach you,” he says, a cocky wink, “if you’d like.”</p><p> </p><p>“Yeah, please, holy shit, that was amazing.”</p><p> </p><p>He pulls out a pen, writes his address on Jonathan’s hand. “Tomorrow, six o’clock.”</p><p> </p><p>“How do I know you’re not some sort of—”</p><p> </p><p>“What, crazy person? Newsflash, baby, you are too. You wouldn’t be coming over if you weren’t.”</p><p> </p><p>+</p><p> </p><p>He comes to the man’s house, and the man teaches him how to roller skate, and he still does not get the man’s name. He repeats this day over and over, forcing the continuinium to take him back to that fixed moment each time the night ends and he’s alone. He does this twenty times, thirty times, a vast and inexplicable number of times. </p><p> </p><p>He feels the pain with every single instance that the mineral bends to his will. It’s like a transaction; every time he messes with time, the stone sinks pain in deeper for a few moments, as if it’s sucking up his sanity, feeding on it insatiable. It is the pain, he knows, that everyone currently alive is experiencing. He feels the pain of not only Earth, but of other life-sustaining planets as well — he gets used to it, can suck it up, the reward is too great, too promising.</p><p> </p><p>One day—</p><p> </p><p>The continuinium takes him back to the roller disco, but the man is not there. Jonathan’s heart begins to flutter, to embrace panic.</p><p> </p><p>He approaches another skater. “Hey, have you seen a man here -- uh, tall, blond, handsome, wearing a white jacket—”</p><p> </p><p>“Oh, Jonny? Yeah, no one’s seen him for a few days. Rumor is that ex of his finally caught up with him. Not good.”</p><p> </p><p>And he goes back to skating around. Like <em> Jonny </em>possibly being gone is simply unimportant.</p><p> </p><p>+</p><p> </p><p>Jonathan treks to Jonny’s house. What he finds here cannot be written, what he finds here is sickening and maddening and glass-pain sharp and he—</p><p> </p><p>he can feel himself—</p><p> </p><p>he can feel his mind slip away in anger, in mourning, in a shroud of darkness like the meteor on the beach long, long ago, in history, forgotten to time.</p><p> </p><p>The pain, upon placing his hand over the stone anew, is worse -- he now has his own on top of the galactic source of suffering within him. He can feel his mind slip away, through his own fingers, like sand -- sands of the hourglass -- sands of the beach where the ocean has parted. And then —</p><p> </p><p>and then he laughs, entirely unwound.</p><p> </p><p>+</p><p> </p><p> </p><p>His first journal entry begins at a surgery center. He draws out the concept, crafts it himself — a clock for a head to represent his new power, his ultimate ability, the mineral in the middle alone, merged with his brain foreign and alien. It strips him of all humanity. Dr. Tyme — he is not <em> Jonathan, </em>not anymore — will no longer have a human appearance, and therefore he will no longer be attached to anything human. </p><p> </p><p>The surgeon takes a look at his idea and nods. “Well,” she says, “we’ve had weirder requests.”</p><p> </p><p>“So you can do it?”</p><p> </p><p>“Honey, it’s the 27th century. We can do anything.”</p><p> </p><p> </p><p> </p><p> </p>
</section>
</main>
<!-- Closing .layout: -->
</div>
<!-- Add any additional Javascript code (<script></script>) here. -->
</body>
<style>
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */
/* Variables are used like this: var(--text-color) */
:root {
/* Background Colors: */
--background-color: #ffffff;
--content-background-color: #ffffff;
--sidebar-background-color: #ffffff;
/* Text Colors: */
--text-color: #000000;
--sidebar-text-color: #2500dd;
--link-color: #000d63;
--link-color-hover: #5e00ec;
/* Text: */
--font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--heading-font: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ＭＳ ゴシック' , 'MS Gothic', 'Noto Sans CJK JP', TakaoPGothic, sans-serif;
--font-size: 18px;
/* Other Settings: */
--margin: 25px;
--padding: 24px;
--border: 10px inset #001457;
--round-borders: 0px;
--sidebar-width: 300px;
}
/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-size: var(--font-size);
margin: 0;
padding: var(--margin);
color: var(--text-color);
font-family: Times;
line-height: 1.2;
font-weight: 500;
background: var(--background-color);
background-image: url("https://i.ibb.co/214VBwsN/pkg50004.jpg");
}
::selection {
/* (Text highlighted by the user) */
background: rgba(0, 0, 0, 0.2);
}
mark {
/* Text highlighted by using the <mark> element */
text-shadow: 1px 1px 4px var(--link-color);
background-color: inherit;
color: var(--text-color);
}
/* Links: */
a {
text-decoration: underline;
}
a,
a:visited {
color: var(--link-color);
}
a:hover,
a:focus {
color: var(--link-color-hover);
text-decoration: none;
}
/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */
.layout {
width: 1200px;
display: grid;
grid-gap: var(--margin);
grid-template: "header" auto "main" auto "footer" auto / auto;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
main {
grid-area: main;
overflow-y: auto;
padding: var(--padding);
background: var(--content-background-color);
border: var(--border);
border-radius: var(--round-borders);
}
/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */
header {
grid-area: header;
font-size: 1.2em;
border: var(--border);
border-radius: var(--round-borders);
background: var(--content-background-color);
}
.header-content {
padding: var(--padding);
}
.header-title {
font-family: var(--heading-font);
font-size: 1.5em;
font-weight: bold;
}
.header-image img {
width: 100%;
height: auto;
}
/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */
aside {
grid-area: aside;
border: var(--border);
border-radius: var(--round-borders);
overflow: hidden;
background: var(--sidebar-background-color);
padding: var(--padding);
color: var(--sidebar-text-color);
}
.left-sidebar {
grid-area: leftSidebar;
}
.right-sidebar {
grid-area: rightSidebar;
}
.sidebar-title {
font-weight: bold;
font-size: 1.2em;
font-family: var(--heading-font);
}
.sidebar-section:not(:last-child) {
margin-bottom: 3em;
}
.sidebar-section ul,
.sidebar-section ol {
padding-left: 1.5em;
}
.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
margin-top: 10px;
}
/* Sidebar Blockquote: */
.sidebar-section blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
overflow: hidden;
}
.sidebar-section blockquote > *:first-child {
margin-top: 0;
}
.sidebar-section blockquote > *:last-child {
margin-bottom: 0;
}
/* Site Button: */
.site-button {
display: flex;
flex-direction: column;
align-items: center;
}
.site-button textarea {
font-family: monospace;
font-size: 0.7em;
}
/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */
nav {
margin-bottom: 3em;
}
nav .sidebar-title {
margin-bottom: 0.5em;
}
nav ul {
margin: 0 -5px;
padding: 0;
list-style: none;
user-select: none;
}
nav ul li {
margin-bottom: 0;
}
nav > ul li > a,
nav > ul li > strong {
display: inline-block;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 5px 10px;
}
nav > ul li > a.active,
nav > ul li > details.active summary {
font-weight: bold;
}
nav ul summary {
cursor: pointer;
}
nav ul ul li > a {
padding-left: 30px;
}
/* NAVIGATION IN HEADER */
header nav {
margin-bottom: 0;
}
header nav ul {
display: flex;
flex-wrap: wrap;
margin: 0;
}
header nav ul li {
position: relative;
}
header nav ul li:first-child > a {
padding-left: 0;
}
header nav ul li:last-child > a {
padding-right: 0;
}
/* Subnavigation (Drop-Down): */
header nav ul ul {
background: var(--content-background-color);
display: none;
position: absolute;
top: 100%;
left: 10px;
padding: 0.5em;
z-index: 1;
border: var(--border);
min-width: 100%;
box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}
header nav ul li:hover ul,
header nav ul li:focus-within ul {
display: block;
}
header nav ul li strong {
color: var(--link-color);
text-decoration: underline;
font-weight: normal;
}
header nav ul ul li a {
display: block;
padding-left: 0;
padding-right: 0;
}
/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */
main {
line-height: 1.5;
}
main a,
main a:visited {
color: var(--link-color);
}
main a:hover,
main a:focus {
color: var(--link-color-hover);
text-decoration-style: wavy;
}
main p,
main .image,
main .full-width-image,
main .two-columns {
margin: 0.75em 0;
}
main ol,
main ul {
margin: 0.5em 0;
padding-left: 1.5em;
}
main ol li,
main ul li {
margin-bottom: 0.2em;
line-height: 1.3;
}
main ol {
padding-left: 2em;
}
main blockquote {
background: rgba(0, 0, 0, 0.1);
padding: 15px;
margin: 1em 0;
border-radius: 10px;
}
main pre {
margin: 1em 0 1.5em;
}
main code {
text-transform: none;
}
main center {
margin: 1em 0;
padding: 0 1em;
}
main hr {
border: 0;
border-top: var(--border);
margin: 1.5em 0;
}
/* HEADINGS: */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
font-family: var(--heading-font);
margin-bottom: 0;
line-height: 1.5;
}
main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
margin-top: 0;
}
main h1 {
font-size: 1.5em;
}
main h2 {
font-size: 1.4em;
}
main h3 {
font-size: 1.3em;
}
main h4 {
font-size: 1.2em;
}
main h5 {
font-size: 1.1em;
}
main h6 {
font-size: 1em;
}
/* COLUMNS: */
.two-columns {
display: flex;
}
.two-columns > * {
flex: 1 1 0;
margin: 0;
}
.two-columns > *:first-child {
padding-right: 0.75em;
}
.two-columns > *:last-child {
padding-left: 0.75em;
}
/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */
.image {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.full-width-image {
display: block;
width: 100%;
height: auto;
}
.images {
display: flex;
width: calc(100% + 5px + 5px);
margin-left: -5px;
margin-right: -5px;
}
.images img {
width: 100%;
height: auto;
padding: 5px;
margin: 0;
overflow: hidden;
}
/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */
/* please do not remove this. */
#skip-to-content-link {
position: fixed;
top: 0;
left: 0;
display: inline-block;
padding: 0.375rem 0.75rem;
line-height: 1;
font-size: 1.25rem;
background-color: var(--content-background-color);
color: var(--text-color);
transform: translateY(-3rem);
transition: transform 0.1s ease-in;
z-index: 99999999999;
}
#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
transform: translateY(0);
}
/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */
/* CSS Code for devices < 800px */
@media (max-width: 800px) {
body {
font-size: 14px;
}
.layout {
width: 100%;
grid-template: "header" auto "rightSidebar" auto "main" auto "leftSidebar" auto "footer" auto / 1fr;
/* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}
aside {
border-bottom: 1px solid;
padding: 9px;
font-size: 0.9em;
}
nav {
padding: 0;
}
nav > ul {
padding-top: 0.5em;
}
nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
padding: 0.5em;
}
main {
max-height: none;
padding: 15px;
}
.images {
flex-wrap: wrap;
}
.images img {
width: 100%;
}
#skip-to-content-link {
font-size: 1rem;
}
}
</style>
</html>
Reference in a new issue View git blame Copy permalink