twopn/site-src/old-site.html

514 lines
145 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<title>Terezi Pyrope</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Terezi Homestuck" property="og:title" />
<meta content="from Pyrope" property="og:description" />
<meta content="https://terezi.pyrope.net/" property="og:url" />
<meta content="/res/terezi.webp" property="og:image" />
<meta content="summary_large_image" name="twitter:card" />
<meta content="#008282" data-react-helmet="true" name="theme-color" />
<meta content="mehbark's website" name=description />
<!--<meta http-equiv="refresh" content="0; URL=https://twitter.com/mehbark" />-->
<script src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>
<script>
const sleep = (secs) => new Promise(resolve => setTimeout(resolve, secs * 1000));
let images;
window.addEventListener("DOMContentLoaded", async () => {
images = new Freezeframe(`img[src$=".gif"]`, {
trigger: false,
responsive: false,
});
await sleep(1);
images.start();
});
async function za_warudo() {
const sound = document.getElementById("za-warudo");
const dnuos = document.getElementById("oduraw-az");
await sound.play();
await sleep(sound.duration - 2.5);
document.body.classList.add("stopped");
await sleep(2.0);
const movers = document.querySelectorAll(".mover");
movers.forEach(shaker => shaker.classList.add("stopped"));
images.stop();
await sleep(5);
console.log("five seconds have passed");
await dnuos.play();
document.body.classList.remove("stopped");
await sleep(dnuos.duration - 0.2);
movers.forEach(shaker => shaker.classList.remove("stopped"));
images.start();
}
</script>
<style>
html {
/* i like pretty color names :) */
/* old colors: #2a3333, #022222 */
background-color: #020808;
/* old colors: #a7e8e8, #c8e8e8, #ebfbfb */
color: #dcfdfd;
margin: 0;
}
body {
margin: 0;
font-family: serif;
overflow: auto;
overflow-x: hidden;
transition: filter 2s;
}
h2 {
margin-bottom: 0;
}
header {
background-color: #016363;
margin-bottom: -3px;
width: 100%;
}
header > a::before {
content: "¦ ";
}
#head a {
color: #c3e6f8;
text-decoration: none;
}
#main {
margin: auto 2vw;
/*width: 100%;
max-width: 612pt;*/
}
footer {
text-align: center;
background-color: #008282;
width: 100%;
/* it's too big :[
position: sticky;*/
bottom: 0;
}
/*.badges a, marquee a, header a {
border: none;
background-color: #00000000;
text-decoration: none;
}*/
.badges {
image-rendering: pixelated;
transition: transform 0.1s;
overflow-x: clip;
font-size: 0pt;
}
.badges > * {
display: inline-block;
width: 88px;
height: 31px;
vertical-align: middle;
}
/*
.badges > :hover {
transform: scale(2);
}
*/
.badges > a > img, .badges .ff-container {
width: 88px;
height: 31px;
}
.webring {
margin: 0 auto;
}
.webring > a {
text-decoration: none;
font-size: 2rem;
color: #fff7ef;
}
.webring > a:visited {
color: #fff1d6;
}
/* terezi color from https://balentay.tumblr.com/homestuckcolors :) */
a {
color: #039292;
/*text-decoration: none;
border-bottom: 1px dotted #008282;*/
/*
concat [(if (x > 0) then "" else "-") ++ "0." ++ show (abs x) ++ "px " ++ (if (y > 0) then "" else "-") ++ "0." ++
show (abs y) ++ "px white, " | x <- [-1..1], y <- [-1..1], (x, y) /= (0, 0)]
*/
/*text-shadow: -0.5px -0.5px white, -0.5px -0.0px white, -0.5px 0.5px white, -0.0px -0.5px white, -0.0px 0.5px white, 0.5px -0.5px white, 0.5px -0.0px white, 0.5px 0.5px white;*/
/*background-color: white;*/
}
#default-sprite {
position: absolute;
left: 40em;
right: 2em;
height: 100%;
pointer-events: none;
}
/*
.mover {
transition: animation-duration 10s;
outline: 1px solid red;
}
*/
#default-sprite > img {
animation: marquee 2s linear alternate infinite;
}
#spin > img {
animation: spin-marquee 2s linear infinite;
position: absolute;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes spin-marquee {
0% {
transform: translateX(-100%) rotate(0turn);
}
100% {
transform: translateX(calc(100vw + 100%)) rotate(1turn);
}
}
#spin {
position: absolute;
top: 25em;
left: 0;
width: 100%;
height: fit-content;
z-index: -413;
}
@media (prefers-reduced-motion) {
#spin {
display: none;
}
}
a:visited {
color: #559494;
/*border-bottom: 1px solid #77003c;*/
}
body.stopped {
filter: grayscale(100%);
}
.stopped:not(.spe.cif.ici.ty#hack) {
/* animation-duration: 1225s; */
animation-play-state: paused;
}
#the-world {
display: inline;
border-radius: 1225px;
aspect-ratio: 1;
margin: 0;
vertical-align: bottom;
}
</style>
</head>
<body>
<header id="head">
<a href="https://terezi.pyrope.net">terezi.pyrope.net</a>
<a href="https://blog.terezi.pyrope.net">blog</a>
<!-- ¦ <a href= "https://irc.pyrope.net">irc</a> -->
<a href= "https://git.pyrope.net/mbk">git</a>
<a href="https://cohost.org/mehbark">cohost</a>
<a href= "https://mehbark.itch.io">itch</a>
<a href="/spout" title="where i dump thoughts and posts">spout</a>
</header>
<div id="main">
<!--
<a href="https://twitter.com/mehbark"><img src="/terezi.webp"><p>(click if you want)</p></a>
-->
<!-- the default delay is 85 and the default amount is 6px,
so we can make the scrolling much smoother
truespeed is necessary because otherwise values under 60 are ignored
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee#attr-scrolldelay -->
<!--
<marquee behavior="alternate" truespeed scrolldelay=14 scrollamount=1 height=0 id="default-sprite">
</marquee>
<marquee truespeed scrolldelay=7 scrollamount=4 direction=right height=0 id="spin">
<img src="/spinrezi.gif" alt="ms. Terezi Pyrope spinning uncontrollably">
</marquee>
-->
<div id="default-sprite">
<img src="/res/terezi.webp" alt="the wonderful default sprite of ms. Terezi Pyrope" class="mover">
</div>
<div id="spin">
<img src="/res/spinrezi.png" alt="ms. Terezi Pyrope spinning uncontrollably" class="mover">
</div>
<h2>hi</h2>
<p>
i'm mehbark.
</p>
<p>
if you didn't know that, say hi (there are many ways to get in touch with me)!
</p>
<p>
if you did know that, say hi (there are many ways to get in touch with me)!
</p>
<p>
this is my website.
</p>
<p>
yeah, i did get this domain just for the pun.
</p>
<h2>some of my stuff that you can actually look at on your internet digibrowser:</h2>
<ul>
<li>
my proudest web thing by far, can't believe this wasn't here already: <b><a href="https://elo-worldle.pyrope.net/">elo worldle</a></b>: (imperfect javascript) implementations of 19 chess algorithms described by tom7 <a href="http://tom7.org/chess/weak.pdf">http://tom7.org/chess/weak.pdf</a> packaged together in a game where you guess which one you're playing against. genuinely fun, and i have no quandries with recommending you play it. there's also a <a href="https://elo-worldle.pyrope.net/paper.pdf">paper</a> but it's pretty rushed and sucks and i'm not proud of it, but it did get in to the “last” <a href="https://sigbovik.org">sigbovik</a>: <a href="https://sigbovik.org/2023/proceedings.pdf">https://sigbovik.org/2023/proceedings.pdf</a>
</li>
<!--
<li>
A while back I wrote two webservers
(one much simpler than the other)
in rust, as well as a simple JS frontend, to make a simple, flaky,
social <a href="https://treedia.pyrope.net">treedia</a> (down rn, has been for a while)
</li>
-->
<li><a href="https://elm-lang.org">Elm</a>
is a very fun programming language to work in (read: i should use it more)
despite its (sometimes intentional) warts, and i've made a few things in it
<ul>
<li>
<a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">Conway's game of life:</a>
<a href="https://pyrope.net/gol/">https://pyrope.net/gol/</a>
</li>
<li>
A
<a href="https://pyrope.net/time/">clock</a>,
based on the bottom exercise
<a href="https://guide.elm-lang.org/effects/time.html">here, in the Elm guide</a>
</li>
</ul>
</li>
<li>
<a href="https://pyrope.net/toy-network">This little proof of concept</a>
would have really benefitted from Elm's dom-diffing;
as it is, it is a nightmare gc scenario
</li>
<!--
<li>
<a href="https://pyrope.net/falling">This stripey arty lamey piece</a>
arose from a bug in a simple js falling-sand game where the original position
of a sand wasn't cleared when it fell, leading to a neat effect
</li>
-->
<li><a href="https://pyrope.net/concat">concat</a>: an extremely simple, interactive language that arose from the idea that in a stack-based language you can have usable functions by just concatenating them into the program. problem: this doesn't actually have those.
<li><a href="https://pyrope.net/TIMEDOG">TIMEDOG</a>: a clock that measures time in patricia taxxon's <a href="https://patriciataxxon.bandcamp.com/album/techdog-1-7">TECHDOG</a>
<li>
weirdly there isn't a homestuck section so
<ul>
<li><a href="https://captch.pyrope.net">captch</a>: crappy sylladex sim, currently only stack, queue, and stack-queue. might update this later but ehhh it's been months so probably not</li>
<li><a href="https://pyrope.net/davehash">davehash</a>: an interactive implementation of a few of the hash functions in dave's hash modus, formatted as closely to the comic as possible (for better and for worse hmph). my first "actual" <a href="https://react.dev">react</a> project (i like react and i like things that update quickly but only change what's necessary)</li>
<!--<li><a href="https://fl.pyrope.net/">freshter logs</a>: live chat that imitates homestuck's pesterlogs, made with deno and fresh and has a flexible preset system</li>-->
</ul>
<li><a href="/spout">spout</a>: linked above, fun, oft-interactive html/js pieces. check it out!</li>
</ul>
</div>
<footer>
<div class="badges">
<a href="https://bambosh.dev/unofficial-homestuck-collection">
<img src="/res/88x31/homestuck.gif" alt="homestuck" title="read it">
</a>
<a rel="me" href="https://critter.cafe/@mehbark">
<img src="/res/88x31/mastodon_button_3.gif" alt="The mastodon mastodon playing with a paper airplane next to text that says Follow me on Mastodon" title="if you want">
</a>
<a href="https://cyber.dabamos.de/88x31/">
<img src="/res/88x31/88x31.gif" alt="88 X 31" title="most of these are from here">
</a>
<img src="/res/88x31/stamp-sadness.gif" alt="i like stamps but they would look out of place sad face" title="i mean the fancy ones that aren't 88x31, they just don't line up">
<a href="https://archlinux.org/">
<img src="/res/88x31/archlinux.gif" alt="arch linux" title="it's just easier tbh">
</a>
<a href="https://www.w3.org/Style/CSS">
<img src="/res/88x31/css2.gif" alt="made with cascading style sheets" title="very few of them, but some">
</a>
<a href="https://www.debian.org/">
<img src="/res/88x31/debian.gif" alt="the debian logo next to text that says powered by debian" title="it really is; that's why it's still working">
</a>
<a href="https://store.steampowered.com/app/1610900/The_Genesis_Project/" target="_blank">
<img src="/res/88x31/e-hs.gif" alt="text that says download SBURB next to the SBURB logo, the SBURB part is all fancy" title="not really but this is dang cool">
</a>
</a>
<img src="/res/88x31/this-user-loves-terezi.png" alt="terezi next to text that says THIS USER LOVES TEREZI in terezi's typing quirk" title="(platonically)">
<!--
hi cefqrn hi hi hi hi hi hi hi hi
-->
<a href="https://www.mozilla.org/firefox/">
<img src="/res/88x31/firefoxget.gif" alt="The firefox logo next to text that cycles between get firefox, rediscover the web, the browser you can trust, etcetera" title="i use it">
</a>
<img src="/res/88x31/ie_exploder.gif" alt="Text that says FREE: Microsoft Internet Exploder next to the internet explorer logo, which turns into the earth and then BLOWS UP" title="real fact, ask your local librarian">
<a href="https://irc.pyrope.net">
<img src="/res/88x31/ircworks.gif" alt="irc works" title="sometimes. uh, not right now">
</a>
<!--
-->
<img src="/res/88x31/2019.gif" alt="Still using buttons in 2019!" title="get it? because it isn't 2019?">
<a href="https://www.vim.org/">
<img src="/res/88x31/madewithvi.gif" alt="made with vi" title="technically the improved version and a bit of the vscode version and a bit of evil">
</a>
<img src="/res/88x31/i-was-on-cohost.gif" alt="eggbug next to text that says I was on cohost" title="i was!">
<!--
-->
<a href="http://web.archive.org/web/20240000000000*/hackles.org"><img src="/res/88x31/hackles-button.png" alt="the two penguins from hackles looking at teal text that says hackles.org" border=0></a>
<img src="https://deep-freezer.neocities.org/images/misc_buttons/HomestuckButton.gif" alt="a pretty pixel art gif by @coldcalzone that shows the broad strokes of the acts of homestuck. very cool">
<a href="http://www.sbcl.org/"><img src="https://www.sbcl.org/sbclbutton.png" alt="(get 'sbcl)"></a>
<a href="https://terezi.pyrope.net"><img alt="terezi's head is seen from behind looking at the sky. on the right, it says terezi.pyrope.net and >:]" src="https://terezi.pyrope.net/88x31.png"></a>
<a href="https://wowperfect.net/"><img title="wow, perfect" src="https://wowperfect.net/img/88x31.png"></a>
<a href="https://coolstation.space"><img title="cool, station" src="https://coolstation.space/cool_assets/88x31/coolstation.gif"></a>
<a href="https://spax.zone"><img title="Spaxolotl's zone" src="https://spax.zone/images/buttons/button.gif"></a>
<a href="https://kokoscript.com"><img title="Koko's NetWeb Site" src="https://kokoscript.com/img/button/kokoscript.gif"></a>
<a href="https://deerz.one"><img title="the (ida) deer zone" src="https://deerz.one/img/88x31/deerzone.gif"></a>
<a href="https://moonbase.lgbt" title="Moonbase Dot LGBT"><img src="https://moonbase.lgbt/88x31/moonbase.gif" alt="Moonbase Dot LGBT" width="88" height="31" /></a>
<a href="https://easrng.net"><img title="em's net" src="https://badges.easrng.net/easrng.gif"></a>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Lebsite Weague"><img src="/res/88x31/lebsite-weague.png" alt="lebsite weague" /></a>
<a href="https://moonbase.lgbt/blog/nes-pictionary-in-memoriam/" title="NES Pictionary"><img src="https://moonbase.lgbt/88x31/nes-pictionary.png" alt="NES Pictionary" width="88" height="31"></a>
<a href="https://nixos.org" title="fixes this"><img src="/res/88x31/nixos-88x31.png" alt="nixos logo" /></a>
<iframe src="https://incr.easrng.net/badge?key=terezi.pyrope.net" style="background: url(//incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe>
<a href="https://lisanne.gay"><img alt="lisanne.gay 88x31" src="https://lisanne.gay/88x31_pls_DO_hotlink.png"></a>
</div>
<div class="webring">
<h3>this web site is part of the m,cai webring</h3>
<a href="https://spax.zone"></a> <a href="ring.html">everyone</a> <a href="https://lisanne.gay"></a>
</div>
<iframe width="110" height="100" src="https://www.myinstants.com/instant/lancer-splat-18107/embed/" frameborder="0" scrolling="no"></iframe><button id="the-world" onclick="za_warudo()">ZA WARUDO</button>
<audio id="za-warudo" src="/res/za-warudo.mp3"></audio>
<audio id="oduraw-az" src="/res/oduraw-az.mp3"></audio>
</footer>
</body>
<!--
 ▄▄▄▄▄ ▄▄▄▄▄▄ 
 ▄▄▄ ▄▄▄▄ 
 ▄▄▄ ▄▄▄▄ 
 ▄▄ ▄▄ ▄▄ 
 ▄▄▄▄▄▄▄▄ ▄▄▄ ▄▄▄ ▀ 
 ▄▄▄▄ ▄▄▄▄▄ ▄▄▄▄ ▀ 
 ▄▄ ▀ 
 ▄  
 ▄ ▀ 
 ▄ ▀ 
 ▄ ▀▀ 
 ▄ ▀▀ 
 ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
 ▄  
 ▄ ▀ 
 ▄  
 ▄  
  ▀ 
   
 ▄        
  ▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄  ▄        ▄ ▄▄ ▄ ▄▄  ▀ 
  ▄▄   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄  ▄  ▄▄▄▄▄▄▄   
    ▄▄   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄  ▄  
   ▄▄▄    ▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▀ 
  ▄▄▄▄▄▄ ▄ ▄      ▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄ ▄▄▄▄▄ ▄  
  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄  ▄▄▄▄▄▄  ▄▄▄▄▄▄▄ ▄▄▄▄▄  ▄ ▀ 
   ▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄     ▄▄▄▄▄▄▄▄▄▄▄▄ ▄   ▀ 
 ▄ ▄▄ ▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄   
  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄   ▄  
  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄  
  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄ ▄▄ ▄▄▄▄▄▄▄▄▄   ▄ ▄ 
  ▄▄▄▄▄▄▄▄▄▄   ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄ ▄▄▄ ▄▄▄▄▄▄ ▄ ▄▄▄▄ ▄▄   ▄  
  ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄ ▄▄▄ ▄▄▄▄ ▄   ▄▄▄▄ ▄ 
  ▄▄  ▄▄▄▄▄▄ ▄   ▄   ▄▄▄▄ ▄ ▀ 
   ▄▄ ▄▄▄▄▄▄▄▄▄ ▄▄  ▄▄▄ ▄▄▄ ▄ ▄▄▄▄▄▄▄▄ ▄▄ ▄ ▄  
 ▀ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄ ▄ ▄▄▄▄ ▄▄ ▄▄ ▄▄▄▄▄   ▄  ▄▄▄▄ ▀ 
  ▄ ▄▄ ▄▄▄▄▄▄▄  ▄▄▄▄▄ ▄     ▄▄ ▄▄▄  ▄▄ ▄  
 ▀  ▄▄▄ ▄▄▄▄ ▄▄  ▄▄▄  ▄▄  ▄▄ ▄▄▄  ▄▄  ▀ 
   ▄▄  ▄        ▄▄ ▄ ▄▄▄▄▄ ▄▄ ▄▄▄▄   ▄▄   ▄▄▄▄   
 ▀ ▄▄▄▄▄▄▄      ▄  ▄▄▄▄▄▄▄  ▄▄ ▄▄  ▄   ▄ ▄▄ ▄ ▄▄▄▄ ▀ 
  ▄▄▄▄▄▄▄▄ ▄ ▄ ▄▄▄  ▄▄▄ ▄▄  ▄    
 ▀ ▄▄ ▄▄ ▄▄ ▄▄  ▄  ▄▄▄ ▄▄▄ ▄ ▄▄▄   ▀ 
  ▄▄▄ ▄▄ ▄▄▄▄ ▄    
  ▄▄▄▄ ▄  ▄▄▄▄ ▄ ▄▄ ▄▄ ▄▄   ▀ 
   ▄▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄  ▄▄▄       ▄▄ ▄   ▄    ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 
   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄ ▄▄▄ ▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 
 ▀     ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀ 
  ▄▄▄ ▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄  ▄▄▄▄▄▀ 
  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄   ▄ ▄▄▄▄▄▄▀ 
  ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄     ▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄  ▄▄▄▄▄▀ 
 ▀   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀ 
  ▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 
  ▄ ▄ ▄ ▄ ▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄ ▄▄▀ 
 ▀ ▄ ▄▄▄▄▄ ▄  ▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄  
  ▄▄▄▄▄▄ ▄▄▄▄  ▄▄▄▄ ▄▄▄  ▄ ▄▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄  
 ▀ ▄ ▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄▄  
  ▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄ ▄▄▄ ▄▄▄ ▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄  ▄▄ ▄▄▄▄  
  ▄▄▄▄▄▄ ▄▄ ▄▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄ ▄ ▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄ ▄▄  
  ▄ ▄▄▄▄▄▄ ▄▄▄▄  ▄▄ ▄▄▄▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄ ▄▄▄▄▄▄ ▄▄ ▄  ▄▄▄  
 ▄   ▄▄▄ ▄  ▄▄ ▄▄  ▄ ▄▄▄ ▄▄ ▄▄ ▄▄ ▄ ▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄   ▄ ▀ 
  ▄▄▄▄▄▄ ▄ ▄▄▄ ▄▄ ▄▄▄▄▄▄▄ ▄ ▄ ▄▄▄ ▄ ▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄  
  ▄▄▄   ▄▄ ▄▄ ▄▄▄  ▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄▄▄▄▄   ▄▄▄ ▄▄ ▄  
  ▄▄▄ ▄▄▄ ▄ ▄▄▄▄▄▄▄▄ ▄ ▄▄   ▄▄▄▄▄▄ ▄  
 ▄ ▄ ▄▄▄ ▄▄ ▄ ▄ ▄▄▄▄▄▄▄▄ ▄▄▄ ▄ ▄▄  
 ▄▄   ▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄▄▄ ▄  
 ▄▄▄ ▀▀▀▄  ▄ ▄ ▄  ▄ ▄  ▄▄▄   
 ▄▄ ▀▀▀▀▀▀▀▀  ▄▄▄▄▄▄      ▀▀  
▀▀▀▀▀▀▀ ▄ ▄▄▄ ▄   ▄           ▀ ▀ ▄▄ 
 ▄ ▄▄▀ ▄ ▄  ▄   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄ ▄     ▄▄ ▄▄ ▀  ▀ ▄▄ 
 ▄ ▀▀▀ ▄▄▄▄▄ ▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄   ▄   ▄▄▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ 
  ▀▀▀  ▄  ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄      
 ▀   ▄ ▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄ ▄▄      
   ▄    ▄   ▄ ▄   ▄ ▄ ▄▄        
  ▄▄ ▄   ▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄     
     ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄     
  ▄  ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄  ▄   
  ▄ ▄▄    ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄  
  ▄▄▄  ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄  
     ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄  ▄ 
      ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄      
     ▄▄  
 ▄     ▄▄▄▄  
  ▄▄   ▄ ▄   
  ▄▄ ▄▄   
 ▄▄ ▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄  ▄ ▄▄ ▄ ▄▄  
 ▀  ▄▄▄▄ ▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄ ▄▄ ▄▄▄▄▄▄ ▄▄▄▄   
 ▄    ▄▄▄▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄  ▄▄▄  
      ▄▄▄ ▄ ▄ ▄ ▄▄▄▄▄▄▄ ▄▄ ▄▄   ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄ ▄  
       ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄    
 ▄▄    ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄    
          
          
     ▄▄▄  ▄  
     ▄ ▄  
 ▄▄ ▄▄▄ ▄ ▄ ▄▄   
  ▄ ▄▄▄▄▄ ▄▄▄▄▄▄   
  ▄    ▄▄ ▄▄▄▄▄   
     ▄▄▄▄▄ ▄   
           ▄ 
            
         ▄▄▄▄ ▄ 
         ▄▄ ▄▄▄ 
     ▄▄▄▄ ▄ ▄▄▄▄  
      ▄▄ ▄ ▄  ▄▄ 
            ▄  ▄ ▄▄▄▄▄ ▄ ▄  
      ▄ ▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 
   ▄  ▄ ▄ ▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 
  ▄ ▄▄ ▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 
 ▄ ▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ 
  ▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄ 
    ▄▄▄ ▄ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄▄▄ 
 ▀ ▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄  ▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄ ▄    ▄▄▄▄▄▄▄▄▄ 
   ▄▄▄▄  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄  ▄▄▄▄▄▄ ▄▄▄ ▄▄ ▄▄  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄ 
 ▀▀  ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄ ▄▄▄▄▄▄▄▄  ▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀ 
 ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀ ▀▀▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀ 
 ▀▀▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀ 
 ▀▀▀▀▀▀▀▀▀▀▀▀▀▀ 
-->
</html>