@import url('https://fonts.googleapis.com/css2?family=Changa:wght@300&family=Dancing+Script&family=Lobster&family=Yusei+Magic&display=swap');


	body { background: linear-gradient(45deg, #fc5c7d, #6a82fb); overflow: hidden;}

	.img1 { position: fixed; bottom: 0vh; right: 10vw; height: 80vh; width: 20vw; background: url('https://i.ibb.co/MkWVSX1/IhYcY60.png') no-repeat; background-size: cover; filter: drop-shadow(.8vh .8vh 0vh #fff5); transition: all .55s ease-in-out;}

	.enter { position: absolute; bottom: 20vh; right: 30vw; font-family: 'Lobster', cursive; color: #fff; font-size: 3vw;}

	.background { position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background: #fff; transition: all .55s ease-in-out; opacity: 0; pointer-events: none;}

	.img2 { position: absolute; bottom: 0vh; left: 0vw; height: 100vh; width: 30vw; background: url('https://i.ibb.co/Lgf19t8/e0ai1cx.jpg') no-repeat; background-size: cover;}

	.container { position: absolute; bottom: 10vh; left: 27vw; height: 30vh; width: 15vw; padding: 1vh; background: rgb(163, 180, 210,0.5); color: #fff; font-size: 1.5vh; line-height: 1.8vh; font-family: 'Yusei Magic', sans-serif; overflow: auto;}

	.title { position: absolute; bottom: 38.3vh; left: 27vw; font-family: 'Dancing Script', cursive; color: #fc5c7d; font-size: 5vw; text-shadow: 0px 0px 10px #fc5c7d; pointer-events: none; filter: drop-shadow(.4vh .4vh 0vh #fff9);}

	.next { position: absolute; bottom: 5vh; left: 30vw; font-family: 'Lobster', cursive; color: #fff; font-size: 3vw;}

	.background2 { pointer-events: none; position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background: #000; opacity: 0; transition: all .55s ease-in-out;}

	.backgroundt { position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background-image: url("https://www.transparenttextures.com/patterns/xv.png"); opacity: .5; }

	.img3 { z-index: 1; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 80vh; width: 28vw; background: url('https://i.ibb.co/xCPkMcb/kFGpcBn.jpg') no-repeat; background-size: cover; outline: solid 10px #D3425B; outline-offset: 15px; border: solid 1px #D3425B; filter: contrast(120%);}

	.container2 { z-index: 1; position: absolute; bottom: 11vh; left: 26vw; height: 30vh; width: 20vw; background: #00000E; padding: 1vh; border: 1px solid rgb(252, 92, 125,0.5); color: #fff7; font-size: 1.5vh; line-height: 1.8vh; font-family: 'Yusei Magic', sans-serif; overflow: auto; text-align: justify; text-transform: uppercase;}

	.title2 { z-index: 1; position: absolute; bottom: 7vh; left: 25vw; font-family: 'Dancing Script', cursive; color: #fc5c7d; font-size: 5vw; text-shadow: 0px 0px 10px #fc5c7d; pointer-events: none; filter: drop-shadow(.4vh .4vh 0vh #000);}

	.continue { position: absolute; bottom: 42vh; left: 26vw; font-family: 'Lobster', cursive; color: #fff; font-size: 3vw; z-index: 1; }

	.background3 { pointer-events: none; position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background: #fff; opacity: 0; transition: all .55s ease-in-out;}

	.img4 { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 85vh; width: 30vw; background: url('https://i.imgur.com/pGY2Rrm.jpeg') no-repeat; background-size: cover;}

	.container3 { position: absolute; top: 30vh; right: 25vw; height: 50vh; width: 20vw; background: ; overflow: auto;}

	.f1 { position: absolute; top: 1vh; left: .5vw; height: 20vh; width: 15vw;}

	.title3 { position: absolute; top: 23vh; right: 29vw; font-family: 'Dancing Script', cursive; color: #fc5c7d; font-size: 5vw; text-shadow: 0px 0px 10px #fc5c7d; pointer-events: none; filter: drop-shadow(.4vh .4vh 0vh #fff9);}

	.finale { position: absolute; bottom: 17vh; right: 37vw; font-family: 'Lobster', cursive; color: #fff; font-size: 3vw; z-index: 1;}

	.background4 { position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; transition: all .55s ease-in-out; opacity: 0; pointer-events: none; background: #6a82fb; }

	.img5 { position: absolute; bottom: 19vh; left: 10vw; height: 60vh; width: 40vw; background: url('https://i.imgur.com/waaRuxk.jpeg') no-repeat; background-size: cover; filter: contrast(120%); outline: solid 10px #fff8;}

	.container4 { position: absolute; bottom: 0vh; left: 9vw; height: 15vh; width: 30vw; background: #6a82fb; padding: 1vh; color: #fff7; font-size: 1.5vh; line-height: 1.8vh; font-family: 'Yusei Magic', sans-serif; overflow: auto; text-align: justify; text-transform: uppercase; }

	.title4 { position: absolute; bottom: 15vh; left: 8vw; font-family: 'Dancing Script', cursive; color: #fc5c7d; font-size: 5vw; text-shadow: 0px 0px 10px #fc5c7d; pointer-events: none; filter: drop-shadow(.4vh .4vh 0vh #fff);}

	.exit {  position: absolute; bottom: 7vh; left: 37vw; font-family: 'Lobster', cursive; color: #fff; font-size: 3vw; z-index: 1;}

	a { text-decoration: none; color: #fc5c7d; transition: all .55s ease-in-out;} a:hover { text-shadow: 0px 0px 10px #fc5c7d;}

	U { text-decoration:none; text-transform:uppercase; font-family: 'changa', sans-serif; color :#fc5c7d; text-shadow: 0px 0px 5px #fc5c7d; font-size: 1.5vh; transition: all .7s ease-in-out; }

	::-webkit-scrollbar {display: none;}

	ul, li { list-style: none; text-shadow: none; text-align: ; font-size: 1.5vh;  padding: 0vh; margin: 0vh;}

	li:before { content:"🞜";   font-size: 1.5vh; margin: 5px; }

	i { color: #f4c2c2;}

	b { color: #ff1493; font-weight: 400; opacity: .5;}

	#enter:target .img1 { opacity: 0;} #enter:target .enter { opacity: 0;} #enter:target .background { opacity: 1; pointer-events: all;}
	#next:target .background { opacity: 0; pointer-events: none;} #next:target .background2 { opacity: 1; pointer-events: all;} #next:target .img1 { opacity: 0; }
	#cont:target .background2 { opacity: 0; pointer-events: none;} #cont:target .background3 { opacity: 1; pointer-events: all;}
	#fin:target .background3 { opacity: 0; pointer-events: none;} #fin:target .background4 { opacity: 1; pointer-events: all;}
	#exit:target .background4 { opacity: 0; pointer-events: none;}

</style>
<div id="enter">
<div id="next">
<div id="cont">
<div id="fin">
<div id="exit">
<div class="img1"></div>
<div class="enter"><a href="#enter">enter.</a></div>
<div class="background"><div class="img2"></div>
<div class="container">
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> <a target="_blank" href="">answer</a></font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div>
<div style="border-bottom: 1px solid #dd1818; padding: 4px;"><u>stat</u><font style="float:right;"> answer</font></div></div>
<div class="title">title here</div>
<div class="next"><a href="#next">next.</a></div></div>

<div class="background2"><div class="img3"></div><div class="backgroundt"></div>
<div class="container2">They urge you to put down your sword and come join the winners. In 22 years the only 'winners' I could locate in their toothless warren were either driving a convertible van or living like trolls under an abandoned bridge. The goddesses? Alex, the goddesses .... Let me just say this about the goddesses: I don't believe the term is good enough...<p>They urge you to put down your sword and come join the winners. In 22 years the only 'winners' I could locate in their toothless warren were either driving a convertible van or living like trolls under an abandoned bridge. The goddesses? Alex, the goddesses .... Let me just say this about the goddesses: I don't believe the term is good enough... <p>They urge you to put down your sword and come join the winners. In 22 years the only 'winners' I could locate in their toothless warren were either driving a convertible van or living like trolls under an abandoned bridge. The goddesses? Alex, the goddesses .... Let me just say this about the goddesses: I don't believe the term is good enough...</div>

<div class="continue"><a href="#cont">continue.</a></div>
<div class="title2">title here</div></div>
<div class="background3">
<div class="img4"></div>
<div class="container3"><div class="f1">
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a>
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a>
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a>
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a>
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a>
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a>
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a>
<a target="_blank" href="profile link" title="friend blurb here if you want."><img src="https://i.gyazo.com/c89acc62bfd56a4028f710c33b8c9ece.png" style="width:100px;padding:4px;background-color:#A93561;"></a></div></div>
<div class="title3">title here</div>
	<div class="finale"><a href="#fin">finale.</a></div></div></div>
<div class="background4">
<div class="img5"></div>
<div class="container4"><ul><li>code commissioned for <i>firn</i> by <a target="_blank" href="https://roleplay.chat/profile.php?user=scoob">scoob</a> for their useage only. if you're interested in a code, leave them mail.</li>
<li><i>italics</i> <b>bold</b> <u>underline</u>  <a title="">hover</a> <a target="_blank" href="">link</a></li></ul></div>
<div class="title4">title here!</div>
<div class="exit"><a href="#exit">exit.</a></div><br>