<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @font-face { font-family: "wrong font"; src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff"); } h1 { font-family: "wrong font"; margin: auto; font-weight: normal; color: yellow; font-size: 66px; letter-spacing: 3px; font-weight: bold; } h2 { color: #6666ff; font-family: "wrong font"; } #box { width: 100%; height: 100vh; display: flex; text-align: center; } body { font-family: "wrong font"; overflow: hidden; background: black; } #shadowBox { background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.2); /* Black w/opacity/see-through */ border: 3px solid; margin: auto; } .rainbow_text_animated { background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow_animation 6s ease-in-out infinite; background-size: 400% 100%; } .reflection { transform: scaley(-1); opacity: 0.3; margin-top: -8px; } @keyframes rainbow_animation { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } } </style> <title>phantas.ma</title> </head> <body> <div id="box"> <div id="shadowBox"> <h1 class="rainbow rainbow_text_animated">Phantas.ma</h1> <h2></h2> </div> </div> <script> path = document.location.pathname.slice(1) if (path) { document.querySelector('h1').innerHTML = 'Phantas.ma/' + path if (path == 'polis') { setTimeout(() => { document.querySelector('h2').innerHTML = 'Oct 30, 2021 – Mar 6, 2022' }) } } </script>