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

<head>
  <meta charset="utf-8">
  <title>Music</title>
  <link href="../../style.css" rel="stylesheet" type="text/css" media="all">
  <style type="text/css">
    #flex-container {
      display: flex;
      flex-wrap: wrap;
      filter: drop-shadow(3px 3px 6px black);
    }
    #flex-container a {
      --columncount: 2;
      position: relative;
      width: calc(var(--bodywidth) / var(--columncount));
      height: calc(var(--bodywidth) / var(--columncount));
      background-image: var(--img);
      background-size: cover;
      transition-duration: 0.5s;
      overflow: hidden;
    }
    #flex-container a:hover {
      z-index: 50;
      box-shadow: 0 0 12px 2px black;
      transform: scale(1.2);
      color: #df1955;
    }
    #flex-container a span {
      background-color: #000000cc;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 5.2rem;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      transition-duration: 0.5s;
      box-sizing: border-box;
    }
    #flex-container a:hover span {
      bottom: -5.2rem;
    }
  </style>
  <?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
</head>

<body>
  <?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); ?>
  <h1>music</h1>
  <h2 id="caption">Albums I like</h2>
  <div id="flex-container">
    <a style="--img: url(covers/spectrum.png);" target="_blank" href="https://findaeden.bandcamp.com/album/spectrum"><span>findaeden - Spectrum</span></a>
    <a style="--img: url(covers/funeral.png);" target="_blank" href="https://noisemaster.bandcamp.com/album/funeral-ep"><span>Noisemaker - Funeral EP</span></a>
    <a style="--img: url(covers/ultrakill_imperfect_hatred.png);" target="_blank" href="https://heavenpierceher.bandcamp.com/album/ultrakill-imperfect-hatred"><span>Heaven Pierce Her - ULTRAKILL: Imperfect Hatred</span></a>
    <a style="--img: url(covers/triangle_unicode.png);" target="_blank" href="https://wearemagonia.bandcamp.com/album/triangle-unicode-lp"><span>We Are Magonia - Triangle Unicode</span></a>
    <a style="--img: url(covers/unstoppable_force.png);" target="_blank" href="https://caliphate.bandcamp.com/album/unstoppable-force"><span>CALIPHATE - Unstoppable Force</span></a>
    <a style="--img: url(covers/walks_of_lung.png);" target="_blank" href="https://patriciataxxon.bandcamp.com/album/walks-of-lung"><span>Patricia Taxxon - Walks of Lung</span></a>
    <a style="--img: url(covers/realign.png);" target="_blank" href="https://vine.bandcamp.com/album/realign"><span>Red Vox - Realign</span></a>
    <a style="--img: url(covers/fucked_up_friends_3.png);" target="_blank" href="https://tobaxxo.bandcamp.com/album/fucked-up-friends-3"><span>TOBACCO - Fucked Up Friends 3</span></a>
    <a style="--img: url(covers/synthicate.png);" target="_blank" href="https://newretrowave.bandcamp.com/album/synthicate"><span>LAZERPUNK - Synthicate</span></a>
    <a style="--img: url(covers/vast.png);" target="_blank" href="https://waterflame.bandcamp.com/album/vast"><span>Waterflame - Vast</span></a>
    <a style="--img: url(covers/tortured_waters.png);" target="_blank" href="https://newretrowave.bandcamp.com/album/tortured-waters"><span>DEADLIFE - Tortured Waters</span></a>
    <a style="--img: url(covers/millenialism.png);" target="_blank" href="https://music.businesscasual.biz/album/millennialism"><span>NYSE - MILLENNIALISM</span></a>
    <a style="--img: url(covers/concrete_and_gold.png);" target="_blank" href="https://www.foofighters.com/"><span>Foo Fighters - Concrete and Gold</span></a>
    <a style="--img: url(covers/revolution_radio.png);" target="_blank" href="https://greenday.com/"><span>Green Day - Revolution Radio</span></a>
    <a style="--img: url(covers/the_last_ninja_2_c64_ost.png);" target="_blank" href="https://www.youtube-nocookie.com/embed/bjbN2RyZXHI"><span>Matt Gray - The Last Ninja 2 (C64) OST</span></a>
    <a style="--img: url(covers/aeon_core.png);" target="_blank" href="https://perctrax.bandcamp.com/album/aeon-core"><span>Scalameriya - Aeon Core</span></a>
  </div>
  <div id="leftsidebg" style="background-image: url(bg.png); --distancefromcenter: -10%;" title="Pictured: Not necessarily the best, but objectively the coolest medium of music storage. Who am I kidding, this just looks cool. The coolest medium of music storage is obviously CDs, on account of the lasers and the ease of making digital backups."></div>
  <br>
  <?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
</body>
</html>