<style>

@import url('https://fonts.googleapis.com/css2?family=Changa+One&family=Oswald&family=Roboto:wght@900&display=swap');


	body { background: linear-gradient(to left, #fdc830, #f37335); overflow: hidden;}

	.pic1 { position: fixed; bottom: 0vh; left: 20vw; height: 70vh; width: 27.7vw; background: url('https://i.ibb.co/G51PQBf/pico1.png') no-repeat; background-size: cover; filter: contrast(120%) drop-shadow(.8vh .4vh 0vh #998C1C); z-index: 1; pointer-events: none; transition: all .55s ease-in-out;}

	.pic2 { position: fixed; bottom: 0vh; left: 20vw; height: 70vh; width: 27.7vw; background: url('https://i.ibb.co/6R7rNT3/pico2.png') no-repeat; background-size: cover; filter: drop-shadow(.8vh .4vh 0vh #998C1C); z-index: 1; pointer-events: none; transition: all .55s ease-in-out; opacity: 0;}

	.container { position: absolute; bottom: 3vh; left: 41vw; height: 40vh; width: 22vw; background: #998C1C; border: solid 10px #343703; filter: drop-shadow(.8vh .8vh 0vh #998C1C);}

	.inner { position: absolute; top: 1vh; right: .5vw; height: 38vh; width: 15vw; font-family: 'Oswald', sans-serif; color: #fff; font-size: 1.5vh; line-height: 2vh; overflow: auto; text-align: justify; transition: all .55s ease-in-out;}

	.inner2 { position: absolute; top: 1vh; right: .5vw; height: 38vh; width: 15vw; font-family: 'Oswald', sans-serif; color: #fff; font-size: 1.5vh; line-height: 2vh; overflow: auto; text-align: justify; transition: all .55s ease-in-out; opacity: 0; pointer-events: none;}

	.question { position: absolute; bottom: 40vh; right: 40vw; z-index: 1; font-size: 5vw; font-family: 'Roboto', sans-serif; transition: all .55s ease-in-out;}

	.question2 { position: absolute; bottom: 40vh; right: 40vw; z-index: 1; font-size: 5vw; font-family: 'Roboto', sans-serif; transition: all .55s ease-in-out; opacity: 0; pointer-events: none;}


	::-webkit-scrollbar { display: none;}
		u { text-decoration:none; text-transform: ; font-family: 'Roboto', sans-serif; font-size: 2vh; letter-spacing: 0vw; color: #ffa500; text-shadow: 0px 0px 5px #ffa500;  }

	a { text-decoration: none; color: #cb410b; transition: all .55s ease-in-out; } a:hover { filter: drop-shadow(.3vh 0vh 0vh #000);}

	h1 {text-decoration: none; text-transform: lowercase; text-align: ; padding-left: .5vw; padding-bottom: -1vh;  font-family: 'Changa One', cursive;  font-weight: 400; background-color: #f8b878
; color: #fff; font-size: 4vh;  line-height: 1.5vh; letter-spacing: .3vw;  }

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

	li:before { content:"►";   font-size: 1.3vh; margin: 5px; color: orangered; }

	#enter:target .pic1 { opacity: 0; } #enter:target .pic2 { opacity: 1;} #enter:target .inner { opacity: 0; pointer-events: none;} #enter:target .inner2 { opacity: 1; pointer-events: all;} #enter:target .question { opacity: 0; pointer-events: none;} #enter:target .question2 { opacity: 1; pointer-events: all;}

	i { color: #f77f00;}

	b { color: #cd5700; font-weight: 400;}
</style>
<div id="enter">
<div id="exit">
<div class="pic1"></div>
<div class="pic2"></div>
<div class="container"><div class="inner">
<h1>statistics</h1>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<div style="padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
<h1>about</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

</div>
<div class="inner2">
<h1>headcanons</h1>
<ul><li>headcanon here, shit scrolls.</li>
<li>more headcanons</li>
<li>more headcanons</li>
<li>more headcanons</li>
<li>more headcanons</li>
<li>more headcanons</li>
<li>more headcanons</li>
<li>more headcanons</li>
<li>more headcanons</li></ul>
<h1>ooc</h1>
<ul><li> code made for <i>pico.</i> by <a target="_blank" href="">scoob</a> for their use only, if you want one of your own, dm them or send them mail.</li>
<li><i>italic</i> <b>bold</b> <u>underline</u> <a title="">hover</a> <a target="_blank" href="">link</a></li></ul>
</div></div>
<div class="question"><a href="#enter">switch.</a></div>
<div class="question2"><a href="#exit">switch.</a></div>