<!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>