<!DOCTYPE html>
<html lang="en">
  <?php 
    $captions = array(
      'bruh moment',
      'Try reloading!',
      'I use arch btw',
      '<span class="rainbowtext">RGB Gaming Webpage</span>',
      'MySite.html',
      'Over Construction',
      'Real isopod hours',
      'depytwisty',
      '[object Object]',
      '* You found the [Moss]!',
      'Isopod gaming',
      'Website of "some&nbsp;guy"',
      'your mom',
      'Badly programmed',
      '<span class="flipped">Upside Down!</span>',
      'Oh, you know ;)',
      'gamer (terminal)',
      'This is not a place of honor',
      'ඞ',
      '127.0.0.1',
      'swag',
      '\'\'',
      '<span class="minecraftsplash">Kind of dragon free!</span>',
      'The Only Website',
      'Hover over me!',
      'Water me!'
    );
    $cap = $captions[array_rand($captions)];
  ?>
  <head>
    <meta charset="utf-8">
    <title>Pot</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css">
      :root {
        --top-header-gap: 90px;
        --menuwidth: 140px;
      }
      html, body {
        padding: 0;
        margin: 0;
      }
      h1 {
        width: 250px;
        position: absolute;
        top: var(--top-header-gap);
        text-align: center;
      }
      h2 {
        width: 238px;
        position: absolute;
        top: calc(34px + var(--top-header-gap));
        text-align: right;
        font-size: 1.1em;
      }
      #mainmenu {
        background: #222222;
        font-family: mono, monospace;
        transition-duration: 0.6s;
        height: 250px;
        width: var(--menuwidth);
        position: absolute;
        top: 0;
        left: 250px;
        z-index: 2;
        box-shadow: 0 0 0 black;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      body:hover #mainmenu {
        left: calc(250px - var(--menuwidth));
        box-shadow: 0 0 20px black;
      }
      a {
        color: white;
      }
      #mainmenu a {
        color: #df1955;
      }
      #mainmenu a:hover {
        color: #00ffd5;
      }

      .flipped {
        display: inline-block;
        transform: rotate(180deg);
      }
      .rainbowtext {
          animation-name: rainbow-text;
          animation-duration: 20s;
          animation-iteration-count: infinite;
      }
      .blinking {
          animation-name: opacityblink;
          animation-duration: 2s;
          animation-iteration-count: infinite;
      }
      .minecraftsplash {
          animation-name: growshrink;
          animation-duration: 1.5s;
          animation-iteration-count: infinite;
          color: yellow;
          display: inline-block;
      }

      @keyframes growshrink {
        0%, 100% { transform: scale(1) /*rotate(-10deg)*/; }
        50% { transform: scale(1.2) /*rotate(-10deg)*/; }
      }
      @keyframes opacityblink {
        0%, 50% {opacity: 0;}
        50.001%, 100% {opacity: 1;}
      }
      @keyframes rainbow-text {
        100%,0%{color: rgb(255,0,0); text-shadow: 0 0 4px rgb(216, 1, 1);}
        8%{color: rgb(255,127,0); text-shadow: 0 0 4px rgb(211, 105, 0);}
        16%{color: rgb(255,255,0); text-shadow: 0 0 4px rgb(214, 214, 0);}
        25%{color: rgb(127,255,0); text-shadow: 0 0 4px rgb(105, 211, 0);}
        33%{color: rgb(0,255,0); text-shadow: 0 0 4px rgb(0, 204, 0);}
        41%{color: rgb(0,255,127); text-shadow: 0 0 4px rgb(0, 209, 105);}
        50%{color: rgb(0,255,255); text-shadow: 0 0 4px rgb(0, 202, 202);}
        58%{color: rgb(0,127,255); text-shadow: 0 0 4px rgb(0, 103, 206);}
        66%{color: rgb(0,0,255); text-shadow: 0 0 4px rgb(0, 0, 206);}
        75%{color: rgb(127,0,255); text-shadow: 0 0 4px rgb(103, 0, 206);}
        83%{color: rgb(255,0,255); text-shadow: 0 0 4px rgb(211, 0, 211);}
        91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
      }
      @keyframes arrowwiggle {
        0%,90%,100% {left: 235px;}
        92% {left: 231px;}
      }
      audio {
        display: none;
      }
      #mus:checked ~ audio {
        display: initial;
      }
    </style>
  </head>
  <body>
    <a target="_blank" href="../../">
      <div id="plant" style="background: url('images/webgarden-bg.png');">
        <h1>isopod.cool</h1>
        <h2><?php echo $cap; ?></h2>
        <img src="../../images/autoisopod_small.png" style="width: 70px; position: absolute; transform: scaleX(-1) rotate(-30deg); top: 188px; left: 170px;" />
        <img src="images/bubblecolumn1.gif" style="height: 250px; position: absolute; left: 20px; top: 0;" />
        <span style="position: absolute; top: 4px; left: 235px; animation-name: arrowwiggle; animation-duration: 6s; animation-iteration-count: infinite; width: fit-content; text-align: right;">&lt;<span>
      </div>
    </a>
    <input type="checkbox" id="mus" name="mus" style="display: none;"></input>
    <div id="mainmenu">
      <a target="_blank" href="../../">homepage</a>
      <!--a target="_blank" href="../../desktop.html">$login<span class="blinking">_</span></a-->
      <hr style="width: 30px;">
      <a href="image1.html">images</a>
      <a href="status.php">status</a>
      <label for="mus"><a style="text-decoration: underline; cursor: pointer;">play music</a></label>
    </div>
    <audio controls style="position: absolute; width: calc(100% - 0.4rem); top: 0.2rem; left: 0.2rem; z-index: 5;"><source src="music.mp3" type="audio/mp3"></audio>
  </body>
</html>
