 <!DOCTYPE html>

<html>
<head>

<title>Airglow.</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<style>

a:link {color:#000000; background-color:transparent; text-decoration:underline; color:Orange;}
a:visited {color:#000000; background-color:transparent; text-decoration:none; color:Orange;}
a:hover {color:#000000; background-color:transparent; text-decoration:none; color:DeepSkyBlue;}
a:active {color:#000000; background-color:transparent; text-decoration:none;color:DeepSkyBlue;}

body {
    background-color: #000000; 
    background-image: url("lighthouse-background.jpg"); 
    background-size: 60%, 60%; background-attachment: fixed; 
    background-repeat: no-repeat; 
    color: White; 
    background-position: 50%, 50%; 
    width: 100%;
    padding: 0;
    position: absolute;
    top: 49%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 15px; 
    font-family: Candara, Arial, sans-serif;
}

p {font-size: 80%;}
pa {font-size: 65%;}
p2 {font-size: 75%;}
p3 {left: 50%; margin-right: -50%; transform: translate(-50%, -50%); position: fixed;}

div.intro {float: left; width: 5%; padding-right: 2.5%; color: black;}

div.content {margin-left:18.875%; margin-right:18.875%; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: rgba(0, 0, 0, 0.3); color: White; width: 62.25%; text-align: center;}

div.email {position: fixed; right: 7.5%; text-align: right; background-color: rgba(0, 0, 0, 0); color: White;}



button.collapsible {
    background-color: rgba(0, 0, 0, 0.3);
    color: White;
    padding: 10px;
    width: 24%;
    border: none;
    outline: none;
    font-size: 15px;
    margin-left: 37.5%;
    font-family: Candara, Arial, sans-serif;
    display: block;
}

.active, .collapsible:hover {
   background-color: rgba(0, 0, 0, 0);

}

.collapsible:after {
    content: '\002B';
    background-color: rgba(0, 0, 0, 0);
    color: White;
    font-weight: bold;
    float: right;

}

.active:after {
    content: "\2212";
    background-color: rgba(0, 0, 0, 0);
    color:White;
}

</style>   


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.86">

</head>

<body>



<button class="collapsible">About.</button>
<div class="content">
<p>An audacious wayfarer, reserved wisenheimer, curious jester. A theorist of austeric simplicity, a pragmatist in collective human consciousness, nurturing a lifelong passion project. 

</p>
</div>

<br><br>


<button class="collapsible">Music.</button>
<div class="content">

<p>

<a href="music/65.3.mp3">65.3, Space Wander.</a>&nbsp;&nbsp;c.2017
<br>
<a href="music/MM.mp3">Posthumous, before Circles.</a>&nbsp;&nbsp;c.2018
<br>
<a href="music/xlxf.mp3">XLP, est.</a>&nbsp;&nbsp;c.2021


</p>

</div>

<div style="height: 20px;"></div> <!-- Spacer div -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<button class="collapsible">Postscript.</button>
<div class="content">
<p>

A light sought over a lifetime's span.

</p>

</div>

<br><br><br><br><br>

<p3>
      <audio controls>
         <source src = "music/Lightseeker.mp3" type = "audio/mpeg">
      </audio>
</p3>

<br><br><br><br><br>
<div class="email">

<p> Need to find me? <a href="mailto:ez@ethy.me" target="_top">ez@ethy.me</a>.</p>
<p2> 08.25.2024 </p2>
</div>



<script>

var coll = document.getElementsByClassName("collapsible");
var i;

for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>






</html>