<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webbed site</title>
<script src="https://kit.fontawesome.com/6f83710b00.js" crossorigin="anonymous"></script>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div style="max-width: 600px; margin: 0 auto; text-align: center; font-family: georgia; border: 5px solid #7A7A7A; border-radius: 10px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.5); position: relative; background-color: #eaeaea;">
<img src="https://arsonistnpc.neocities.org/deliavatar.jpg" style="border-radius: 20%; margin-top: 20px; border: 5px solid #7A7A7A">
<h1 style="color: #7a7a7a;"><i class="fas fa-fire"></i> Arson / Libby <i class="fas fa-fire"></i></h1>
<!-- cant figure out how to make the fontawesome icons work im done messing with it. if you see any of em later on ignore them who cares -->
<p style="color: #aaaaaa">Artist of every variety<br>Digital medium</p>
<div style="text-align: left; margin-top: 20px; display: flex; flex-direction: column;">
<div>
<h3 style="color: #7a7a7a;"><i class="fas fa-crow"></i> Bio</h3>
<p style="color: #aaaaaa">Howdy! My name's Arson. This is my website. I made it myself- pretty neat, huh? There's not much to say about me.</p>
</div>
<div>
<h3 style="color: #7a7a7a;"><i class="fas fa-kiwi-bird"></i> Interests</h3>
<ul style="color: #aaaaaa;">
<li>Half-Life 1/2</li>
<li>Team Fortress 2</li>
<li>Voices of the Void</li>
<li>Stardew Valley</li>
<li>Slime Rancher</li>
<li>Garry's Mod</li>
<li>birds</li>
<li>I like stuff besides video games... I promise...</li>
<!-- genuinely cant think of other stuff to put here -->
</ul>
</div>
<div>
<h3 style="color: #7a7a7a;"><i class="fas fa-dove"></i> Hobbies</h3>
<ul style="color: #aaaaaa;">
<li>Drawing</li>
<li>Music</li>
<li>Procrastinating</li>
<li>I do other stuff but not enough to consider it a 'hobby'</li>
</ul>
</div>
<div>
<h3 style="color: #7a7a7a;"><i class="fas fa-feather"></i> 2 truths, 1 lie</h3>
<ul style="color: #aaaaaa;">
<li>I collect plastic silverware</li>
<li>I made over 1,000 drawings last year</li>
<li>I have 6 mirrors in my room</li>
<div id="clickablePara" style="cursor:pointer; padding:1rem; background-color:#f0f0f0; border-radius:8px; max-width:200px; margin:2rem auto;" onclick="showPopup()">
Answers
</div>
<div id="popupBox" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background-color:white; padding:20px; border-radius:5px; box-shadow:0 0 10px rgba(0,0,0,0.3); z-index:100; max-width:400px;">
<h3>The mirror fact is false.</h3>
<p>I do have a cup with plastic silverware on my desk. The cup is shaped like a plague doctor. I still have a bunch of sporks from middle school, too<br>I'm an artist. I like to doodle. 1,000 is probably a lowball, tbh</p>
<button onclick="hidePopup()" style="background-color:#af4c4c; color:white; padding:8px 16px; border:none; border-radius:4px; cursor:pointer;">Close</button>
</div>
<div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:99;"></div>
<!-- this stupid popup box caused me so much headache its not even funny. "google dot com popup box html tutorial" my beloved -->
<script>
function showPopup() {
popupBox.style.display = 'block';
overlay.style.display = 'block';
}
function hidePopup() {
popupBox.style.display = 'none';
overlay.style.display = 'none';
}
overlay.onclick = hidePopup;
</script>
</ul>
</div>
<div style="text-align: center;">
<a href="https://www.youtube.com/@arsonistnpc" style="display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #3a3a3a; color: #cccccc; text-decoration: none; border-radius: 5px;">Youtube</a>
<a href="https://www.redbubble.com/people/ArsonistNPCreal/shop?asc=u" style="display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #3a3a3a; color: #cccccc; text-decoration: none; border-radius: 5px;">Redbubble</a>
<a href="https://arsonistnpc.neocities.org/rawcode" style="display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #3a3a3a; color: #cccccc; text-decoration: none; border-radius: 5px;">This site's HTML</a>
</div>
</div>
</div>
</body>
</html>