[dohtml]<div id="ems0">

<input type="radio" id="slide1" name="emsie"checked>
<label for="slide1"></label>
<input type="radio" id="slide2" name="emsie">
<label for="slide2"></label>
<input type="radio" id="slide1" name="emsie">
<label for="slide1"></label>
<input type="radio" id="slide3" name="emsie">
<label for="slide3"></label>
<input type="radio" id="slide2" name="emsie">
<label for="slide2"></label>
<input type="radio" id="slide4" name="emsie">
<label for="slide4"></label>
<input type="radio" id="slide3" name="emsie">
<label for="slide3"></label>

<div class="char1"><div id="name1"><div class="ems2">
<svg class="ems3a" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800"><defs><filter id="bbblurry-filter" x="-100%" y="-100%" width="400%" height="400%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="90" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="none" result="blur"></feGaussianBlur></filter></defs><g filter="url(#bbblurry-filter)"><ellipse rx="204" ry="204" cx="400.3179519413653" cy="417.2532006708115" fill="rgb(var(--color3),.5)"></ellipse></g></svg>
<svg class="ems3b" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1422 800"><g stroke-width="1" stroke="rgb(var(--color3))" fill="none" stroke-linecap="round"><path d="M 0 1218 Q 355.5 -100 711 400 Q 1066.5 900 1422 1218"></path><path d="M 0 1176 Q 355.5 -100 711 400 Q 1066.5 900 1422 1176"></path><path d="M 0 1134 Q 355.5 -100 711 400 Q 1066.5 900 1422 1134"></path><path d="M 0 1092 Q 355.5 -100 711 400 Q 1066.5 900 1422 1092"></path><path d="M 0 1050 Q 355.5 -100 711 400 Q 1066.5 900 1422 1050"></path><path d="M 0 1008 Q 355.5 -100 711 400 Q 1066.5 900 1422 1008"></path><path d="M 0 966 Q 355.5 -100 711 400 Q 1066.5 900 1422 966"></path><path d="M 0 924 Q 355.5 -100 711 400 Q 1066.5 900 1422 924"></path><path d="M 0 882 Q 355.5 -100 711 400 Q 1066.5 900 1422 882"></path><path d="M 0 840 Q 355.5 -100 711 400 Q 1066.5 900 1422 840"></path><path d="M 0 798 Q 355.5 -100 711 400 Q 1066.5 900 1422 798"></path><path d="M 0 756 Q 355.5 -100 711 400 Q 1066.5 900 1422 756"></path><path d="M 0 714 Q 355.5 -100 711 400 Q 1066.5 900 1422 714"></path><path d="M 0 672 Q 355.5 -100 711 400 Q 1066.5 900 1422 672"></path><path d="M 0 630 Q 355.5 -100 711 400 Q 1066.5 900 1422 630"></path><path d="M 0 588 Q 355.5 -100 711 400 Q 1066.5 900 1422 588"></path><path d="M 0 546 Q 355.5 -100 711 400 Q 1066.5 900 1422 546"></path><path d="M 0 504 Q 355.5 -100 711 400 Q 1066.5 900 1422 504"></path><path d="M 0 462 Q 355.5 -100 711 400 Q 1066.5 900 1422 462"></path><path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420"></path><path d="M 0 378 Q 355.5 -100 711 400 Q 1066.5 900 1422 378"></path><path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336"></path><path d="M 0 294 Q 355.5 -100 711 400 Q 1066.5 900 1422 294"></path><path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252"></path><path d="M 0 210 Q 355.5 -100 711 400 Q 1066.5 900 1422 210"></path><path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168"></path><path d="M 0 126 Q 355.5 -100 711 400 Q 1066.5 900 1422 126"></path><path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84"></path></g></svg>

<div class="ems4">
<img src="PNG/GIF FOR CHARACTER" class="ems4a">
<div class="ems4b">
<a href="LINK TO APP/PROFILE" title="profile"><i class="fa-thin fa-address-card"></i></a>
<a href="LINK TO WANT AD" title="wanted"><i class="fa-thin fa-heart-pulse"></i></a>
</div>
</div>
<div class="ems5b">AGE IN WORDS - MEMBERGROUP</div>
<div class="ems5a">FIRST NAME<span>LAST NAME</span></div>
<div class="ems6"><h1>header1</h1><h2>header2</h2><b>this is the bold text</b> <i>this is the italicized text.</i> this is your blurb. you can write whatever you want to write here and it will appear when you hover over the image. you can write something super long, or keep it short; it will scroll all the same. <p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.<p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.
</div>

</div></div></div>
<div class="char2"><div id="name2"><div class="ems2">
<svg class="ems3a" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800"><defs><filter id="bbblurry-filter" x="-100%" y="-100%" width="400%" height="400%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="90" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="none" result="blur"></feGaussianBlur></filter></defs><g filter="url(#bbblurry-filter)"><ellipse rx="204" ry="204" cx="400.3179519413653" cy="417.2532006708115" fill="rgb(var(--color3),.5)"></ellipse></g></svg>
<svg class="ems3b" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1422 800"><g stroke-width="1" stroke="rgb(var(--color3))" fill="none" stroke-linecap="round"><path d="M 0 1218 Q 355.5 -100 711 400 Q 1066.5 900 1422 1218"></path><path d="M 0 1176 Q 355.5 -100 711 400 Q 1066.5 900 1422 1176"></path><path d="M 0 1134 Q 355.5 -100 711 400 Q 1066.5 900 1422 1134"></path><path d="M 0 1092 Q 355.5 -100 711 400 Q 1066.5 900 1422 1092"></path><path d="M 0 1050 Q 355.5 -100 711 400 Q 1066.5 900 1422 1050"></path><path d="M 0 1008 Q 355.5 -100 711 400 Q 1066.5 900 1422 1008"></path><path d="M 0 966 Q 355.5 -100 711 400 Q 1066.5 900 1422 966"></path><path d="M 0 924 Q 355.5 -100 711 400 Q 1066.5 900 1422 924"></path><path d="M 0 882 Q 355.5 -100 711 400 Q 1066.5 900 1422 882"></path><path d="M 0 840 Q 355.5 -100 711 400 Q 1066.5 900 1422 840"></path><path d="M 0 798 Q 355.5 -100 711 400 Q 1066.5 900 1422 798"></path><path d="M 0 756 Q 355.5 -100 711 400 Q 1066.5 900 1422 756"></path><path d="M 0 714 Q 355.5 -100 711 400 Q 1066.5 900 1422 714"></path><path d="M 0 672 Q 355.5 -100 711 400 Q 1066.5 900 1422 672"></path><path d="M 0 630 Q 355.5 -100 711 400 Q 1066.5 900 1422 630"></path><path d="M 0 588 Q 355.5 -100 711 400 Q 1066.5 900 1422 588"></path><path d="M 0 546 Q 355.5 -100 711 400 Q 1066.5 900 1422 546"></path><path d="M 0 504 Q 355.5 -100 711 400 Q 1066.5 900 1422 504"></path><path d="M 0 462 Q 355.5 -100 711 400 Q 1066.5 900 1422 462"></path><path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420"></path><path d="M 0 378 Q 355.5 -100 711 400 Q 1066.5 900 1422 378"></path><path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336"></path><path d="M 0 294 Q 355.5 -100 711 400 Q 1066.5 900 1422 294"></path><path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252"></path><path d="M 0 210 Q 355.5 -100 711 400 Q 1066.5 900 1422 210"></path><path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168"></path><path d="M 0 126 Q 355.5 -100 711 400 Q 1066.5 900 1422 126"></path><path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84"></path></g></svg>

<div class="ems4">
<img src="PNG/GIF FOR CHARACTER" class="ems4a">
<div class="ems4b">
<a href="LINK TO APP/PROFILE" title="profile"><i class="fa-thin fa-address-card"></i></a>
<a href="LINK TO WANT AD" title="wanted"><i class="fa-thin fa-heart-pulse"></i></a>
</div>
</div>
<div class="ems5b">AGE IN WORDS - MEMBERGROUP</div>
<div class="ems5a">FIRST NAME<span>LAST NAME</span></div>
<div class="ems6"><h1>header1</h1><h2>header2</h2><b>this is the bold text</b> <i>this is the italicized text.</i> this is your blurb. you can write whatever you want to write here and it will appear when you hover over the image. you can write something super long, or keep it short; it will scroll all the same. <p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.<p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.
</div>

</div></div></div>
<div class="char3"><div id="name3"><div class="ems2">
<svg class="ems3a" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800"><defs><filter id="bbblurry-filter" x="-100%" y="-100%" width="400%" height="400%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="90" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="none" result="blur"></feGaussianBlur></filter></defs><g filter="url(#bbblurry-filter)"><ellipse rx="204" ry="204" cx="400.3179519413653" cy="417.2532006708115" fill="rgb(var(--color3),.5)"></ellipse></g></svg>
<svg class="ems3b" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1422 800"><g stroke-width="1" stroke="rgb(var(--color3))" fill="none" stroke-linecap="round"><path d="M 0 1218 Q 355.5 -100 711 400 Q 1066.5 900 1422 1218"></path><path d="M 0 1176 Q 355.5 -100 711 400 Q 1066.5 900 1422 1176"></path><path d="M 0 1134 Q 355.5 -100 711 400 Q 1066.5 900 1422 1134"></path><path d="M 0 1092 Q 355.5 -100 711 400 Q 1066.5 900 1422 1092"></path><path d="M 0 1050 Q 355.5 -100 711 400 Q 1066.5 900 1422 1050"></path><path d="M 0 1008 Q 355.5 -100 711 400 Q 1066.5 900 1422 1008"></path><path d="M 0 966 Q 355.5 -100 711 400 Q 1066.5 900 1422 966"></path><path d="M 0 924 Q 355.5 -100 711 400 Q 1066.5 900 1422 924"></path><path d="M 0 882 Q 355.5 -100 711 400 Q 1066.5 900 1422 882"></path><path d="M 0 840 Q 355.5 -100 711 400 Q 1066.5 900 1422 840"></path><path d="M 0 798 Q 355.5 -100 711 400 Q 1066.5 900 1422 798"></path><path d="M 0 756 Q 355.5 -100 711 400 Q 1066.5 900 1422 756"></path><path d="M 0 714 Q 355.5 -100 711 400 Q 1066.5 900 1422 714"></path><path d="M 0 672 Q 355.5 -100 711 400 Q 1066.5 900 1422 672"></path><path d="M 0 630 Q 355.5 -100 711 400 Q 1066.5 900 1422 630"></path><path d="M 0 588 Q 355.5 -100 711 400 Q 1066.5 900 1422 588"></path><path d="M 0 546 Q 355.5 -100 711 400 Q 1066.5 900 1422 546"></path><path d="M 0 504 Q 355.5 -100 711 400 Q 1066.5 900 1422 504"></path><path d="M 0 462 Q 355.5 -100 711 400 Q 1066.5 900 1422 462"></path><path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420"></path><path d="M 0 378 Q 355.5 -100 711 400 Q 1066.5 900 1422 378"></path><path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336"></path><path d="M 0 294 Q 355.5 -100 711 400 Q 1066.5 900 1422 294"></path><path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252"></path><path d="M 0 210 Q 355.5 -100 711 400 Q 1066.5 900 1422 210"></path><path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168"></path><path d="M 0 126 Q 355.5 -100 711 400 Q 1066.5 900 1422 126"></path><path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84"></path></g></svg>

<div class="ems4">
<img src="PNG/GIF FOR CHARACTER" class="ems4a">
<div class="ems4b">
<a href="LINK TO APP/PROFILE" title="profile"><i class="fa-thin fa-address-card"></i></a>
<a href="LINK TO WANT AD" title="wanted"><i class="fa-thin fa-heart-pulse"></i></a>
</div>
</div>
<div class="ems5b">AGE IN WORDS - MEMBERGROUP</div>
<div class="ems5a">FIRST NAME<span>LAST NAME</span></div>
<div class="ems6"><h1>header1</h1><h2>header2</h2><b>this is the bold text</b> <i>this is the italicized text.</i> this is your blurb. you can write whatever you want to write here and it will appear when you hover over the image. you can write something super long, or keep it short; it will scroll all the same. <p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.<p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.
</div>

</div></div></div>
<div class="char4"><div id="name4"><div class="ems2">
<svg class="ems3a" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800"><defs><filter id="bbblurry-filter" x="-100%" y="-100%" width="400%" height="400%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="90" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="none" result="blur"></feGaussianBlur></filter></defs><g filter="url(#bbblurry-filter)"><ellipse rx="204" ry="204" cx="400.3179519413653" cy="417.2532006708115" fill="rgb(var(--color3),.5)"></ellipse></g></svg>
<svg class="ems3b" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1422 800"><g stroke-width="1" stroke="rgb(var(--color3))" fill="none" stroke-linecap="round"><path d="M 0 1218 Q 355.5 -100 711 400 Q 1066.5 900 1422 1218"></path><path d="M 0 1176 Q 355.5 -100 711 400 Q 1066.5 900 1422 1176"></path><path d="M 0 1134 Q 355.5 -100 711 400 Q 1066.5 900 1422 1134"></path><path d="M 0 1092 Q 355.5 -100 711 400 Q 1066.5 900 1422 1092"></path><path d="M 0 1050 Q 355.5 -100 711 400 Q 1066.5 900 1422 1050"></path><path d="M 0 1008 Q 355.5 -100 711 400 Q 1066.5 900 1422 1008"></path><path d="M 0 966 Q 355.5 -100 711 400 Q 1066.5 900 1422 966"></path><path d="M 0 924 Q 355.5 -100 711 400 Q 1066.5 900 1422 924"></path><path d="M 0 882 Q 355.5 -100 711 400 Q 1066.5 900 1422 882"></path><path d="M 0 840 Q 355.5 -100 711 400 Q 1066.5 900 1422 840"></path><path d="M 0 798 Q 355.5 -100 711 400 Q 1066.5 900 1422 798"></path><path d="M 0 756 Q 355.5 -100 711 400 Q 1066.5 900 1422 756"></path><path d="M 0 714 Q 355.5 -100 711 400 Q 1066.5 900 1422 714"></path><path d="M 0 672 Q 355.5 -100 711 400 Q 1066.5 900 1422 672"></path><path d="M 0 630 Q 355.5 -100 711 400 Q 1066.5 900 1422 630"></path><path d="M 0 588 Q 355.5 -100 711 400 Q 1066.5 900 1422 588"></path><path d="M 0 546 Q 355.5 -100 711 400 Q 1066.5 900 1422 546"></path><path d="M 0 504 Q 355.5 -100 711 400 Q 1066.5 900 1422 504"></path><path d="M 0 462 Q 355.5 -100 711 400 Q 1066.5 900 1422 462"></path><path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420"></path><path d="M 0 378 Q 355.5 -100 711 400 Q 1066.5 900 1422 378"></path><path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336"></path><path d="M 0 294 Q 355.5 -100 711 400 Q 1066.5 900 1422 294"></path><path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252"></path><path d="M 0 210 Q 355.5 -100 711 400 Q 1066.5 900 1422 210"></path><path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168"></path><path d="M 0 126 Q 355.5 -100 711 400 Q 1066.5 900 1422 126"></path><path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84"></path></g></svg>

<div class="ems4">
<img src="PNG/GIF FOR CHARACTER" class="ems4a">
<div class="ems4b">
<a href="LINK TO APP/PROFILE" title="profile"><i class="fa-thin fa-address-card"></i></a>
<a href="LINK TO WANT AD" title="wanted"><i class="fa-thin fa-heart-pulse"></i></a>
</div>
</div>
<div class="ems5b">AGE IN WORDS - MEMBERGROUP</div>
<div class="ems5a">FIRST NAME<span>LAST NAME</span></div>
<div class="ems6"><h1>header1</h1><h2>header2</h2><b>this is the bold text</b> <i>this is the italicized text.</i> this is your blurb. you can write whatever you want to write here and it will appear when you hover over the image. you can write something super long, or keep it short; it will scroll all the same. <p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.<p>this is some filler text so that it will scroll to make the whole thing more aesthetically viewable. that way you can see what the colors will look like in every aspect of this template. eventually, i will get to the bottom and see the scroll happen. apparently it will have to take me longer than i thought.
</div>

</div></div></div>

<div class="ems1">alias<span>timezone, posting habits, comm preference</span><credit><a href="https://moonlightresources.jcink.net/index.php?showuser=2"><i class="fa-thin fa-copyright" title="thanks jen!"></i></a></credit></div>
<div class="left"><i class="fa-solid fa-chevrons-left"></i></div>
<div class="right"><i class="fa-solid fa-chevrons-right"></i></div>
</div>
<style>
#ems0 {
width: 500px; height: 450px; background: rgb(var(--color1)); color: rgb(var(--color2)); margin: 20px auto; position: relative; overflow: hidden; box-shadow: rgb(var(--color2),.1) 0px 7px 50px 0px; border-radius: 15px;

--color1: 252, 252, 252;
--color2: 13, 13, 13;
--color3: 226, 162, 29;
--font: archivo;
}

/*name colors. you can add as many as you need */
#name1 { --color3: RGB NUMBER;  /*name1: hex*/ }
#name2 { --color3: RGB NUMBER;  /*name2: hex*/ }
#name3 { --color3: RGB NUMBER;  /*name3: hex*/ }
#name4 { --color3: RGB NUMBER;  /*name4: hex*/ }

#ems0 .char1, #ems0 .char2, #ems0 .char3, #ems0 .char4 {
height: 450px; width: 100%; position: absolute; bottom: 0px; left: 0px; opacity: 0; transition: .5s .1s;
}

#ems0 input {display: none;}
#ems0 .left, #ems0 .right {
height: 40px; display: flex; align-items: center; justify-content: center; position: absolute; top: 130px; color: rgb(var(--color3)); text-transform: uppercase; font: 14px/00% var(--font); z-index: 6;
}
#ems0 .left {right: 125px; }
#ems0 .right {right: 50px; }
#ems0 label {height: 40px; width: 50px; position: absolute; text-align: center; z-index: 8; margin: 0px 20px;
}
#ems0 input:checked+label {display: inline-block;}
#ems0 #slide1:checked+label {display: none;}

#slide1:checked+label ~ .char1, #slide2:checked+label ~ .char2, #slide3:checked+label ~ .char3, #slide4:checked+label ~ .char4 {opacity: 1; transition: .5s;}

#ems0 #slide1:checked+label ~ #slide2+label, #ems0 #slide2:checked+label ~ #slide3+label, #ems0 #slide3:checked+label ~ #slide4+label {display: block; right: 10px; top: 130px; }

#ems0 #slide4:checked+label ~ #slide3+label, #ems0 #slide3:checked+label ~ #slide2+label, #ems0 #slide2:checked+label ~ #slide1+label {display: block; right: 80px; top: 130px; }

#slide1:checked+label ~ .left {opacity: 0;}
#slide4:checked+label ~ .right {opacity: 0;}

.ems1 {
position: absolute; top: 0px; right: 0px; width: 200px; height: 175px; box-sizing: border-box; border: 40px solid transparent; border-right-width: 20px; border-left-width: 20px; background: rgb(var(--color2)); color: rgb(var(--color3)); font: 900 italic 40px/100% var(--font); text-align: center; z-index: 6; border-radius: 0px 0px 0px 15px;
}
.ems1 span {
display: block; font: 300 italic 12px/100% var(--font); color: rgb(var(--color1)); text-transform: uppercase; letter-spacing: 1px;
}
.ems1 credit a {
text-decoration: none; color: rgb(var(--color3)); font: italic 9px/100% var(--font); position: absolute; top: 115px; right: 160px;
}
.ems2 {
position: absolute; bottom: 0px; left: 0px; height: 450px; width: 500px; font: 12px/120% var(--font);
}
.ems3a {
position: absolute; bottom: -125px; right: -125px; width: 500px; height: 500px;
}
.ems3b {
position: absolute; top: 70px; right: -140px; width: 500px; height: 500px; transform: rotate(-85deg);
}
.ems4 {
position: absolute; bottom: 40px; right: 15px; width: 200px; height: 200px; border-radius: 100%; z-index: 5;
}
.ems4a {
position: absolute; bottom: 0px; right: 0px; width: 200px; height: 200px; border-radius: 100%; background: rgb(var(--color3),.3); padding: 20px; box-sizing: border-box; transition: .5s;
}
.ems4b {
position: absolute; bottom: 0px; right: 0px; width: 200px; height: 200px; border-radius: 100%; background: rgb(var(--color3),.6); padding: 75px 30px; box-sizing: border-box; text-align: center; opacity: 0; transition: .5s;
}
.ems4b i, .ems4b a {
text-decoration: none; font-size: 40px; color: rgb(var(--color1)); margin: 5px 2px;
}
.ems4:hover .ems4a {
opacity: .3; transition: .5s;
}
.ems4:hover .ems4b {
opacity: 1; transition: .5s;
}
.ems5a {
position: absolute; bottom: 10px; left: 20px; color: rgb(var(--color3)); width: 225px; text-align: right; font: italic 26px/140% var(--font); text-transform: lowercase;
}
.ems5a span {
display: block; text-transform: uppercase;
}
.ems5b {
position: absolute; bottom: 37px; right: 250px; color: rgb(var(--color2)); width: 200px; text-align: right; box-sizing: border-box; uppercase; font: italic 7px/100% var(--font); text-transform: uppercase; letter-spacing: 2px; background: rgb(var(--color1),.8); padding: 5px; border-radius: 10px;
}
.ems6 {
position: absolute; width: 300px; height: 360px; overflow: auto; box-sizing: border-box; border: 40px solid transparent; text-align: justify; z-index: 7;
}
.ems6 h1 {
color: rgb(var(--color3)); font: 700 italic 22px/100% var(--font); text-transform: lowercase;
}
.ems6 h2 {
color: rgb(var(--color3)); font: 14px/120% var(--font); text-transform: uppercase; letter-spacing: 1px;
}
.ems6 b, .ems6 i {
color: rgb(var(--color3));
}
.ems6::-webkit-scrollbar { display: none; }
</style>
<link href="https://fonts.googleapis.com/css2?family=archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><script src="https://kit.fontawesome.com/002ef6d6f9.js" crossorigin="anonymous"></script>[/dohtml]