<html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Good for Health, Bad for Education</title>  
<style>

body	 {
font-family:verdana;
font-size:30px;
font-color:black;
scrollbar-face-color : gray;
scrollbar-shadow-color : gray;
scrollbar-highlight-color : gray;
scrollbar-3dlight-color : black;
scrollbar-darkshadow-color : black;
scrollbar-track-color : white;
scrollbar-arrow-color : white ;   	
A:link { text-decoration: none ;}
A:visited { text-decoration: none ;}
A:active { text-decoration: none; color: gray; }
A:hover { text decoration: underline overline; color: gray; }
background-repeat: no-repeat; 

}


.messy {
//clean your room cial put it all in a box
// affects art and orbs location
// everything else youre on your own
width: 1000px;
height: 870px;
border-radius:0px;
margin-left:-5px;
margin-top:-600px;
padding:0px;
display:block;
position:absolute;
align-items:center;
background-image:url("./smoke.jpg");

}



.trippin {
//ballz lmao 
//this was css practice
//then it just became a chunk of code i had to work around
//follows the iframe to top it
//gotta have that hazy red corner bby
// stupidly inherits some of its location from the iframe settings
width:500px;
border-radius:20px;
margin-top:-850px;
margin-left:420px;
display:block;
position:absolute;
pointer-events: none;
}

.purplehaze {
//a blu transparent circle
//denim
width: 800px;
height: 600px;
border-radius: 420px;
width: 600px;
padding:30px;
background-color:#334477;
margin-left: 300px;
margin-top: 0px;
display:flex;
position: absolute;
opacity:0.8;
}

.yellow {
//yellow
//blondes have more fun
width: 700px;
height: 600px;
border-radius: 420px;
width: 600px;
padding:30px;
background-color:#ffff99;
margin-left: 5px;
margin-top: -50px;
display:flex;
position: none;
opacity:0.2;
}

.red {
//all the rage inside you
width: 700px;
border-radius: 420px;
width: 600px;
padding:30px;
background-color:#990066;
margin-left: -363px;
margin-top: 243px;
display:flex;
position: none;
opacity:0.5;
height: 600px;
pointer-events: none;
// thats all orbs n colors now wtf we do abt the content
}


.knock {
//first thing you do on entering
//so its SUPPOSED to be Top and Left
// burnout is not a superhero name
// above all other content
// makes the iframe jump around. jump around.
// flows inside wrap
position: absolute;
display: block;
width:350px;
height: 150px;
margin-top:25px;
margin-left:-1150px;
align-content:left;
}


.gloomy {
// weather outside iframe
//margins affect knock be careful
//width affects knock logo align
position:absolute;
display:block;
margin-top:0;
margin-left:0;
width:900px;
align-text: center;
align-content:left;
align-items:left;
margin-left:0px;
}



.wrap {
//to be so reduced
// affects knock gloomy
// iframe follows it
// knock knock bitch
padding: 20;
position:relative;
display:flex;
margin-left:900px;
margin-top:0px;
align-items:left;
align-content:left;
align-text:left;
padding-left:0px;
padding-top:0px;
margin-bottom: 20px;
width:885px;

}

.wrap2 {
//to be so reducedx2
//pairs to iframe
// and iframe controls
font-size: 3px;
align-text: center;
align-content:left;
align-items:left;
padding: 20;
position: relative;
display:flex;
width:800px;
margin-left:280px;
margin-top: 500px;
padding-top:0px;
color:#ff0055;
A:link { text-decoration: none; color: #ff0055; }
A:visited { text-decoration: none; color:#61100; }
A:active { text-decoration: none; color: #ffbbff; }
A:hover { text-decoration: underline overline; color: #ff00aa;}

}


.introspective {
//inside the iframe
horizontal-overflow:wrap-all, word-wrap;
height: 0px;
overflow: hidden;
border: none;
width: 800px;
}


iframe {
color: white;
}


</style>
<script>
document.addEventListener( 'DOMContentLoaded', () => {
	document.querySelectorAll( 'iframe' ).forEach( e => {
		e.addEventListener( 'load', () => {
		    let oldY = window.scrollY;
			e.style.height = '0px';
			e.style.overflow = 'hidden';
			e.style.color = 'white';
			e.style.height = `${e.contentDocument.body.parentNode.scrollHeight}px`;
			window.scrollTo( { top: oldY, behavior: "instant" } );
			console.log( e );
		} );
	} );
} );

</script>
<link rel="apple-touch-icon" sizes="76x76" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

</head>

<body bgcolor="black" text="black" vlink="61100" link="ff0055" alink="ffbbff" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" topmargin="0"><center>

<div class="messy">



<img src="smoke.jpg" title="Layout art by SpaceSmilodon">


</div>

<div class="wrap">
<div class="knock">


<div class="gloomy">

<table><tr>
<td><img src="fire.gif" alt="This website practice in CSS and for ScreenReaders."></td>
<td valign="top">
<font face="verdana" color="black" size="2">
<img src="theycallhim.png" width="300" alt="They call him Burnout." title="What kind of Superhero name is that?"><font size=1><BR></font><B>
&nbsp; &nbsp; &nbsp;i'm nobody's hero</b></font></td>


</tr></table>

</div>
<div class="wrap2">

<table width="800"><tr><td valign="top"><font color="black" face="verdana" size="3"><center>
<img src="screenReader.gif" width="1" height="1" alt="You knock before entering, like any teen boy's room. What follows are nav links for the Inline Frame."></font>

</center><font color="white" size="4px" face="verdana">&nbsp; &nbsp; 
<a target="fire" href="latch.html" alt="home">//</a> &#9762; 
<a target="fire" href="stats.html">stats</a> + 
<a href="story.html" target="fire">story</a> + 
<a href="art.html" target="fire">arts</a> + 
<a href="ooc.html" target="fire">OOC</a> + 
<a href="credits.html" target="fire">thanks</a>  &#9762;

<div class="trippin">
<div class="yellow">
<div class="purplehaze">
<div class="red">

</div>
</div>
</div>
</div>

<BR> 

</td></tr>
<tr><td valign="top">
<iframe src="latch.html" name="fire" class="introspective">no iframe support? Consider: FireFox</iframe>
</td></tr>
<tr><td valign="top">
<font face="verdana" size="1" color="white"><BR>
Layout art is by <B>SpaceSmilodon on Deviantart</b><BR>
a site to memorialize a strange? TTRPG campaign from 2013 that went great<BR>
all webdesign n code by me, 2023

</td></tr></table>





</div>
</center>