Adding audio files to fp and font

font/index.html

@@ -18,6 +18,9 @@
 
 	<hr/><p><a href="../">sf.me</a> > <a style="color:#bd93f9" href="../blog/">Blog</a> > <a style="color:#bd93f9" href=".">Why I Switched Fonts</a></p>
 	<h1>Why I Switched Fonts</h1>
+	<audio controls>
+		<source src="voiceover.mp3" type="audio/mpeg">
+	</audio>
 	<p style="font-size:110%">Posted on: <strong>4 August 2023</strong></p><p style="font-size:110%">Reading time: <strong><strong>1 min</strong><p style="font-size:110%"></strong>Category: <a style="color:#ff79c6" href="../blog/updates/"><strong>Updates</strong></a></p>
 	<p>This post is just a quick update to announce a hard decision that I have made. I have switched the font on this website from <a href="https://www.jetbrains.com/lp/mono/">JetBrains Mono</a> to <a href="https://en.wikipedia.org/wiki/Courier_(typeface)">Courier New</a>. This change was made because I feel like JetBrains Mono looks more fitting in a terminal because it looks janky on a website. Courier New is a monospace font but still maintains the feeling and look I want from my website.</p>
 	<p>This change has had an unintended benefit. Previously, my website's homepage weighed around 50KB in size which is spectacular. However, what I did not realize was that around 40KB were being taken up by JetBrains Mono. By switching to a default typeface, my website now weighs a shockingly low 12KB. If you would like to view the full GTMetrix report, <a href="website-report.pdf">do so here.</a></p>

fp/index.html

@@ -17,6 +17,9 @@
 	  </a>
 	<hr/><p><a href="../">sf.me</a> > <a style="color:#bd93f9" href="../blog/">Blog</a> > <a style="color:#bd93f9" href=".">Writing With Fountain Pens</a></p>
 	<h1>Writing With Fountain Pens</h1>
+	<audio controls>
+		<source src="voiceover.mp3" type="audio/mpeg">
+	</audio>
 	<p style="font-size:110%">Posted on: <strong>30 July 2023</strong></p><p style="font-size:110%">Reading time: <strong><strong>2 min</strong><p style="font-size:110%"></strong>Category: <a style="color:#ff79c6" href="../blog/other/"><strong>Other</strong></a></p>
 <h3>Table Of Contents</h3>
 

style.css

@@ -9,7 +9,7 @@ figcaption{
     font-size:90%;
     color:#50fa7b 
 }
-.posts,h1,h2,h3,ol,p,ul{
+.posts,h1,h2,h3,ol,p,ul,audio{
     margin-left:8vw 
 }
 .main-header {
@@ -80,7 +80,7 @@ svg.titles {
 body{
     background:#282b35 
 }
-p,ol,ul{
+p,ol,ul,audio{
     margin-right:8vw;
     font-weight:400 
 }
@@ -192,7 +192,7 @@ div.desc{
     width: 100%;
 }
 @media screen and (max-width:1150px){
-    .posts,h1,h2,h3,ol,p,ul{
+    .posts,h1,h2,h3,ol,p,ul,audio{
         margin-left:20px;
         margin-right:20px;
         margin-top:30px