remorse

css

const button = document.querySelector("#button");
const icon = document.querySelector("#button > i");
const audio = document.querySelector("audio");

button.addEventListener("click", () => {
 if (audio.paused) {
 audio.volume = 0.2;
 audio.play();
 icon.classList.remove('fa-volume-up');
 icon.classList.add('fa-volume-mute');

 } else {
 audio.pause();
 icon.classList.remove('fa-volume-mute');
 icon.classList.add('fa-volume-up');
 }
 button.classList.add("fade");
});

style

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body{height:100%;width:100%;background-color:#888c8d;overflow:hidden;margin:0px;user-select:none;display:flex;justify-content:center;align-items:center;}
a{text-decoration:none; color: #FFD700; transition: all 2s;}
      a:hover{color:#Aa0808; transition:all .9s;}

	audio {
	 display:none;
	}

	button {
	 font-size: 26px;
	 color: red;
	 position: absolute;
	 bottom: 180px;
	 left: 813px;
	 width: 50px;
	 padding: 15px;
	 border: none;
	 border-radius: 2px;
	 outline: none;
	 background: transparent;
	 opacity: 0.8;
	 cursor: pointer;
	 transition: all 0.4s ease-out;
	 z-index:1000;
	}
button:hover{color:gold; transition:all .5s;}

hr {
    	height: 8px;
    	background-image: linear-gradient(90deg, transparent, #222, transparent);
    	border: 0;
    	height: 3px;
}
u {
	text-decoration:none;
	background-color:#222;
	padding:2px;
	color:#b4abb0;
	line-height:18px;
	}
::-webkit-scrollbar {
display: none;
}
l {font-weight: bold;
color: #163B48;
text-transform: uppercase;}
b {color: #000;
}
i {color: #Aa0808;}

body

<div style="position: absolute;height: 450px;width: 400px;">
<center>wip.</center>
<button id="button"><img src="https://www.pngmart.com/files/13/Glowing-Angel-Halo-PNG-Pic.png" style="margin-bottom:276px;margin-left:-1375px;height:100px;"> </button>
</div>
<div style="position:absolute;padding: 5px 0px 10px 10px;height: 140px;width: 190px;margin-top: -333px;margin-left: 511px;font-family: 'Bebas Neue', cursive;font-size: 18px;line-height: 14px;color:#fff;">
<center>At first, the <b>god</B> who bore such sadness in his heart for his creation had birthed them into existance, <i>remorse</i>.<Br><br>An angel affectionatly referred to as <b>Eitan</B>, tasked to oversee those who come into guilt for their crimes against the maker. Often, Eitan would find pity on these lost souls and guide them back into the light.<br><br>They are <b>timeless</b>, male presenting yet the support neither of any genitalia, and a loyal <a target="_blank" href="https://i.imgur.com/xiW0snh.png" title="Our father who art in heaven ...">seraphim</a> to the <i>One Above All</i>.</center>
</div>
<div style="position:absolute;padding: 5px 0px 10px 10px;height: 140px;width: 190px;margin-top: 230px;margin-left: -688px;font-family: 'Bebas Neue', cursive;font-size: 18px;line-height: 15px;color:#fff;z-index:1;">
"Immortality is a fickle thing, always seeing the love of your life pass your eyes. It changes you - it turns you cold. It makes you a constant thinker, to think of what is <b>right</b> or <i>wrong</i>. Sometimes, at the end of those thoughts ... one could wish they <i>never existed.</i>"
</div>
<img src="https://i.pinimg.com/564x/ed/37/28/ed3728533a068b9ba746fbb33ddaedff.jpg" style="position:absolute;margin-bottom:0px;margin-left:-50px;height:748px;">
</div>
 <audio controls loop><source src="https://dl.dropboxusercontent.com/s/718hvfypkutso6s/Post%20Malone%20-%20Reputation%20%28Audio%29.mp3?dl=0"></audio>