<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>reveal</title>

<link rel="preload" as="fetch" href="https://octothorp.es/?uri=https://sweetfish.site/wwo/reveal" >
<link rel="octo:octothorpes" href="weirdweboctober" >
<link rel="octo:octothorpes" href="Reveal" >

<meta property="og:title" content="reveal">

</head>

<style>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
--primo: black;
--secondo: white;
--terzo: lightskyblue;
}

body {
font-size: 1.15em;
color: var(--secondo);
background: var(--primo);
margin: 0 auto;
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>💡</text></svg>") 16 0, auto;
}

main {
position: relative;
margin: 0 auto;
overflow-x: hidden;
}

#container {
font-size: 1.5em;
line-height: 1.25em;
padding: 5vw;
width: 100%;
text-align: left;
}

::selection {
color: var(--primo);
background: var(--secondo);
}

p {
margin-bottom: 1em;
}

.source {
position: fixed;
margin: 0 auto;
padding: 0;
bottom: .5em;
right: .5em;
display: grid;
place-items: center;
width: 1.5em;
height: 1.5em;
background: var(--primo);
border: 1px solid var(--secondo);
border-radius: 100%;
font-size: 1.5em;
line-height: 1.5em;
color: var(--secondo);
cursor: pointer;
z-index: 99;
}

@media (max-width: 800px) {
.source {
line-height: 0;
}
}

.source:hover {
background: var(--secondo);
color: var(--primo);
}

.source a {
color: var(--secondo);
text-decoration: none;
}

.source a:hover {
color: var(--primo);
text-decoration: none;
}

.empty {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}

#flashlight {
--Xpos: 50vw;
--Ypos: 50vh;
}

#flashlight:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
background: radial-gradient(
circle 12em at var(--Xpos) var(--Ypos),
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
);
}

</style>

<body>

<main>

<div id="flashlight"></div>

<div id="container">

</div>

<div class="source">
<a href="/wwo">?<span class="empty"></span></a>
</div>

</main>

<script>

let mouseX = 0;
let mouseY = 0;
let flashlight = document.getElementById("flashlight");

const isTouchDevice = () => {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
};

function getMousePosition(e) {
mouseX = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
mouseY = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
flashlight.style.setProperty("--Xpos", mouseX + "px");
flashlight.style.setProperty("--Ypos", mouseY + "px");
}

document.addEventListener("mousemove", getMousePosition);
document.addEventListener("touchmove", getMousePosition);
</script>

</body>

</html>