<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/97ONHhf.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(130%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[START->Day 1]]</span>
<span class="button-style">[[LEVEL SELECT]]</span>
</div>
</div>
</div>
<div id="bottom-textbox">
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[VIEW INSTRUCTIONS->Tutourial 01]]</span><span class="button-style">[[PROCEED->patient commence]]</span>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 1%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->patient commence2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You press the power switch, and the machine hums to life, casting a pale, rhythmic glow across the console. This is the heart of your work, an immense, labyrinth device stretching deep into the walls, swallowing every sound and separating you entirely from the patients who pass through it. You’ve never seen their faces, nor have they seen yours.</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script>|logo>[<div style="opacity: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; transition: opacity 1s; margin: 0; padding: 0; position: fixed; top: 0; left: 0;" id="logo">
<img src="https://i.imgur.com/cwJ8PZi.jpeg" alt="Logo" style="max-width: 100vw; max-height: 100vh; object-fit: contain;">
</div>]
<style>
/* Hide the undo arrow */
tw-undo {
display: none;
}
</style>
<script>
(function() {
var logo = document.getElementById('logo');
// Fade in the logo over 1 second
setTimeout(function() {
logo.style.opacity = '1';
}, 100);
// Fade out the logo after 2 seconds (for a total of 3 seconds on screen)
setTimeout(function() {
logo.style.opacity = '0';
}, 2100);
})();
</script>
{
(live: 3s)[(goto: "Title")]
}(bg:#7ab8c7)[Your Text Here]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/A9PbAMR.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->First Patient2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Rows of buttons and switches blink in cold precision, each aligned to a different diagnostic mode. The screen in front of you glows as the system readies itself to isolate and magnify each part of the body in turn. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -45%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->tut2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>As a PIDA employee, your job is to scan individual organs of patients for parasitic infections. Each scan produces unique sounds, so listen carefully for specific audio cues referenced in the PIDA Documentation.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/kUX2-fzGtXI?autoplay=1&loop=1&playlist=kUX2-fzGtXI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('kUX2-fzGtXI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 01]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/nlJCZs8Xb_o?autoplay=1&loop=1&playlist=nlJCZs8Xb_o`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('nlJCZs8Xb_o'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 01]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/zByb_BjrMPo?autoplay=1&loop=1&playlist=zByb_BjrMPo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('zByb_BjrMPo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 01]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('4Gyj-znzxgY'); // Updated background music track
</script> <style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 5%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 01]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/rKypnLBsFq8?autoplay=1&loop=1&playlist=rKypnLBsFq8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('rKypnLBsFq8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 01]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/VHuwpeTdHZU?autoplay=1&loop=1&playlist=VHuwpeTdHZU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('VHuwpeTdHZU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 01]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/1-sb2w_slrY?autoplay=1&loop=1&playlist=1-sb2w_slrY`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('1-sb2w_slrY'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->IL01]]</div>
<div class="button-style">[[No->Start Examination 01]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILfalse01]]</span>
<span class="button-style">[[EYES->ILfalse01]]</span>
<span class="button-style">[[HEART->ILtrue01]]</span>
<span class="button-style">[[LUNGS->ILfalse01]]</span>
<span class="button-style">[[STOMACH->ILfalse01]]</span>
<span class="button-style">[[BLOOD->ILfalse01]]</span>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2.5%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, 3%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->IncorrectDiagnosis]]</span>
<span class="button-style">[[BIODE SLUGS->IncorrectDiagnosis]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis]]</span>
<span class="button-style">[[MEATMITES->CorrectDiagnosis]]</span>
<span class="button-style">[[CREETFLUKES->IncorrectDiagnosis]]</span>
<span class="button-style">[[PHYTOZOA->IncorrectDiagnosis]]</span>
<span class="button-style">[[ELECTRIONS->IncorrectDiagnosis]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis]]</span>
<span class="button-style">[[PHANTAMOEBAS->IncorrectDiagnosis]]</span>
<span class="button-style">[[MOULDED->IncorrectDiagnosis]]</span>
</div>
</div>
(set: $CorrectPD to true)
(goto: "Diagnosis check 01")(set: $CorrectPD to false)
(goto: "Diagnosis check 01")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Normal 02]]</span>
<span class="button-style">[[EYES->Eye Normal 02]]</span>
<span class="button-style">[[HEART->Heart Normal 02]]</span>
<span class="button-style">[[LUNGS->Lung CorkWorm]]</span>
<span class="button-style">[[STOMACH->Stomach Normal 02]]</span>
<span class="button-style">[[BLOOD->Blood Normal 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 02]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->01IT2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
(if: $CorrectPD and $CorrectIL)[
(go-to: "Treat parasite")
]
(else:)[
(go-to: "lifeloss01")
](set: $CorrectIL to false)
(go-to: "Parasite Diagnosis01")(set: $CorrectIL to true)
(go-to: "Parasite Diagnosis01")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->IL02]]</div>
<div class="button-style">[[No->Start Examination 02]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILfalse02]]</span>
<span class="button-style">[[EYES->ILfalse02]]</span>
<span class="button-style">[[HEART->ILfalse02]]</span>
<span class="button-style">[[LUNGS->ILtrue02]]</span>
<span class="button-style">[[STOMACH->ILfalse02]]</span>
<span class="button-style">[[BLOOD->ILfalse02]]</span>
</div>
</div>
(set: $CorrectIL2 to false)
(go-to: "Parasite Diagnosis02")(set: $CorrectIL02 to true)
(go-to: "Parasite Diagnosis02")(set: $CorrectPD2 to false)
(goto: "Diagnosis check 02")(set: $CorrectPD02 to true)
(goto: "Diagnosis check 02")(if: $CorrectPD02 and $CorrectIL02)[
(go-to: "Treat parasite02")
]
(else:)[
(go-to: "lifeloss02")
]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->02TP2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->02IT2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Electrion]]</span>
<span class="button-style">[[EYES->Eye Normal 03]]</span>
<span class="button-style">[[HEART->Heart Normal 03]]</span>
<span class="button-style">[[LUNGS->Lung Normal 03]]</span>
<span class="button-style">[[STOMACH->Stomach Normal 03]]</span>
<span class="button-style">[[BLOOD->Blood Normal 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 03]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 02]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('royA06Rl_B8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 02]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('_Hwg5DMJ9yc'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 03]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('lLa8PC_jG84'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2.5%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, 3%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->IncorrectDiagnosis03]]</span>
<span class="button-style">[[BIODE SLUGS->IncorrectDiagnosis03]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis03]]</span>
<span class="button-style">[[MEATMITES->IncorrectDiagnosis03]]</span>
<span class="button-style">[[CREETFLUKES->IncorrectDiagnosis03]]</span>
<span class="button-style">[[PHYTOZOA->IncorrectDiagnosis03]]</span>
<span class="button-style">[[ELECTRIONS->CorrectDiagnosis03]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis03]]</span>
<span class="button-style">[[PHANTAMOEBAS->IncorrectDiagnosis03]]</span>
<span class="button-style">[[MOULDED->IncorrectDiagnosis03]]</span>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->IL03]]</div>
<div class="button-style">[[No->Start Examination 03]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILtrue03]]</span>
<span class="button-style">[[EYES->ILfalse03]]</span>
<span class="button-style">[[HEART->ILfalse03]]</span>
<span class="button-style">[[LUNGS->ILfalse03]]</span>
<span class="button-style">[[STOMACH->ILfalse03]]</span>
<span class="button-style">[[BLOOD->ILfalse03]]</span>
</div>
</div>
(set: $CorrectIL3 to false)
(go-to: "Parasite Diagnosis03")(set: $CorrectIL3 to true)
(go-to: "Parasite Diagnosis03")(set: $CorrectPD3 to true)
(set: $dummyVar to 1) /* This is a dummy line */
(goto: "Diagnosis check 03")(set: $CorrectPD3 to false)
(goto: "Diagnosis check 03")(if: $CorrectPD3 and $CorrectIL3)[
(go-to: "Treat parasite03")
]
(else:)[
(go-to: "lifeloss03")
]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->03IT2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->03TP2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Normal 04]]</span>
<span class="button-style">[[EYES->Eye Normal 04]]</span>
<span class="button-style">[[HEART->Heart Moulded]]</span>
<span class="button-style">[[LUNGS->Lung Moulded]]</span>
<span class="button-style">[[STOMACH->Stomach Normal 04]]</span>
<span class="button-style">[[BLOOD->Blood Normal 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 04]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 04]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('7zuuAOu1iZ4'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 04]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('n_K_aOOhaQg'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->Bribe1 01]]</div>
<div class="button-style">[[No->Start Examination 04]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILfalse04]]</span>
<span class="button-style">[[EYES->ILfalse04]]</span>
<span class="button-style">[[HEART->ILfalse04]]</span>
<span class="button-style">[[LUNGS->ILtrue04]]</span>
<span class="button-style">[[STOMACH->ILfalse04]]</span>
<span class="button-style">[[BLOOD->ILfalse04]]</span>
</div>
</div>
(set: $CorrectIL4 to true)
(go-to: "Parasite Diagnosis04")(set: $CorrectIL4 to false)
(go-to: "Parasite Diagnosis04")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(5%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, -18%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->Bribe set 01]]</span>
<span class="button-style">[[BIODE SLUGS->IncorrectDiagnosis04]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis04]]</span>
<span class="button-style">[[MEATMITES->IncorrectDiagnosis04]]</span>
<span class="button-style">[[CREETFLUKES->IncorrectDiagnosis04]]</span>
<span class="button-style">[[PHYTOZOA->IncorrectDiagnosis04]]</span>
<span class="button-style">[[ELECTRIONS->IncorrectDiagnosis04]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis04]]</span>
<span class="button-style">[[PHANTAMOEBAS->IncorrectDiagnosis04]]</span>
<span class="button-style">[[MOULDED->CorrectDiagnosis04]]</span>
</div>
</div>(set: $CorrectPD4 to true)
(set: $dummyVar to 1) /* This is a dummy line */
(goto: "Diagnosis check 04")
(set: $Bribe01 to false)(set: $CorrectPD4 to false)
(goto: "Diagnosis check 04")
(set: $Bribe01 to false)(if: $CorrectPD4 and $CorrectIL4)[
(go-to: "Treat parasite04")
]
(else:)[
(go-to: "lifeloss04")
]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->04IT2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->04TP2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine completes its scan, and the diagnosis appears on the screen: moulded. The word glows in finality, unmistakable and irreversible. You let out a slow breath, feeling a somber satisfaction settle over you, a weight that is both grounding and bitter. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Normal 05]]</span>
<span class="button-style">[[EYES->Eye CreetFluke]]</span>
<span class="button-style">[[HEART->Heart Normal 05]]</span>
<span class="button-style">[[LUNGS->Lung Normal 05]]</span>
<span class="button-style">[[STOMACH->Stomach Normal 05]]</span>
<span class="button-style">[[BLOOD->Blood Normal 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 05]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 05]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DtsxZ7jTP4I'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->IL05]]</div>
<div class="button-style">[[No->Start Examination 05]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILfalse05]]</span>
<span class="button-style">[[EYES->ILtrue05]]</span>
<span class="button-style">[[HEART->ILfalse05]]</span>
<span class="button-style">[[LUNGS->ILfalse05]]</span>
<span class="button-style">[[STOMACH->ILfalse05]]</span>
<span class="button-style">[[BLOOD->ILfalse05]]</span>
</div>
</div>
(set: $CorrectIL5 to false)
(go-to: "Parasite Diagnosis05")(set: $CorrectIL5 to true)
(go-to: "Parasite Diagnosis05")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(5%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, -18%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->IncorrectDiagnosis05]]</span>
<span class="button-style">[[BIODE SLUGS->IncorrectDiagnosis05]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis05]]</span>
<span class="button-style">[[MEATMITES->IncorrectDiagnosis05]]</span>
<span class="button-style">[[CREETFLUKES->CorrectDiagnosis05]]</span>
<span class="button-style">[[PHYTOZOA->IncorrectDiagnosis05]]</span>
<span class="button-style">[[ELECTRIONS->IncorrectDiagnosis05]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis05]]</span>
<span class="button-style">[[PHANTAMOEBAS->IncorrectDiagnosis05]]</span>
<span class="button-style">[[MOULDED->IncorrectDiagnosis05]]</span>
</div>
</div>(set: $CorrectPD5 to true)
(goto: "Diagnosis check 05")(set: $CorrectPD5 to true)
(goto: "Diagnosis check 05")(if: $CorrectPD5 and $CorrectIL5)[
(go-to: "Treat parasite05")
]
(else:)[
(go-to: "lifeloss05")
]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->05TP2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Normal 06]]</span>
<span class="button-style">[[EYES->Eye Normal 06]]</span>
<span class="button-style">[[HEART->Heart Normal 06]]</span>
<span class="button-style">[[LUNGS->Lung Normal 06]]</span>
<span class="button-style">[[STOMACH->Stomach Normal 06]]</span>
<span class="button-style">[[BLOOD->Blood Phantamoeba]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 06]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->05IT2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 06]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('B-w0je1Lws8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->IL06]]</div>
<div class="button-style">[[No->Start Examination 06]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILfalse06]]</span>
<span class="button-style">[[EYES->ILfalse06]]</span>
<span class="button-style">[[HEART->ILfalse06]]</span>
<span class="button-style">[[LUNGS->ILfalse06]]</span>
<span class="button-style">[[STOMACH->ILfalse06]]</span>
<span class="button-style">[[BLOOD->ILtrue06]]</span>
</div>
</div>
(set: $CorrectIL6 to false)
(go-to: "Parasite Diagnosis06")(set: $CorrectIL6 to true)
(go-to: "Parasite Diagnosis06")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(5%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, -18%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->IncorrectDiagnosis06]]</span>
<span class="button-style">[[BIODE SLUGS->IncorrectDiagnosis06]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis06]]</span>
<span class="button-style">[[MEATMITES->IncorrectDiagnosis06]]</span>
<span class="button-style">[[CREETFLUKES->IncorrectDiagnosis06]]</span>
<span class="button-style">[[PHYTOZOA->IncorrectDiagnosis06]]</span>
<span class="button-style">[[ELECTRIONS->IncorrectDiagnosis06]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis06]]</span>
<span class="button-style">[[PHANTAMOEBAS->CorrectDiagnosis06]]</span>
<span class="button-style">[[MOULDED->IncorrectDiagnosis06]]</span>
</div>
</div>(if: $CorrectPD6 and $CorrectIL6)[
(go-to: "Treat parasite06")
]
(else:)[
(go-to: "lifeloss06")
](set: $CorrectPD6 to false)
(goto: "Diagnosis check 06")(set: $CorrectPD6 to true)
(goto: "Diagnosis check 06")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->06TP2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->06IT2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Moulded]]</span>
<span class="button-style">[[EYES->Eye Normal 07]]</span>
<span class="button-style">[[HEART->Heart Moulded 02]]</span>
<span class="button-style">[[LUNGS->Lung Normal 07]]</span>
<span class="button-style">[[STOMACH->Stomach Normal 07]]</span>
<span class="button-style">[[BLOOD->Blood Normal 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 07]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/VK3PK6M.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 5%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 4%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -7%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->lose2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The final alert blinks on your console: Termination Effective Immediately. The words land heavily, each letter sinking in with a weight that feels impossible to bear. Three mistakes, and now it’s over. </p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 07]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('lb4iO8m51Eo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 07]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/zByb_BjrMPo?autoplay=1&loop=1&playlist=zByb_BjrMPo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('zByb_BjrMPo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->IL07]]</div>
<div class="button-style">[[No->Start Examination 07]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILtrue07]]</span>
<span class="button-style">[[EYES->ILfalse07]]</span>
<span class="button-style">[[HEART->ILfalse07]]</span>
<span class="button-style">[[LUNGS->ILfalse07]]</span>
<span class="button-style">[[STOMACH->ILfalse07]]</span>
<span class="button-style">[[BLOOD->ILfalse07]]</span>
</div>
</div>
(set: $CorrectIL8 to true)
(go-to: "Parasite Diagnosis07")(set: $CorrectIL8 to false)
(go-to: "Parasite Diagnosis07")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(5%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, -18%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->IncorrectDiagnosis07]]</span>
<span class="button-style">[[BIODE SLUGS->IncorrectDiagnosis07]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis07]]</span>
<span class="button-style">[[MEATMITES->IncorrectDiagnosis07]]</span>
<span class="button-style">[[CREETFLUKES->IncorrectDiagnosis07]]</span>
<span class="button-style">[[PHYTOZOA->b2set]]</span>
<span class="button-style">[[ELECTRIONS->IncorrectDiagnosis07]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis07]]</span>
<span class="button-style">[[PHANTAMOEBAS->IncorrectDiagnosis07]]</span>
<span class="button-style">[[MOULDED->CorrectDiagnosis07]]</span>
</div>
</div>(set: $CorrectPD8 to true)
(goto: "Diagnosis check 07")(set: $CorrectPD8 to false)
(goto: "Diagnosis check 07")(if: $CorrectPD8 and $CorrectIL8)[
(go-to: "Treat parasite07")
]
(else:)[
(go-to: "lifeloss07")
](if: $Moulded is true)[
(goto: "Moulded right")
]
(else:)[
(goto: "Healthy right")
](if: $Moulded is true)[
(goto: "Moulded wrong")
]
(else:)[
(goto: "Healthy wrong")
]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Normal 08]]</span>
<span class="button-style">[[EYES->Eye Normal 08]]</span>
<span class="button-style">[[HEART->Heart Normal 08]]</span>
<span class="button-style">[[LUNGS->Lung Normal 08]]</span>
<span class="button-style">[[STOMACH->Stomach BiodeSlug]]</span>
<span class="button-style">[[BLOOD->Blood Normal 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 08]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 08]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('owtN8c9rgzk'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->IL08]]</div>
<div class="button-style">[[No->Start Examination 08]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Are you sure you are ready to diagnose the patient?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Keep the original padding */
display: flex;
flex-direction: row; /* Lay out buttons horizontally */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
transform: translate(-9%, 17%); /* Move the buttons left by 10% and down by 50% */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit the first part of your diagnoses by selecting the physical location of the infestation below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[BRAIN->ILfalse08]]</span>
<span class="button-style">[[EYES->ILfalse08]]</span>
<span class="button-style">[[HEART->ILfalse08]]</span>
<span class="button-style">[[LUNGS->ILfalse08]]</span>
<span class="button-style">[[STOMACH->ILtrue08]]</span>
<span class="button-style">[[BLOOD->ILfalse08]]</span>
</div>
</div>
(set: $CorrectIL7 to false)
(go-to: "Parasite Diagnosis08")(set: $CorrectIL7 to true)
(go-to: "Parasite Diagnosis08")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(5%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, -18%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->IncorrectDiagnosis08]]</span>
<span class="button-style">[[BIODE SLUGS->CorrectDiagnosis08]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis08]]</span>
<span class="button-style">[[MEATMITES->IncorrectDiagnosis08]]</span>
<span class="button-style">[[CREETFLUKES->IncorrectDiagnosis08]]</span>
<span class="button-style">[[PHYTOZOA->IncorrectDiagnosis08]]</span>
<span class="button-style">[[ELECTRIONS->IncorrectDiagnosis08]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis08]]</span>
<span class="button-style">[[PHANTAMOEBAS->IncorrectDiagnosis08]]</span>
<span class="button-style">[[MOULDED->IncorrectDiagnosis08]]</span>
</div>
</div>(set: $CorrectPD7 to false)
(goto: "Diagnosis check 08")(set: $CorrectPD7 to true)
(goto: "Diagnosis check 08")(if: $CorrectPD7 and $CorrectIL7)[
(go-to: "Treat parasite08")
]
(else:)[
(go-to: "lifeloss08")
]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->08TP2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->08IT2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 02]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/zByb_BjrMPo?autoplay=1&loop=1&playlist=zByb_BjrMPo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('zByb_BjrMPo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 02]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/nlJCZs8Xb_o?autoplay=1&loop=1&playlist=nlJCZs8Xb_o`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('nlJCZs8Xb_o'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 02]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/1-sb2w_slrY?autoplay=1&loop=1&playlist=1-sb2w_slrY`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('1-sb2w_slrY'); // Updated background music track
</script> <style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 5%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 02]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/rKypnLBsFq8?autoplay=1&loop=1&playlist=rKypnLBsFq8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('rKypnLBsFq8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 03]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/zByb_BjrMPo?autoplay=1&loop=1&playlist=zByb_BjrMPo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('zByb_BjrMPo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 03]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('_Hwg5DMJ9yc'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 03]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/VHuwpeTdHZU?autoplay=1&loop=1&playlist=VHuwpeTdHZU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('VHuwpeTdHZU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 03]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/1-sb2w_slrY?autoplay=1&loop=1&playlist=1-sb2w_slrY`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('1-sb2w_slrY'); // Updated background music track
</script> <style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 03]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/rKypnLBsFq8?autoplay=1&loop=1&playlist=rKypnLBsFq8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('rKypnLBsFq8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 04]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/nlJCZs8Xb_o?autoplay=1&loop=1&playlist=nlJCZs8Xb_o`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('nlJCZs8Xb_o'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 04]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/zByb_BjrMPo?autoplay=1&loop=1&playlist=zByb_BjrMPo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('zByb_BjrMPo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 04]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/1-sb2w_slrY?autoplay=1&loop=1&playlist=1-sb2w_slrY`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('1-sb2w_slrY'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 04]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/rKypnLBsFq8?autoplay=1&loop=1&playlist=rKypnLBsFq8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('rKypnLBsFq8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 05]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/rKypnLBsFq8?autoplay=1&loop=1&playlist=rKypnLBsFq8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('rKypnLBsFq8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 05]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/1-sb2w_slrY?autoplay=1&loop=1&playlist=1-sb2w_slrY`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('1-sb2w_slrY'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 05]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/VHuwpeTdHZU?autoplay=1&loop=1&playlist=VHuwpeTdHZU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('VHuwpeTdHZU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 05]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('_Hwg5DMJ9yc'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 05]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/nlJCZs8Xb_o?autoplay=1&loop=1&playlist=nlJCZs8Xb_o`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('nlJCZs8Xb_o'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 06]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/nlJCZs8Xb_o?autoplay=1&loop=1&playlist=nlJCZs8Xb_o`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('nlJCZs8Xb_o'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 06]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/zByb_BjrMPo?autoplay=1&loop=1&playlist=zByb_BjrMPo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('zByb_BjrMPo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 06]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('_Hwg5DMJ9yc'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 06]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/VHuwpeTdHZU?autoplay=1&loop=1&playlist=VHuwpeTdHZU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('VHuwpeTdHZU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 06]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/1-sb2w_slrY?autoplay=1&loop=1&playlist=1-sb2w_slrY`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('1-sb2w_slrY'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 07]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('n_K_aOOhaQg'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 07]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/VHuwpeTdHZU?autoplay=1&loop=1&playlist=VHuwpeTdHZU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('VHuwpeTdHZU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/K6JarDs.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 07]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/1-sb2w_slrY?autoplay=1&loop=1&playlist=1-sb2w_slrY`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('1-sb2w_slrY'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 07]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/rKypnLBsFq8?autoplay=1&loop=1&playlist=rKypnLBsFq8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('rKypnLBsFq8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/vq2qP1j.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 08]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/rKypnLBsFq8?autoplay=1&loop=1&playlist=rKypnLBsFq8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('rKypnLBsFq8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Hnfwv0h.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 08]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/VHuwpeTdHZU?autoplay=1&loop=1&playlist=VHuwpeTdHZU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('VHuwpeTdHZU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Tn093Yv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 08]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('_Hwg5DMJ9yc'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/KSKnISS.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 08]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/zByb_BjrMPo?autoplay=1&loop=1&playlist=zByb_BjrMPo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('zByb_BjrMPo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Ca9PpCh.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%,6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(13%, -2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Patient 08]]</span>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/nlJCZs8Xb_o?autoplay=1&loop=1&playlist=nlJCZs8Xb_o`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('nlJCZs8Xb_o'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[BRAIN->Brain Normal]]</span>
<span class="button-style">[[EYES->Eye Normal]]</span>
<span class="button-style">[[HEART->Heart MeatMite]]</span>
<span class="button-style">[[LUNGS->Lung Normal]]</span>
<span class="button-style">[[STOMACH->Stomach Normal]]</span>
<span class="button-style">[[BLOOD->Blood Normal]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Scan the patient's organs and listen for abnormalities.</p>
<span class="button-style">[[GO BACK->Start Examination 01]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->01TP2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment")]
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 01]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Examine the patient and scan their different organs for the strange signs and sounds of a parasitic infection. Consult the parasite guide before diagnosis.</p>
<span class="button-style">[[DIAGNOSE->diagnose01]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 01]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 01]]</span>
<span class="button-style">[[LIMATODES->limatode 01]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 01]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 01]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 01 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 01]]</span>
<span class="button-style">[[ELECTRIONS->electrion 01]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 01]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 01]]</span>
<span class="button-style">[[MOULDED->moulded 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 01]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 01]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 01]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 01 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 01 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 01 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 01 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 01 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script>(set: $health to 100)
(set: $Bribe01 to false)
(set: $Moulded to false)
(set: $CorrectPD to false)
(set: $CorrectIL to false)
(goto: "First Patient")
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Kbe26Zb.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 8%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro2]]</span>
</div>
</div>
<div id="bottom-textbox"><p>The alarm cuts through the silence, pulling you from sleep. This routine is embedded so deeply in you that you rise with the siren habitually. At 5:00 am, you pull yourself up from your thin mattress and begin the routine.
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script>
(goto: "Title")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -6%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro3]]</span>
</div>
</div>
<div id="bottom-textbox"><p>Your dull room holds a stale silence which you've come to appreciate. A singlet bulb flickers overhead, casting a dim light. Each morning, this scene awaits you in your familiar dim world. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/hkM9LAv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -6%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro4]]</span>
</div>
</div>
<div id="bottom-textbox"><p> You quickly make your way to the cafeteria. Once there, you are presented with a a slice of bread and a small cup of broth, cooled to a colorless murk. You then take your assigned seat in the dining hall. Nobody speaks. Nobody is allowed to. Either way, the silent company of other unfortunate souls brings you comfort. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/hkM9LAv.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -6%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro5]]</span>
</div>
</div>
<div id="bottom-textbox"><p> You sip your soup. Even with your undistinguished palette, you know it isn't great. Regardless, you finish it quickly and return to your room. Once you've changed into a clean uniform you head out for the day. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/pJIt6jB.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -6%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro6]]</span>
</div>
</div>
<div id="bottom-textbox"><p> You gather yourselfand walk towards the elevator at the end of the hall. You've heard that this building used to be something else—an office, maybe, a factory for all the busy hands. It's hard to imagine. Now, it’s where people like you have come to find work.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/yjYJdsA.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -6%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro7]]</span>
</div>
</div>
<div id="bottom-textbox"><p> It's far from a glamourous career, but it keeps you alive. You quite literally could not survive without it, so you reluctantly accept the sacrifices that come with the opportunity.
The elevator has arrived.
You get on and press the button for your floor - B57.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/OjxzfCB.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -6%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro8]]</span>
</div>
</div>
<div id="bottom-textbox"><p>You begin your descent into to the lower floors and continue to reflect on your role in this fascility. Here, you’re something between a doctor and an extention of the machine you operate, tasked with detecting parasites in strangers you’ll never meet.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/OjxzfCB.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 0%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro9]]</span>
</div>
</div>
<div id="bottom-textbox"><p>Each patient brings a new set of symptoms, but the only clues you truly rely on are the sounds. Faint yet distinct, each parasitic infection carries its own peculiar hum or whisper beneath the patient's skin.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/OjxzfCB.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -12%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro10]]</span>
</div>
</div>
<div id="bottom-textbox"><p>Some sounds are sharper than others, gnawing and burrowing as if they’re alive in your ears. You’ve learned to tune in and trained yourself to recognize each twisted, grotesque note. Every day your fingers hover over the console, poised to listen for that telltale noise— perhaps the rasp of meatmites or the hollow echo of phantamoebas.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/4uEPbxq.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -12%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->intro11]]</span>
</div>
</div>
<div id="bottom-textbox"><p>Inside, the familiar buzz of machinery fills your senses as you clock in, another number in a system that counts each of you precisely, methodically.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(11%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Reduced width to make it narrower by 10% */
height: 18vh; /* Keep height as is */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Maintain the padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -12%); /* Keep the existing translation */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[TURN ON THE MACHINE->Turn on the Machine]]</span>
</div>
</div>
<div id="bottom-textbox"><p>The sterile lights overhead feel cold, almost accusatory, and your workstation—a narrow booth with a screen, and some notes. You breathe in deeply. Another day. The work is steady, maybe thankless, but here you are. Because what else is there?</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/osywQxQ.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -29%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->patient commence3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine is a world in itself, silent and unyielding. There’s a small gap just beneath it, though—not quite big enough to see through, but just wide enough to remind you that it isn’t airtight. Even if sound could slip through, the machine’s own thundering hum would drown it out, leaving you with only faint hints of the world beyond.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/A9PbAMR.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->patient commence4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console chimes with a new alert: Patient 3172: Ready for Examination. Somewhere within the machine’s depths, the patient is guided into position, faceless and nameless. They’ll become a pattern of organs and data points, every scan its own quiet mystery, waiting to be uncovered. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/A9PbAMR.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You pause, hands poised over the console, preparing yourself to identify whatever the machine reveals. Another patient, another 14-hour stretch of isolation, surrounded only by the faint lights and cold recordings of infection, ready to catalog whatever lies hidden within the body’s depths. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/A9PbAMR.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->fp3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Brain mode pulses in a dim blue light, mapping cerebral pathways; the stomach view, grainy and textured, reveals potential hiding places for intruders. You’ve memorized each mode’s sequence, knowing exactly when to switch from one to the next. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/A9PbAMR.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[START EXAMINATION->Start Examination 01]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>If a moment of uncertainty arises, the PIDA DOCUMENTATION sits nearby—a dense catalog of parasites, symptoms, and sounds, every detail meticulously recorded in the same mechanical precision that defines your work.
Are you ready to start?</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->01TP3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You sit back, watching the console’s soft glow as you wait, listening to the subtle clicks of the machinery settling. Time stretches, each second marked only by the machine’s periodic status lights, blinking in their endless rhythm.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->01TP4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The screen updates: Diagnosis Confirmed. Treatment Successful. A quiet satisfaction settles over you as you read the message. Somewhere beyond the machine’s walls, the patient will live, free from the parasite that might have destroyed them. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[START EXAMINATION->Variable Set 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The notification lingers a moment longer before disappearing into standby mode. The maintenance light flickers off, and the console chimes softly, signaling the next patient’s arrival. You reposition your hands on the controls, preparing for the cycle to begin anew. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today 02]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 02]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[DIAGNOSE->diagnose02]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 02]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 02]]</span>
<span class="button-style">[[LIMATODES->limatode 02]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 02]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 02]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 02 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/ruse3URqsuA?autoplay=1&loop=1&playlist=ruse3URqsuA`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('ruse3URqsuA'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 02]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 11%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 02]]</span>
<span class="button-style">[[ELECTRIONS->electrion 02]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 02]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 02]]</span>
<span class="button-style">[[MOULDED->moulded 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 02]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 02]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 02 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 02 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 02 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 02 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 02 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script>(set: $CorrectPD02 to false)
(set: $CorrectIL02 to false)
(goto: "Start Examination 02")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->01IT3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->01IT4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The silence of the room seems to grow heavier as the machine’s maintenance light flashes, indicating that it’s almost ready for its next use. A new patient will soon arrive, and with them, another chance. You place your hands back on the console, waiting for the telltale chime. </p>
</div>
</div>
|logo>[<div style="opacity: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; transition: opacity 1s; margin: 0; padding: 0; position: fixed; top: 0; left: 0;" id="logo">
<img src="https://i.imgur.com/wFaH74G.jpeg" alt="Logo" style="max-width: 100vw; max-height: 100vh; object-fit: contain;">
</div>]
<style>
/* Hide the undo arrow */
tw-undo, tw-undo-button {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0;
width: 0;
}
</style>
<script>
(function() {
var logo = document.getElementById('logo');
// Fade in the logo over 1 second
setTimeout(function() {
logo.style.opacity = '1';
}, 100);
// Fade out the logo after 2 seconds (for a total of 3 seconds on screen)
setTimeout(function() {
logo.style.opacity = '0';
}, 2100);
})();
</script>
{
(live: 3s)[(goto: "intro")]
}<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->02TP3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You sit back, watching the console’s soft glow as you wait, listening to the subtle clicks of the machinery settling. Time stretches, each second marked only by the machine’s periodic status lights, blinking in their endless rhythm.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->02TP4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The screen updates: Diagnosis Confirmed. Treatment Successful. A quiet satisfaction settles over you as you read the message. Somewhere beyond the machine’s walls, the patient will live, free from the parasite that might have destroyed them. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[START EXAMINATION->Variable Set 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The notification lingers a moment longer before disappearing into standby mode. The maintenance light flickers off, and the console chimes softly, signaling the next patient’s arrival. You reposition your hands on the controls, preparing for the cycle to begin anew. </p>
</div>
</div>
(set: $CorrectPD3to false)
(set: $CorrectIL3 to false)
(goto: "Start Examination 03")(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment02")]
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->02IT3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->02IT4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The silence of the room seems to grow heavier as the machine’s maintenance light flashes, indicating that it’s almost ready for its next use. A new patient will soon arrive, and with them, another chance. You place your hands back on the console, waiting for the telltale chime. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today 03]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 03]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[DIAGNOSE->diagnose03]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 03]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 03]]</span>
<span class="button-style">[[LIMATODES->limatode 03]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 03]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 03]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 03 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sC2C0VuS4J4?autoplay=1&loop=1&playlist=sC2C0VuS4J4`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sC2C0VuS4J4'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 03]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 03]]</span>
<span class="button-style">[[ELECTRIONS->electrion 03]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 03]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 03]]</span>
<span class="button-style">[[MOULDED->moulded 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 03]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 03]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 03 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 03 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 03 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 03 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 03 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->03TP3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You sit back, watching the console’s soft glow as you wait, listening to the subtle clicks of the machinery settling. Time stretches, each second marked only by the machine’s periodic status lights, blinking in their endless rhythm.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The screen updates: Diagnosis Confirmed. Treatment Successful. A quiet satisfaction settles over you as you read the message. Somewhere beyond the machine’s walls, the patient will live, free from the parasite that might have destroyed them. </p>
</div>
</div>
(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment03")]
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->03IT3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
(set: $CorrectPD4 to false)
(set: $CorrectIL4 to false)
(goto: "d1n")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/DKlHQJN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The final patient of the day has left, and the machine hums as it winds down, lights dimming one by one as you begin the shutdown process. You let your hands linger over the controls, feeling the cold metal beneath your fingers.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/z2G7miv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-5%, 12%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(19%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The room quiets, the steady thrum of diagnostics fading into an empty silence. This is always the loneliest moment—when the machine finally rests, leaving nothing but the emptiness of the room and the stark reminder of how alone you truly are.</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('143TShwseew');
</script>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/d1buMAo.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You stand, stretching muscles that feel heavy and worn, and make your way to the lift. It creaks softly as it descends. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/pJIt6jB.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -2%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -43%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The hallway you step into is illuminated by more flickering fluorescents, with walls that seem to close in just a little tighter every time you pass through. You feel the weight of the day settling in, pressing down on you like a reminder that even if the patients go home cured, you remain here, caught in the same cycle. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Entering your small room, you sit on the edge of your bed, letting out a slow breath as the day’s fatigue catches up to you. The mattress creaks under your weight. Its not comfortable, but it’s okay enough. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Everything here is just enough: enough to get by and enough to keep you going, but just barely. Your routine is predictable—dull and unchanging—but it’s all you have. You have no place in this world other than here. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Just as you settle onto the bed, a coughing fit seizes you, sudden and sharp, rattling in your chest. You clutch at your throat, stifling the sound as best you can, heart pounding at the thought of someone overhearing. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 09]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Each cough scrapes against your lungs, and it takes a few moments before the fit subsides, leaving you with an ache that lingers, spreading through your chest like a reminder you’d rather ignore. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -5%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-11%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 10]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>It’s phytozoa. You’re sure it is, yet you’ve tried to bury the truth beneath layers of routine, letting it slip into the background like a bruise you don’t press on. The symptoms are unmistakable: the fatigue, the faint prickling in your chest, the cough that won’t leave. </p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -5%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 11]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You’ve seen this parasite before, diagnosed it countless times in others, and you know it’s treatable. If only you could afford it. Each day, the problem gnaws at you from the inside out, a fixable problem with no means to fix it. </p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -5%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(1%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -50%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 12]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>But even now, you can’t let go of hope. Although unlikely, you still cling to the hope of saving enough currency credits to afford treatment. </p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -5%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -55%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 13]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>As you lay down on the thin mattress, the ache of the day seeps into your bones. Tomorrow will be the same: another set of patients, another series of diagnoses, another chance to inch closer to survival.</p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -5%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -50%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d1n 14]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>For now, though, you let your eyes close, thoughts family fading into the shadows as you slip into a fitful, restless sleep.</p>
</div>|logo>[<div style="opacity: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; transition: opacity 1s; margin: 0; padding: 0; position: fixed; top: 0; left: 0;" id="logo">
<img src="https://i.imgur.com/avnJSwD.jpeg" alt="Logo" style="max-width: 100vw; max-height: 100vh; object-fit: contain;">
</div>]
<script>
(function() {
var logo = document.getElementById('logo');
// Fade in the logo over 1 second
setTimeout(function() {
logo.style.opacity = '1';
}, 100);
// Fade out the logo after 2 seconds (for a total of 3 seconds on screen)
setTimeout(function() {
logo.style.opacity = '0';
}, 2100);
})();
</script>
{
(live: 3s)[(goto: "d2m 01")]
}<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Kbe26Zb.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 8%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[Continue->d2m 02]]</span>
</div>
</div>
<div id="bottom-textbox"><p>You wake up to a dull ache in your chest and the weight of exhaustion pressing down on you. It’s the second morning in a row that breathing feels like pushing against a wall, each inhale catching slightly. </p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2m 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> You pull yourself up, letting your feet touch the cold floor, feeling the familiar sense of routine settle over you. Some days, you wonder what it would be like to live differently. But the thought of freedom unsettles you, an uncharted vastness you don’t know if you’re prepared to navigate.</p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/hkM9LAv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2m 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> You set out for the same pitiful meal that waits for you in the cafeteria. As you eat, you let your mind wander, feeling the odd pull between dread and attachment you have for this routine. </p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/hkM9LAv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2m 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> Your life here is bleak, tightly bound by the rigid routine, the restrictions, the expectations. And yet, it’s all you know—freedom feels like a foreign concept, something distant and intimidating.</p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/hkM9LAv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2m 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> There’s fear in it the unknown of what might come if you were ever truly untethered from this place. The thought of it stirs something inside you, a flicker of possibility mixed with unease. But the reality is simpler: you’re here, for now, and today is another day to get through.</p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/yjYJdsA.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2m 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> By the time you head to the lift, the ache in your chest has sharpened, as if the parasite itself is tugging, digging in, demanding your attention. You try to brush it off, to focus on the familiar thrum of the lift as it descends, to ground yourself in the predictability of the day. </p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/OjxzfCB.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -60%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2m 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> The symptoms are worse than yesterday, and you feel the weight of them settle over you, heavier with each step. But you don’t let yourself linger on it too long; you can’t afford to. For now, you just need to get through the day.</p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 53%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(1%, -8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -50%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[START EXAMINATION->Start Examination 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> You settle in at the console, hands moving over the controls, the glow of the machine wrapping you in a cold, familiar light. Time to get started.</p>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today 04]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 04]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[DIAGNOSE->diagnose04]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 04]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 04]]</span>
<span class="button-style">[[LIMATODES->limatode 04]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 04]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 04]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 04 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 04]]</span>
<span class="button-style">[[ELECTRIONS->electrion 04]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 04]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 04]]</span>
<span class="button-style">[[MOULDED->moulded 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 04]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 04]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 04]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 04 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 04 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 04 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 04 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 04 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('Z_zwyrnR5CI');
</script>(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment04")]
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->04TP3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You know this was the right choice—the responsible one. In a way, it’s what you’re here to do, the reason you sit at this console day after day. But as the machine powers down for maintenance, you can’t help feeling the sting of what you’ve given up. There’s no alert signaling a new deposit, no sign of credits that could have brought you closer to treatment. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->04TP4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>What you did was right, yes, but it’s a hollow comfort when you know it keeps you exactly where you are—still bound to your illness, still weighed down by each breath that catches in your chest. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[NEXT PATIENT->Variable Set 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Diagnosis confirmed. The maintenance light dims, and the console chimes softly, signaling that the next patient is ready. You steel yourself, tucking away the faint ache of frustration, and return to the console, feeling the emptiness of the choice linger as you prepare for what’s next. </p>
</div>
</div>
(set: $CorrectPD5 to false)
(set: $CorrectIL5 to false)
(goto: "Start Examination 05")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->04IT3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->04IT4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The silence of the room seems to grow heavier as the machine’s maintenance light flashes, indicating that it’s almost ready for its next use. A new patient will soon arrive, and with them, another chance. You place your hands back on the console, waiting for the telltale chime. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/3wRg7ep.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Bribe1 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>As you’re about to begin, a small slip of paper slips out from under the console, so small and nearly invisible that you almost miss it. You hesitate, glancing around as if someone might be watching, though you know you’re alone. The slip sits there, foreign and out of place, a break in the monotony that makes your pulse quicken. You reach for it with tentative fingers, unfolding the note carefully.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/3wRg7ep.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Bribe1 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The message is written in a hurried scrawl, the words sharp and precise: “10,000 credits if you diagnose me with corkworm. Half now half tomorrow. Please help me, I'm not ready to die. There's something I have to do before I accept this fate. I'm desperate, please.”</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/3wRg7ep.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Bribe1 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>A chill creeps down your spine as you consider the offer. Corkworm is minor—a mild parasite, harmless to others. But this patient wasn’t sent here for something so innocuous. If they don’t actually have corkworm, misdiagnosing them could expose others to something dangerous, putting lives at risk if the true infection spreads unnoticed. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/3wRg7ep.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Bribe1 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> And yet, 10,000 credits is no small sum. It’s more than you’ve ever dreamed of having at once, and just enough to cover the cost of your treatment. The thought of it makes your heart race as you feel the possibility of something beyond your illness and beyond this stagnant life. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/3wRg7ep.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[DIAGNOSE->IL04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> You clutch the note tightly. The promise of credits, of a cure, and of a real life hanging in the balance. The urge to accept pulls at you, despite the risks, despite everything you know is at stake. Your mind teeters on the edge, weighing the costs. It's time to decide </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, -2%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->bt1 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->bt1 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>A small alert pings softly on your personal pocket console: 5,000 credits transferred. The sight sends a strange thrill through you. A significant step toward treatment, toward escaping the shadow of phytozoa. For a moment, there’s even a spark of hope—a feeling you almost don’t recognize, one that seems to lighten the ache in your chest, if only briefly. </p>
</div>
</div>
(set: $Bribe01 to true)<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->bt1 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[NEXT PATIENT->Variable Set 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine slowly powers down, metal creaking as it cools, and you pull your hands from the console, resting them as the maintenance cycle begins. Each part hums and realigns, resetting for the next patient, leaving you in the sterile quiet of the room. </p>
</div>
</div>
(set: $Bribe01 to true)
(goto: 'Bribe01 taken 01')<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today 05]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 05]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[DIAGNOSE->diagnose05]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 05]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 05]]</span>
<span class="button-style">[[LIMATODES->limatode 05]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 05]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 05]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 05 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('spf1uk2mAuQ');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 05]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 05]]</span>
<span class="button-style">[[ELECTRIONS->electrion 05]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 05]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 05]]</span>
<span class="button-style">[[MOULDED->moulded 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 05]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 05]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 05 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 05 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 05 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 05 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 05 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script>(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment05")]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->05TP3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You sit back, watching the console’s soft glow as you wait, listening to the subtle clicks of the machinery settling. Time stretches, each second marked only by the machine’s periodic status lights, blinking in their endless rhythm.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->05TP4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The screen updates: Diagnosis Confirmed. Treatment Successful. A quiet satisfaction settles over you as you read the message. Somewhere beyond the machine’s walls, the patient will live, free from the parasite that might have destroyed them. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/A9PbAMR.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[START EXAMINATION->Variable Set 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The notification lingers a moment longer before disappearing into standby mode. The maintenance light flickers off, and the console chimes softly, signaling the next patient’s arrival. You reposition your hands on the controls, preparing for the cycle to begin anew. </p>
</div>
</div>
(set: $CorrectPD6 to false)
(set: $CorrectIL6 to false)
(goto: "Start Examination 06")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->05IT3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->05IT4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The silence of the room seems to grow heavier as the machine’s maintenance light flashes, indicating that it’s almost ready for its next use. A new patient will soon arrive, and with them, another chance. You place your hands back on the console, waiting for the telltale chime. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today 06]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 06]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[DIAGNOSE->diagnose06]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 06]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 06]]</span>
<span class="button-style">[[LIMATODES->limatode 06]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 06]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 06]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 06 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('LW9pFQ5V2No');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 06]]</span>
<span class="button-style">[[ELECTRIONS->electrion 06]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 06]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 06]]</span>
<span class="button-style">[[MOULDED->moulded 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 06]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 06]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 06]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 06 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 06 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 06 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 06 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 06 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->06TP3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You sit back, watching the console’s soft glow as you wait, listening to the subtle clicks of the machinery settling. Time stretches, each second marked only by the machine’s periodic status lights, blinking in their endless rhythm.</p>
</div>
</div>
(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment06")]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->06TP4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The screen updates: Diagnosis Confirmed. Treatment Successful. A quiet satisfaction settles over you as you read the message. Somewhere beyond the machine’s walls, the patient will live, free from the parasite that might have destroyed them. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The last patient shuffles out, and the strain of the day sinks into you, heavy and unshakable. The fluorescent lights cast a harsh glow as you linger for a moment. Tomorrow, it all begins again, but for now, the fatigue clings to you, pressing down like a weight you can’t shed.</p>
</div>
</div>
(set: $CorrectPD7 to false)
(set: $CorrectIL7 to false)
(goto: "d2n 01")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->06IT3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->06IT4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The silence of the room seems to grow heavier as the machine’s maintenance light flashes, indicating that it’s almost ready for its next use. A new patient will soon arrive, and with them, another chance. You place your hands back on the console, waiting for the telltale chime. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/DKlHQJN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(17%, 7%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine powers down with a final, hollow click, leaving the room in silence. You exhale slowly, gathering yourself as you step into the elevator, feeling the weight of the day settle over you.</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('143TShwseew');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/OjxzfCB.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The walls close in, the soft hum of the elevator’s descent filling the small space as you lean back, eyes unfocused. Today’s choice—it looms, twisting inside you, something you wish you could shed, but it stays.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Back in your room, you lie on the thin mattress, staring up at the dark ceiling, letting your thoughts unfurl in the quiet. You don’t know if you made the right decision, or if there even was a right decision to make.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Survival in this world means wrestling with choices that carve away at you, that make you question yourself in ways you don’t have the strength to answer. In a way, it feels like everything here has been set up to trap you, forcing you to calculate every breath, every moment.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>And all of it, every moment of desperation, every impossible decision, comes down to credits. A currency that holds a tighter grip on your life than any law. Everything costs here—movement, existence, even survival itself. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Small fines, silent charges, each one chipping away at you. The life tax is just another formality, a reminder that survival isn’t a right but a transaction. Miss a payment, and it’s over. People disappear that way. No questions. No whispers. Just gone. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You can feel it inside you—that fear, that quiet shame that gnaws at your resolve. Maybe it’s from the desperation itself, from wanting to hold onto a life that barely feels like living. You understand why people would beg, bribe, do anything to survive. You know that desperation too well. But knowing doesn’t make it easier. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d2n 09]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>If anything, it makes it harder. Every choice feels like a compromise, another piece of yourself given away just to get through another day. And each time, you’re left wondering what you’ll have left of yourself if you keep doing this, if the life you’re clinging to will even be recognizable. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO TO SLEEP->d3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Tonight, lying in the dark, you can’t shake the feeling that the cost of survival in this world is consuming you bit by bit. And yet, the thought of giving it up, of letting go, is just as unbearable. The shame, the doubt—they’re quiet, lingering shadows you’ll carry into tomorrow. </p>
</div>
</div>|logo>[<div style="opacity: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; transition: opacity 1s; margin: 0; padding: 0; position: fixed; top: 0; left: 0;" id="logo">
<img src="https://i.imgur.com/Lbm9vR3.jpeg" alt="Logo" style="max-width: 100vw; max-height: 100vh; object-fit: contain;">
</div>]
<script>
(function() {
var logo = document.getElementById('logo');
// Fade in the logo over 1 second
setTimeout(function() {
logo.style.opacity = '1';
}, 100);
// Fade out the logo after 2 seconds (for a total of 3 seconds on screen)
setTimeout(function() {
logo.style.opacity = '0';
}, 2100);
})();
</script>
(if: $Bribe01)[
(go-to: "d3m 01")
]
(else:)[
(go-to: "broke")
]
(set: $CorrectPD7 to false)
(set: $CorrectIL7 to false)<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Kbe26Zb.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 5%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 4%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -7%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d3m 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You wake up with a quickened pulse, your thoughts immediately turning to the promise of credits. Checking your account, you see it—5,000 credits transferred. The full payment, just as promised. You run the numbers in your head, feeling a rush of excitement. By tomorrow, you’ll have enough to start treatment. Just one more day. </p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/hkM9LAv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(5%, 1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->d3m 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The thought drives you through your morning routine faster than usual. Each step feels lighter, the familiar tightness in your chest softened by the idea of finally being rid of it. You put in the credit transfer request, your heart racing as you imagine the day to come. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(5%, 1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -32%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Start Examination 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>At the console, the hum of the machine fades into the background, each hour ahead seeming like a final hurdle between you and your health. Time to get started. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today 07]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 07]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[DIAGNOSE->diagnose07]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 07]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 07]]</span>
<span class="button-style">[[LIMATODES->limatode 07]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 07]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 07]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 07 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('F9NL0QJebpo');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 07]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 07]]</span>
<span class="button-style">[[ELECTRIONS->electrion 07]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 07]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 07]]</span>
<span class="button-style">[[MOULDED->moulded 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 07]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 07]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 07 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 07 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 07 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 07 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 07 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[REVIEW PATIENT ->What brings you here today 08]]</span>
<span class="button-style">[[READ P.I.D.A DOCUMENTATION->pida doc 08]]</span>
<span class="button-style">[[BEGIN SCANS->Patient 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[DIAGNOSE->diagnose08]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CORKWORMS->corkworm 08]]</span>
<span class="button-style">[[BIODE SLUGS->biode slug 08]]</span>
<span class="button-style">[[LIMATODES->limatode 08]]</span>
<span class="button-style">[[MEAT-MITES->meatmite 08]]</span>
<span class="button-style">[[CREET-FLUKES->creetfluke 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 08]]</span>
<span class="button-style">[[NEXT PAGE->pida doc 08 p2]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/JHwdk33.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 9%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO BACK->Start Examination 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>...</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('qyuc4rCJev8');
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syMeZY5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2.5%, 10%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(15%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PHYTOZOA->phytozoa 08]]</span>
<span class="button-style">[[ELECTRIONS->electrion 08]]</span>
<span class="button-style">[[MEMBRANE LEECH->membrane leech 08]]</span>
<span class="button-style">[[PHANTOMOEBA->phantomoeba 08]]</span>
<span class="button-style">[[MOULDED->moulded 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[GO BACK->Start Examination 08]]</span>
<span class="button-style">[[PREVIOUS PAGE->pida doc 08]]</span>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('YYtUaOrMVls');
</script>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/XmNJCr3.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 17vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Faint, layered squeaks and whispers.</p>
<span class="button-style">[[GO BACK->pida doc 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Creetflukes often target the brain, eyes, and bloodstream. These organisms form intricate colonies, consuming hosts efficiently until total decomposition, at which point they seek a new body. Known to cause madness in their hosts.
SYMPTOMS: Hallucinations, persistent anxiety, full-body ache, bleeding from unexpected sites, and a pervasive sense of dread.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/DNWxrmsRkVU?autoplay=1&loop=1&playlist=DNWxrmsRkVU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('DNWxrmsRkVU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ExTtTkf.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Squelching, as they gnaw continually on host tissues.</p>
<span class="button-style">[[GO BACK->pida doc 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Voracious feeders, meatmites are curable but inflict prolonged suffering if left untreated. They commonly infect humans after contact with other mammals.
SyYMPTOMS: Sharp organ pain, fever, weakness, and anemia.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/dXscMwMejis?autoplay=1&loop=1&playlist=dXscMwMejis`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('dXscMwMejis'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/LlR7bnI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 8%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Muffled buzzing, intermittent scurrying.</p>
<span class="button-style">[[GO BACK->pida doc 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Limatodes induce intense cravings in their hosts by secreting compounds that fuel ravenous hunger, sometimes driving patients to self-consumption.
SYMPTOMS: Uncontrollable hunger, internal itching, irritability, and erratic behavior.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/PHJGLX3nRDw?autoplay=1&loop=1&playlist=PHJGLX3nRDw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('PHJGLX3nRDw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/lzkzR1O.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p> SOUND: Wet, squelching movements; scans detect slithering within organs.</p>
<span class="button-style">[[GO BACK->pida doc 08]]</span>
</div>
</div>
<div id="bottom-textbox"><p>
LORE: Discovered in meteorite samples, biode slugs are now common, particularly in the digestive tract, where they consume food rather than the host’s tissue.
SYMPTOMS: Indigestion, nausea, fatigue, variable appetite, vitamin deficiencies, and general ache when outside the digestive tract.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/70haUf5yPvI?autoplay=1&loop=1&playlist=70haUf5yPvI`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('70haUf5yPvI'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MJUrDjD.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Hollow, unsettling wails with a layered, static undertone.</p>
<span class="button-style">[[GO BACK->pida doc 08 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Once confined to plant hosts, phytozoa have adapted to animal organisms, significantly weakening immune responses. Primarily infects lungs, blood, and heart.
SYMPTOMS: Fatigue, immune suppression, persistent cough, chest tightness, and a slowed heart rate.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/WVwjCszq-tU?autoplay=1&loop=1&playlist=WVwjCszq-tU`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('WVwjCszq-tU'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/HRDMWxJ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -17%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Sporadic electrical buzzing and glitch-like interference, as they disrupt neural activity.</p>
<span class="button-style">[[GO BACK->pida doc 08 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Electrions only survive in the heads of mammals, manipulating neural pathways to control host actions.
SYMPTOMS: Impaired motor control, vision disturbances, erratic mental states, and unsteady coordination.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/wfZ7NksrhIw?autoplay=1&loop=1&playlist=wfZ7NksrhIw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('wfZ7NksrhIw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/tbqeLl1.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%,5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 82%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A hollow, unsettling resonance, interrupted by sharp, spiky stabs as the leech’s suction cups bite forcefully into its host.</p>
<span class="button-style">[[GO BACK->pida doc 08 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Membrane leeches are descendants of the bloated leech, scaled down but just as insidious. They inhabit organ linings, particularly in the stomach, heart, and lungs, gradually siphoning blood from surrounding tissues.
SYMPTOMS: Persistent dull ache in the affected area, fatigue, anemia, and general weakness.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/j0NeeOH7xVw?autoplay=1&loop=1&playlist=j0NeeOH7xVw`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('j0NeeOH7xVw'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7f1KpRI.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: Layered, muffled gasps resembling distant wails.</p>
<span class="button-style">[[GO BACK->pida doc 08 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Known as "specters under the skin," phantamoebas evoke a ghostly presence. Treatment is possible but arduous.
SYMPTOMS: Pallor, weight loss, extreme fatigue, and confusion.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/gQfGLNsDtB8?autoplay=1&loop=1&playlist=gQfGLNsDtB8`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('gQfGLNsDtB8'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Az16v76.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 4%); /* Move the image 1% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(12%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 84%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -16%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: An unmistakable, haunting cry, ominously referred to as "the call of death."</p>
<span class="button-style">[[GO BACK->pida doc 08 p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: A virulent, ancient pathogen re-emerged as glacial ice melted. It spreads aggressively through fluids and airborne particles, enveloping internal organs with a fatal mould-like layer.
SYMPTOMS: Fatigue, weakness, cough, tight chest, slowed heart rate, wheezing, and severe respiratory distress.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/yov65Fw8Z6s?autoplay=1&loop=1&playlist=yov65Fw8Z6s`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('yov65Fw8Z6s'); // Updated background music track
</script>(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment08")]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->08TP3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You sit back, watching the console’s soft glow as you wait, listening to the subtle clicks of the machinery settling. Time stretches, each second marked only by the machine’s periodic status lights, blinking in their endless rhythm.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->08TP4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The screen updates: Diagnosis Confirmed. Treatment Successful. A quiet satisfaction settles over you as you read the message. Somewhere beyond the machine’s walls, the patient will live, free from the parasite that might have destroyed them. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[START EXAMINATION->Variable Set 09]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The notification lingers a moment longer before disappearing into standby mode. The maintenance light flickers off, and the console chimes softly, signaling the next patient’s arrival. You reposition your hands on the controls, preparing for the cycle to begin anew. </p>
</div>
</div>
(set: $CorrectPD8 to false)
(set: $CorrectIL8 to false)
(goto: "b2 01")<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->08IT3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->08IT4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Variable Set 09]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The silence of the room seems to grow heavier as the machine’s maintenance light flashes, indicating that it’s almost ready for its next use. A new patient will soon arrive, and with them, another chance. You place your hands back on the console, waiting for the telltale chime. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/A9PbAMR.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->b2 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console chimes, flashing a notification: Patient ready for examination. You press the button to accept.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->b2 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>As the machine clicks through the initial diagnostic stages, something moves beneath it—a slip of paper sliding out from under the console, just at the edge of your vision. You pause, eyes narrowing as you recall the note from yesterday. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->b2 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Curiosity gets the better of you, and you lean down slightly to get a closer look. It’s a note, but something dark streaks across it, smeared and unmistakable. Blood. Your hand freezes, instinct warning you not to touch it. Blood could mean infection—some parasites are carried this way, and handling it could be risky. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->b2 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>But then you hesitate, the pull of curiosity, the lure of another offer stronger than you’d like to admit. You know you shouldn’t touch it. You know the risk. But the potential opportunity is hard to ignore. The thought of escaping this life tugs at you, insistent, drowning out caution with every passing second. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->b2 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Your fingers hover near the bloody note, torn between the rational urge to leave it and the temptation of a life free from everything that’s kept you bound. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, -2%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(9%, -5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 20px 5% 50px; /* Reduced padding to compress space */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% and down 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button container to align buttons horizontally and adjust spacing */
.button-container {
display: flex;
justify-content: center; /* Center the buttons horizontally */
align-items: center; /* Align buttons vertically */
gap: 10px; /* Space between the buttons */
margin-top: 5px; /* Adjust the spacing between the text and the buttons */
}
/* Button styling with smaller padding */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 5px 10px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: auto; /* Adjust width based on content */
margin: 0; /* Remove additional margin */
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<div class="button-container">
<div class="button-style">[[Yes->Pickup]]</div>
<div class="button-style">[[No->Leave it]]</div>
</div>
</div>
</div>
<div id="bottom-textbox">
<p>Pick up the note?</p>
<div class="button-container">
</div>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->p2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You reach down and pick up the blood-smeared note, feeling a thrill as you unfold it. The message is brief but potent: "50,000 credits for a phytozoa diagnosis. I really need this, please. I refuse to die." Your heart skips as you read it again, the number searing itself into your mind.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->l3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You pull your hand back, feeling a prickle of unease as you look down at the blood-streaked note. Everything in you screams that this is wrong, that it’s not worth the risk. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->p3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Fifty thousand credits—it’s more than you ever imagined having. More than enough for treatment and for freedom, a life where each breath isn’t a counted cost, where survival isn’t a debt hanging over you.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->p4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You think of the things you could do with that money. Real food, clean clothes, a life with room to breathe. The possibilities rush over you, a glimmer of the life you’ve always dreamed of, just waiting at the end of this decision.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[RESUME EXAMINATION->Moulded set]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You slip the note away, tucking it with a sense of triumph as the machine hums on, carrying out its task. Tomorrow, everything changes.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->l4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You don’t want to risk infection, not when the stakes are this high. You know that some parasites spread through blood, and the thought of picking up the note leaves a bad taste in your mouth. It’s too much, too dangerous, and you already know the impact of letting seriously infected patients walk free. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/RwOXEoK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[RESUME EXAMINATION->Start Examination 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>One decision has already pushed your boundaries—you don’t need another weighing on your conscience. With a final glance at the note you turn away, choosing not to risk it and not to acknowledge it. You shift your focus back to the console, hands moving instinctively.</p>
</div>
</div>
(set: $Moulded to true)
(goto: 'Start Examination 07')<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->b2d 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You enter the diagnosis, phytozoa, and press the button, watching the machine log the entry with a quiet chime. The console lights dim as the machine moves into its maintenance cycle, and the room fills with a tense silence. You sit back, waiting, feeling the weight of your choice settle over you. </p>
</div>
</div>
(set: $health to $health - 35)
(if: $health < 0)[(goto: "FAILURE")]
(else:)[(goto: "Incorrect treatment07")]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->mr2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine hums steadily as it finalizes the diagnosis: moulded. You sit back, waiting for the machine to run it's maintenence diagnostic before results confirm what you suspected. A strange calm settles over you, knowing you did the right thing, that you chose correctly for both yourself and for the patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine hums steadily as it finalizes the diagnosis: moulded. You sit back, watching the screen as the results confirm what you suspected. A strange calm settles over you, knowing you did the right thing, that you chose correctly for both yourself and for the patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> Your mind drifts back to the blood-streaked note, to the uneasy feeling you’d had about it. It’s clear now that ignoring it was the right choice. That risk—the blood, the unknown infection it could carry—wasn’t worth any amount of credits. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Relief settles over you, quiet but solid, grounding you as the machine cycles through its final stages. The temptation of those extra credits, the thought of an easier future, is something you almost can’t believe you considered now.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr5]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You focus back on the hum of the machine, feeling the weight of the decision lift as you prepare to move forward—no shortcuts, no risks, just the survival you’ve earned. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/skFn5GT.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->bridge1]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> As you wait for the next patient, an alert pings on your console, breaking the monotony. You glance at the message, surprised. Appointment cancelled: Patient deceased. Half-day dismissal granted.The words sink in, and a strange mix of relief and frustration floods over you. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/z2G7miv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->bridge2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> It’s an unexpected break, but then, the follow-up notification seals any sense of triumph: Vacation time applied for half-day deduction. You let out a quiet sigh. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 10%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(19%, 10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[GO TO SLEEP->d4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> You shut down the machine and make your way back to your room. Although it's early, you decide to head to bed since you have nothing better to do. You lay down on the thin mattress, letting the quiet of the room lull you to sleep. </p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('143TShwseew');
</script>(if: $Bribe01 is true or $Bribe02 is true)[
(goto: "Bribe Passage")
]
(else:)[
(goto: "No Bribe Passage")
](if: $Moulded is true)[
(goto: "eb2")
]
(else:)[
(goto: "eb1")
]<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->mr3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> Your mind drifts back to the blood-streaked note, to the uneasy feeling you’d had about it. Did you make the right choice? </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->mr4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> Diagnosis confirmed. Relief settles over you, quiet but solid, grounding you as the machine cycles through its final stages. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/syN4xdN.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr5]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You focus back on the hum of the machine, feeling the weight of the decision lift as you prepare to move forward—no shortcuts, no risks, just the survival you’ve earned. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->mw2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You press the button to finalize the diagnosis, watching the console confirm the entry. But as the machine begins its maintenance cycle, a flicker of doubt settles in your mind. You shift uncomfortably, waiting for the result to appear, each second feeling heavier than the last. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hw2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine whirs down, clicking and hissing as it releases the patient, its parts realigning and cooling in preparation for the next examination. You lean back, hands slipping from the controls as you wait through the familiar maintenance lull, your eyes drifting over the soft flicker of the console’s standby light. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->mw3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Finally, the notification pings across the screen. You’ve made a mistake. The wrong diagnosis glares back at you, an oversight that leaves you with nothing to show for the risk you took by reading the note. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr5]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The irony stings—you could have taken the bribe, at least secured something from this, but instead, you’re left with only frustration and regret. The hum of the machine fades as it completes maintenance, and the sense of a missed opportunity settles coldly over you.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hw3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Silence fills the room once more, settling in thickly—until it’s broken by a faint, almost inaudible noise that slips through the machine’s dense walls. You pause, ears straining as you pick up on it—a muffled, desperate screech that trails off into silence as quickly as it appeared.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/55yHIo5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr5]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The console lights up with a notification: Diagnosis unsuccessful. Patient Outcome: Deceased. Just below, another message blinks in steady, clinical precision: Three failures will result in immediate termination. The reminder is as cold as the machine, yet it lingers in your mind as you brace for the next patient. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -28%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->b2d 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The seconds stretch out as you watch the console, each hum and click of the machine dragging time forward. Finally, a notification flashes across the screen: Diagnosis successful. Credits transferred. You exhale slowly, feeling the thrill of success settle in. The number in your account is obscene, nearly surreal, a sum large enough to secure your treatment and more. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->hr5]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>There’s a nagging unease in your chest, but the thought of freedom and control presses harder, quieting any doubts. The machine completes its maintenance, and you prepare to move forward, the weight of both risk and reward still pulsing in your mind. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->nbe1]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You wake before the familiar siren of the morning alarm has a chance to play. It's payday. Checking your account, you notice a credit deposit from a sucessful week’s work—modest, as always, but earned honestly. It’s not enough to cover treatment, not yet, but even so, a faint hope stirs within you.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/hkM9LAv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->nbe2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>As you move through your morning routine, you feel a sense of calm settle over you. The phytozoa tugs at your chest with its usual ache, a constant reminder of what you’re fighting for. But this morning, the weight of it feels lighter somehow, softened by a sense of purpose. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/pJIt6jB.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->nbe3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You’ve held to your choices, taken no shortcuts, and something about that steadies you. Despite the long, grinding days and the countless hurdles, you feel as though you’re inching closer to something better. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/d1buMAo.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->nbe4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Your path forward remains uncertain and slow, each day barely bringing you closer to the hope you cling to. But even as you count the small earnings and feel the weight of each unpaid treatment slip, there’s a satisfaction rooted deep in your core. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/N6d1R9Y.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(130%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PLAY AGAIN?->Title]]</span>
</div>
</div>
</div>
<div id="bottom-textbox">
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->MEDLOB2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You wake up with a sense of anticipation you can’t quite place. As soon as you check your account, it becomes clear—Credits received. The number stares back at you, a sum you’ve been waiting for, barely daring to believe would come. It’s finally enough. Without a second thought, you put in the request for treatment and set off for the medical bay. </p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-2%, 6%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You wake up feeling worse than usual, the familiar tightness in your chest sharper, more insistent. Your breath comes in shallow, ragged pulls, and a faint unease settles over you. But as you check your account, the credits appear. </p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->wahwah]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>It’s finally enough. In fact, its more than enought. You're rich! Ignoring the discomfort, you put in the request for treatment and make your way to the medical bay, hoping that soon, all of this will be behind you.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/er82fO2.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>When you settle into the patient's seat, you feel a strange disorientation. You’ve spent so many days diagnosing others, yet here you are, on the other side, waiting for the same judgment to come down on you.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/er82fO2.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 45]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> The unfamiliarity of it all gnaws at you, though a part of you dares to feel hopeful, convinced this will be the day you finally rid yourself of this burden.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ttwRPxT.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-5%, 13%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(20%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 051]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> The screen flashes, flickering for a second before locking in on one word in cold, unfeeling text: "MOULDED."</p>
</div>
</div>
<!-- Music player container -->
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`;
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the background music when the passage loads
playBackgroundMusic('143TShwseew');
</script>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/er82fO2.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>As you settle into the patient’s seat, a strange sense of vulnerability washes over you. Sitting here, on the other side of the machine, you feel like a stranger in your own world, as though the roles have shifted in a way you hadn’t anticipated. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/4k0p0sv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 04]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The machine begins its scan, clicking and whirring. You find yourself counting each breath, patiently waiting for relief. After all the years of diagnosing others, it’s your turn to be seen, to be helped. You’ve spent so long surviving day by day that the relief, the possibility of health, feels almost foreign. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Dz4ed3x.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -15%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 44]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The scan confirms what you knew all along—phytozoa. Simple, treatable, something that has felt like a mountain until today. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/3u7UAQE.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> Its all over. You stand in the chamber, your final destination, the weight of it pressing down harder than the tightness in your chest. You’d worked so hard, clung to each day with the hope that you’d finally escape this cycle.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/3u7UAQE.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -10%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->End C]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> As your treatment begins, a quiet understanding settles over you: not every path to freedom looks the same.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/doFDXtg.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(130%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PLAY AGAIN?->Title]]</span>
</div>
</div>
</div>
<div id="bottom-textbox">
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/4uEPbxq.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 07]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Survival demanded something from you that you never thought you’d give, but the reward is undeniable. The sacrifice lingers at the edges of your mind, yet it feels small compared to the sheer relief of finally being free of illness.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/1Ek2Mct.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->End A]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You may be here a long time still, and you know the cost of that freedom has changed you, but right now, that doesn’t matter. At the console, you feel stronger, healthier, ready to take on whatever this grim world brings. The life you’ve secured for yourself feels worth it, even if you had to bend to get here. Today, it’s enough to simply be alive, vibrant, and whole.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/vzqFvoO.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(130%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PLAY AGAIN?->Title]]</span>
</div>
</div>
</div>
<div id="bottom-textbox">
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Yp1kJXK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->lose3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Hours later, you find yourself on the street, the chill of the night settling deep into your bones. Without credits, without work, the city seems harsher, less forgiving. You sit down, staring into the empty streets, the realization pressing down on you. This is it. The life you fought so hard to hold onto has slipped away. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Yp1kJXK.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -2%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 75%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -40%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->End D]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>A quiet sorrow fills you, a bitter sense of finality. You tried, you endured, but in the end, it wasn’t enough. And here, beneath the indifferent glow of the city lights, you accept that some battles can’t be won.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/WSyqxh2.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(130%, 5%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[PLAY AGAIN?->Title]]</span>
</div>
</div>
</div>
<div id="bottom-textbox">
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -45%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->tut3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> Use these sounds and other symptoms, like altered heartbeat or breathing, to identify the correct organ of infection – though remember, these symptoms don’t necessarily mean the infection is in those areas. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -45%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->tut4]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You’ll hear the sounds of parasites only when you’re scanning the infected organ. These sounds come from the collective noise of millions of parasites. Reference the PIDA PARASITE DOCUMENTATION to confirm which parasite is present. You may also review audio recordings from the previous practitioner’s analysis for extra insights. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(7%, -1%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -45%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Turn on the Machine]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Once confident, choose the infected organ and parasite type to finalize your diagnosis. Between patients, the machine will shut down for an hour of maintenance. You’ll be notified about the success of your diagnosis shortly after. Three incorrect diagnoses in a week will result in immediate termination.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/9s02hrZ.jpeg'); /* Updated Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 5%); /* Move the image 3% to the left and 2% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 3%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>SOUND: A distorted, rhythmic exhalation, produced by air escaping through the perforations created in the lungs.</p>
<span class="button-style">[[GO BACK->pida doc 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>LORE: Initially exclusive to cadavers, corkworms inexplicably began infecting living hosts. Often misdiagnosed as moulded.
SYMPTOMS: Persistent cough, wheezing, shortness of breath, lightheadedness, and confusion from impaired oxygen intake.</p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/sw0tTZuYtlo?autoplay=1&loop=1&playlist=sw0tTZuYtlo`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('sw0tTZuYtlo'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/97ONHhf.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(130%, -4%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, 5%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[DAY 2->day2set]]</span>
<span class="button-style">[[DAY 3->day3set]]</span>
</div>
</div>
</div>
<div id="bottom-textbox">
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Emxih6U.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[YES->ab1]]</span>
<span class="button-style">[[NO->ab2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> Accept the bribe? </p>
</div>
</div>
(set: $Bribe01 to true)
(set: $health to 100)
(set: $CorrectPD7 to false)
(set: $CorrectIL7 to false)
(goto: 'd3')(set: $CorrectPD7 to false)
(set: $CorrectIL7 to false)
(set: $Bribe01 to false)
(set: $health to 100)
(goto: 'd3')
(set: $health to 100)
(set: $CorrectPD4 to false)
(set: $CorrectIL4 to false)
(goto:'d1n 14')<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Kbe26Zb.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-3%, 8%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 4%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -7%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->broke 2]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>The morning begins like clockwork. You shuffle out of bed, the chill of the floor biting at your bare feet. The dim fluorescent lights flicker to life overhead, casting everything in that familiar sterile glow. You wash your face, the cold water jolting you awake as you stare at your own reflection—a face worn by the routine, but still there, going through the motions. </p>
</div>
</div>
<div id="music-container"></div>
<script>
// Function to create or update the background music player
window.playBackgroundMusic = function(videoId) {
var existingPlayer = document.getElementById('backgroundMusicPlayer');
if (existingPlayer) {
existingPlayer.remove(); // Remove the existing player
}
var player = document.createElement('iframe');
player.id = 'backgroundMusicPlayer';
player.width = '0'; // Invisible player
player.height = '0'; // Invisible player
player.src = `https://www.youtube.com/embed/GZ8c2rpxhdM?autoplay=1&loop=1&playlist=GZ8c2rpxhdM`; // Updated track
player.frameBorder = '0';
player.allow = 'autoplay; encrypted-media';
document.body.appendChild(player);
};
// Function to reuse the same sound effect player and update the video ID
window.playSoundEffect = function(videoId) {
var existingSFXPlayer = document.getElementById('soundEffectPlayer');
if (!existingSFXPlayer) {
var sfxPlayer = document.createElement('iframe');
sfxPlayer.id = 'soundEffectPlayer';
sfxPlayer.width = '0'; // Invisible player
sfxPlayer.height = '0'; // Invisible player
sfxPlayer.frameBorder = '0';
sfxPlayer.allow = 'autoplay; encrypted-media';
document.body.appendChild(sfxPlayer);
existingSFXPlayer = sfxPlayer;
}
existingSFXPlayer.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
};
// Automatically play the initial background music when the passage loads
playBackgroundMusic('GZ8c2rpxhdM'); // Updated background music track
</script><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/7qQmZ0m.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->broke3]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>As you pull on your uniform, that nagging thought from yesterday creeps in again. The missed opportunity, the extra money that could’ve made life here a little less relentless. It settles like a weight in your chest, heavy enough that even the idea of eating turns your stomach. You glance at the plain breakfast rations waiting in the corner, but you’re not in the mood. </p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wMwIEOX.jpeg'); /* Updated main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1.5%, 2.5%); /* Move the image 3% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, -10%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
text-align: center; /* Center text */
}
/* Bottom text box */
#bottom-textbox {
width: 90%; /* Adjust width */
height: auto; /* Allow height to adjust based on content */
background-color: transparent;
color: white;
padding: 70px 5% 50px; /* Adjust padding */
display: flex;
flex-wrap: wrap; /* Allow buttons to wrap to the next line */
align-items: center; /* Align content vertically in the center */
justify-content: center; /* Center content horizontally */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(-9%, 3%); /* Move the bottom textbox down-9% and right35% */
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
gap: 10px; /* Space between buttons */
}
/* Link styling */
a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
a:hover {
color: #2e8ca3; /* Optional: Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Styling links inside the button-style class */
.button-style a {
color: white; /* Set link color to white */
text-decoration: none; /* Remove underline if preferred */
}
.button-style a:hover {
color: #2e8ca3; /* Change color on hover */
text-decoration: underline; /* Optional: Add underline on hover */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<p>Submit your diagnoses by selecting one of the parasites below:</p>
</div>
</div>
<div id="bottom-textbox">
<span class="button-style">[[CORKWORMS->CorrectDiagnosis02]]</span>
<span class="button-style">[[BIODE SLUGS->IncorrectDiagnosis02]]</span>
<span class="button-style">[[LIMATODES->IncorrectDiagnosis02]]</span>
<span class="button-style">[[MEATMITES->IncorrectDiagnosis02]]</span>
<span class="button-style">[[CREETFLUKES->IncorrectDiagnosis02]]</span>
<span class="button-style">[[PHYTOZOA->IncorrectDiagnosis02]]</span>
<span class="button-style">[[ELECTRIONS->IncorrectDiagnosis02]]</span>
<span class="button-style">[[MEMBRANE LEECH->IncorrectDiagnosis02]]</span>
<span class="button-style">[[PHANTAMOEBAS->IncorrectDiagnosis02]]</span>
<span class="button-style">[[MOULDED->IncorrectDiagnosis02]]</span>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/wBUdbnn.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -42%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->Start Examination 08]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>At the console, the hum of the machine fades into the background, each hour ahead blending into an endless cycle. Any hope for relief feels distant, slipping further away with each shift. The knowledge that treatment is out of reach settles heavily on you—a quiet reminder of just how helpless you truly are. Time to get started.</p>
</div>
</div>|logo>[<div style="opacity: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; transition: opacity 1s; margin: 0; padding: 0; position: fixed; top: 0; left: 0;" id="logo">
<img src="https://i.imgur.com/OXyKs0R.jpeg" alt="Logo" style="max-width: 100vw; max-height: 100vh; object-fit: contain;">
</div>]
<style>
/* Hide the undo arrow */
tw-undo, tw-undo-button {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0;
width: 0;
}
</style>
<script>
(function() {
var logo = document.getElementById('logo');
// Fade in the logo over 1 second
setTimeout(function() {
logo.style.opacity = '1';
}, 100);
// Fade out the logo after 2 seconds (for a total of 3 seconds on screen)
setTimeout(function() {
logo.style.opacity = '0';
}, 2100);
})();
</script>
{
(live: 3s)[(goto: "bribe check")]
}<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/OjxzfCB.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -2%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->nbe5]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You’ve held onto something that money can’t buy and that this cold, merciless place has failed to take from you: your sense of right and wrong.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Svt1dKa.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -45%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->nbe6]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You could have given in, taken the easy way, but every choice you made was yours alone. And while the journey ahead may still be long and unforgiving, you feel a quiet strength in knowing you’ve preserved the parts of yourself that truly matter. In a world so eager to break you, you’ve stayed whole, inch by inch, day by day—resilient and unwavering.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/Svt1dKa.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, -3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -35%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->End B]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> You’re ready to start again, to carve your path forward with purpose, knowing that every choice, no matter how small, is a testament to the strength they could never take from you.</p>
</div>
</div><style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MCJqZN5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 03]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You step into the medical bay lobby, greeted by the harsh glare of fluorescent lights. Taking a slip with your number, you sit among the empty chairs, the sterile scent filling the air. After a tense wait, your number echoes over the speaker, calling you forward to the diagnostic machine looming ahead, silent and ready.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/ttwRPxT.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 52]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> The air seems to drop, a weight pressing down as the realization sinks in. You feel the world go still, that single word glowing on the screen with a finality that pierces deeper than any diagnosis before. A shiver runs through you—this isn’t a cure, it’s a sentence. How did this happen?</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/e8tKRq6.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[ACCEPT YOUR FATE->eb2 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Suddenly, the machine whirs to life, mechanical arms pressing firmly against your shoulders, guiding you forward, towards the "treatment" chamber. The ground beneath feels as if it’s falling away, leaving you suspended in a numb, frozen shock.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/4k0p0sv.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 3%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb2 05]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> The machine begins its scan, clicking and whirring. You find yourself counting each breath, patiently waiting for relief.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/MCJqZN5.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -30%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 02]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>You step into the medical bay lobby, greeted by the harsh glare of fluorescent lights. Taking a slip with your number, you sit among the empty chairs, the sterile scent filling the air. After a tense wait, your number echoes over the speaker, calling you forward to the diagnostic machine looming ahead, silent and ready.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/IYb6fNX.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -20%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 46]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> The procedure is brief, and already you feel the weight in your chest lifting, each breath lighter, free of the constant ache you’d grown used to. </p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/e8tKRq6.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 85%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[ENTER THE CHAMBER->eb1 43]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Suddenly, the machine whirs to life, mechanical arms pressing firmly against your shoulders, guiding you forward, towards the treatment chamber. It's finally tme to be rid of this wretched illness.</p>
</div>
</div>
<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/L7kifA3.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 45]]</span>
</div>
</div>
<div id="bottom-textbox">
<p>Relief floods you, tempered by a sensation that almost feels like happiness. It’s fragile, tentative, this feeling. You don’t quite know how to hold it, as though hope is something you might accidentally break if you grip it too tightly.</p>
</div>
</div>
(set: $Bribe02 to true)
(goto: 'b2Diagnosis07')<style>
/* Importing a pixel font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Reset margins, paddings, and box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Full-screen layout */
html, body {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Container for the layout */
#container {
width: 75%; /* Width to fit the dark screen spaces */
height: 85vh; /* Height adjustment */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
margin-left: 16%; /* Align container */
margin-top: 11%; /* Maintain the same top margin */
border: none; /* Remove teal outline */
}
/* Background image */
#background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://i.imgur.com/S3TRGKh.jpeg'); /* Background image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0; /* Background layer */
opacity: 0.8; /* Adjust opacity if needed */
}
/* Top section with main image, divider, and right-side textbox */
#top-section {
display: flex;
width: 100%;
height: 50vh; /* Height adjustment */
position: relative;
z-index: 2; /* Ensures it is above the background */
margin-left: 3%; /* Move the entire top section 3% to the right */
}
/* Main image section */
#main-image {
width: 54%; /* Width adjustment */
height: 100%;
background-image: url('https://i.imgur.com/OjxzfCB.jpeg'); /* Main image URL */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1; /* Ensure it's above the background */
transform: translate(-1%, 1%); /* Move the image 2.5% to the left and 8% down */
}
/* Divider between main image and right textbox */
.divider {
width: 2%; /* Divider width */
height: 100%;
background-color: transparent; /* Make it transparent */
border-left: none; /* Remove teal vertical border */
}
/* Right-side text box */
#right-textbox {
width: 30%; /* Adjusted width */
height: 100%;
background-color: transparent;
color: white;
padding: 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
transform: translate(10%, 2%); /* Move the right textbox up 5% and right 3% */
border: none; /* Remove teal outline */
}
/* Bottom text box */
#bottom-textbox {
width: 80%; /* Adjust width */
height: 18vh; /* Adjust height */
background-color: transparent;
color: white;
padding: 70px 5% 150px; /* Adjust padding */
display: flex;
flex-direction: column;
align-items: center; /* Center content horizontally */
justify-content: flex-start; /* Align content at the top */
font-family: 'VT323', monospace;
font-size: 16px;
z-index: 2;
margin: 0 auto;
text-align: center; /* Center text */
border: none; /* Remove teal outline */
transform: translate(-9%, -25%); /* Move the bottom textbox left another 3% */
}
/* Adjusting the paragraph inside the bottom textbox */
#bottom-textbox p {
margin: 0; /* Reset margin */
padding: 0;
transform: translateY(5%); /* Adjust the text position */
}
/* Button styling with new blue color */
.button-style {
background-color: black;
color: white;
border: 2px dotted #2e8ca3; /* New blue color */
padding: 0px 1px; /* Reduced padding */
cursor: pointer;
font-family: 'VT323', monospace;
text-align: center;
width: 100px;
margin: 2px;
}
.button-style:hover {
background-color: #2e8ca3;
color: black;
}
</style>
<div id="background-image"></div> <!-- Static background image -->
<div id="container">
<div id="top-section">
<div id="main-image"></div> <!-- Main image section with background only, no <img> tag -->
<div class="divider"></div> <!-- Divider between main image and right textbox -->
<div id="right-textbox">
<span class="button-style">[[CONTINUE->eb1 06]]</span>
</div>
</div>
<div id="bottom-textbox">
<p> When you return to work, satisfaction thrums in your chest. The pain, the dread—it’s all gone. For the first time in so long, you feel alive, fully, and unmistakably. You know you didn’t make the righteous choice, and yet, as you move with this newfound vitality, you can’t help but feel a thrill. </p>
</div>
</div>