36 files changed, 603 insertions, 121 deletions
diff --git a/data/blogs.json b/data/blogs.json
index bf65d3a..14851b9 100644
--- a/data/blogs.json
+++ b/data/blogs.json
@@ -14,11 +14,6 @@
 			"thumbnail": "/assets/images/blog/33_cover.png",
 			"banner": "/assets/images/blog/33_banner.png",
 			"path": "/data/blogs/1.md"
-		},
-		{
-			"thumbnail": "",
-			"banner": "",
-			"path": "/data/blogs/altaf-devlog-0.md"
 		}
 	]
 }
diff --git a/data/blogs/urban0.md b/data/blogs/urban0.md
index 3ab7917..79c2c73 100644
--- a/data/blogs/urban0.md
+++ b/data/blogs/urban0.md
@@ -7,13 +7,16 @@ tags:
   - Blog
   - Urbanism
 ---
-
+<!--
 +=+=+=
 
 This blog is a work-in-progress.
 # Outline
-* STEM >< Humanities. Overlap.
-* **Urban design** often viewed as engineering, but it's also something human. (What is urban design)
+* ~~STEM >< Humanities. Overlap.~~
+* ~~**Urban design** often viewed as engineering, but it's also something human. (What is urban design)~~
+* We've been thinking of road design too much in an engineering perspective.
+	* ~~Road design is deeply linked to urbanism, an inter-disciplinary study~~
+	* Streets are human spaces, even places!
 * What is **Design Thinking**
 	* STEAM more human, because overlap
 * Importance of design thinking in shaping our urban environment.
@@ -21,12 +24,88 @@ This blog is a work-in-progress.
 	* Singapore negatives, roadway car-centric.
 * In my school, design thinking. MOE pushes for this.
 * So, should be applied more, especially for our urban roads and hence environment.
+* Current positive efforts:
+	* LTMP Refresh (People-centric)
+	* Road repurposing
 * Hi! Who am I?
 
 -+-+-+
 
 +=+=+=
 
-Engineering and humanities are often represented as total counterparts. In universities, diplomas awarded are categorised into two distinct fields, usually sciences and arts.
+Engineering and humanities are often represented as total counterparts. Academic diplomas are categorised into distinct fields, usually sciences and arts. Faculties for engineering and humanities disciplines are often separate. This categorisation does work in a lot of contexts, especially in highly-specialised disciplines fields of both fields. However, this separation does ignore the fact that these two fields very often intersect, and the disciplines within this intersection play an undeniably important role in society.
+
+One major discipline in that intersection is urbanism. I'll use urbanism as a large umbrella term encompassing different disciplines including urban planning and urban design. But basically, I'm talking about how we build our cities. Urbanism may be considered a science discipline as it does touch on architecture, 
+
+-+-+-+
+-->
++=+=+=
+
+![Marine Parade Rd/Tampines Ave 2](path/to/image)
+
+This is a typical road that you may find in Singapore. Four 3.2 m to 3.5 m wide lanes lined with trees and 1.8 m wide footpaths.
+
+The roads and streets of Singapore are widely acclaimed to be world-class. This is definitely true in an engineering perspective. As seen in the picture above, the lanes are nice, wide, smooth, and with clear road markings. Traffic flows smoothly, managed by relatively smart automated traffic lights. Roads are maintained regularly with advanced civil engineering technology to ensure the roads are always in pristine condition.
+
+The traffic engineering in Singapore is definitely world-class. However, I feel like Singapore has been building its streets too much in an engineering lens.
+
+Streets inherently are spaces for humans. A street's function is more than connecting places to places. A street can be a place where people connect with each other. It can be a place where people discover new things around their neighbourhood. There is an inextricable social part in streets. When we ignore it, that is, when we design our streets purely in an engineering perspective (despite the name "traffic engineering), we are reducing a street's functionality from a place for the community to merely a traffic conduit.
+
+![Bedok North St 1, HDBs near Heartbeat @ Bedok](path/to/image)
+
+Or maybe ![Jurong West St 64 (Primary Access Road), near Jurong Pt near HDBs](path/to/image)
+
+Or maybe ![Jurong West St 51 (Primary Access Road), near Boon Lay Place](path/to/image)
+
+This is what I feel like I'm seeing in Singapore. There are many instances where wide 4-lane roads are cutting through town centres of heartlands, despite being categorised as a local access road. Town centres are vibrant places bustling of activities and businesses. Regardless of people's background and age, these are places where people want to spend their time in. Having wide roads cutting through it will make it harder for people to explore and find out about new businesses near that place. It may also be harder for residents living across the road to walk there, despite their close proximity, as wide roads for vehicles can act as a physical barrier that reduces permeability. Not only that, vehicles are polluting, and wide roads that facilitate vehicular movement will make the environment around it more uncomfortable to spend time in, which is contradictory of the characteristics of a town centre.
+
+There is also the impacts on road safety. Conventional road design in Singapore often features wide and straight lanes in arterial roads and local streets. Drivers subconsciously associate these characteristics with faster driving, just like how they would drive in expressways, disregarding the speed limit of that street. In an unfortunate circumstance of a traffic accident, higher speeds will result in more fatal consequences. In fact, the risk of a pedestrian fatality increases exponentially with the collision speed[^1]. Places such as town centres should be a place where people can navigate freely with peace of mind, rather than a high-speed thoroughfare that compromises safety.
+
+As of 2024, the road network in Singapore occupies 12% of Singapore's total land area[^2]. This is a significant portion of land-scarce Singapore, even comparable to the total land area allocated for housing (14%)[^3]. Since road infrastructure in Singapore covers such a large area, making sure that we design our roads and streets correctly, that is designing roads that accommodates the needs of everyone, not just the flow of vehicles, is very important. Therefore, designing our roads and streets with empathy is crucial.
+
+-+-+-+
+
++=+=+=
+
+This is where Design Thinking can come in.
+
+Design thinking generally refers to a methodology that designers can use to ensure that they solve problems by prioritising the needs of the users.[^4] There are numerous frameworks of design thinking out there, but they all generally have a common theme of listening to problems that a target audience faces, and focusing on solving them. This approach of thinking is (HBR plusses?)
+
+The reason of why I am bringing up design thinking is because it is often taught in Singapore schools, at the very least my own school.
+
+
+
+This does show that Singapore does know that even engineering needs to consider the social part of a project, to be able to cater to the users of it. Something along this line.
+
+-+-+-+
+
++=+=+=
+
+Coming back to my point of road design. 
+
+(How road design engineering can be more emphatetic, by appling DT)
+
+So, if the government is pushing the practice of Design Thinking in education, why can't we apply it to how we build our roads?
+
+
+-+-+-+
+
++=+=+=
+
+Hello there!
+
+-+-+-+
+
++=+=+=
+
+**Footnotes and References**
+
+///Footnotes Go Here///
+
+[^1]: [https://road-safety.transport.ec.europa.eu/eu-road-safety-policy/priorities/safe-road-use/safe-speed/archive/speeding/speed-central-issue-road-safety/speed-and-injury-risk-different-speed-levels_en](https://road-safety.transport.ec.europa.eu/eu-road-safety-policy/priorities/safe-road-use/safe-speed/archive/speeding/speed-central-issue-road-safety/speed-and-injury-risk-different-speed-levels_en), accessed 9 Jun 2026
+[^2]: [https://www.mot.gov.sg/news-resources/newsroom/written-reply-to-parliamentary-question-on-land-allocation-for-roads-and-car-parks-since-2010-and-future-policy-considerations/](https://www.mot.gov.sg/news-resources/newsroom/written-reply-to-parliamentary-question-on-land-allocation-for-roads-and-car-parks-since-2010-and-future-policy-considerations/#:~:text=Singapore%E2%80%99s%20road%20network%20occupies%20around%2012%25%20of%20our%20total%20land%20area%20today), accessed 9 Jun 2026
+[^3]: [https://data.gov.sg/datasets/d_0ad604387b5b2dd99fbf48d89cb4f416/view](https://data.gov.sg/datasets/d_0ad604387b5b2dd99fbf48d89cb4f416/view), accessed 9 Jun 2026
+
+-+-+-+
 
--+-+-+
-\ No newline at end of file
+[^4]: [https://reference.nlb.gov.sg/launch/getting-started/product-dev/design-thinking/](https://reference.nlb.gov.sg/launch/getting-started/product-dev/design-thinking/), accessed 9 Jun 2026
diff --git a/markdown_renderer.py b/markdown_renderer.py
index d64fcf2..1e7c755 100644
--- a/markdown_renderer.py
+++ b/markdown_renderer.py
@@ -21,21 +21,29 @@ class DefaultClassExtension(markdown.extensions.Extension):
         md.treeprocessors.register(DefaultClassTreeprocessor(md), "link_class", 2)
 
 
-def md_to_html(raw_content: str) -> str:
+def md_to_html(raw_content: str, text_mode: bool = False) -> str:
     metadata, content = frontmatter.parse(raw_content)
     html_text = markdown.markdown(
         content,
         output_format="html",
-        extensions=["attr_list", "fenced_code", "tables", DefaultClassExtension(), "md_in_html"]
+        extensions=["attr_list", "fenced_code", "tables", DefaultClassExtension(), "md_in_html", "pymdownx.tilde", "footnotes"]
     )
-    html_text = html_text.replace("<p>+-+-+-</p>", '<section><div class="center-grid"><div class="div-sizing">')
-    html_text = html_text.replace("<p>+-+-+-", '<section><div class="center-grid"><div class="div-sizing">')
-    html_text = html_text.replace("+-+-+-</p>", '<section><div class="center-grid"><div class="div-sizing">')
+
+    section_class = ""
+    section_class_only = ""
+
+    if text_mode:
+        section_class = ' class="text-section"'
+        section_class_only = ' text-section'
+
+    html_text = html_text.replace("<p>+-+-+-</p>", f'<section{section_class}><div class="center-grid"><div class="div-sizing">')
+    html_text = html_text.replace("<p>+-+-+-", f'<section{section_class}><div class="center-grid"><div class="div-sizing">')
+    html_text = html_text.replace("+-+-+-</p>", f'<section{section_class}><div class="center-grid"><div class="div-sizing">')
     html_text = html_text.replace("-+-+-+</p>", "</div></div></section>")
     html_text = html_text.replace("<p>-+-+-+", "</div></div></section>")
-    html_text = html_text.replace("<p>+=+=+=</p>", '<section class="normal-section"><div class="center-grid"><div class="div-sizing">')
-    html_text = html_text.replace("<p>+=+=+=", '<section class="normal-section"><div class="center-grid"><div class="div-sizing">')
-    html_text = html_text.replace("+=+=+=</p>", '<section class="normal-section"><div class="center-grid"><div class="div-sizing">')
+    html_text = html_text.replace("<p>+=+=+=</p>", f'<section class="normal-section{section_class_only}"><div class="center-grid"><div class="div-sizing">')
+    html_text = html_text.replace("<p>+=+=+=", f'<section class="normal-section{section_class_only}"><div class="center-grid"><div class="div-sizing">')
+    html_text = html_text.replace("+=+=+=</p>", f'<section class="normal-section{section_class_only}"><div class="center-grid"><div class="div-sizing">')
     html_text = html_text.replace("<p>{{{</p>", '<div class="flex-container gap">')
     html_text = html_text.replace("<p>{{{", '<div class="flex-container gap">')
     html_text = html_text.replace("{{{</p>", '<div class="flex-container gap">')
diff --git a/pages.py b/pages.py
index 163b7c7..7dbbfc7 100644
--- a/pages.py
+++ b/pages.py
@@ -123,7 +123,7 @@ def render_blogpost(blogpost_id: int) -> tuple:
     with open("." + metadata["path"], "r") as f:
         source = f.read()
 
-    _, rendered_content = markdown_renderer.md_to_html(source)
+    _, rendered_content = markdown_renderer.md_to_html(source, True)
     print(metadata, rendered_content)
 
     html = html.replace("{[{content}]}", rendered_content)
diff --git a/templates/blogpost.html b/templates/blogpost.html
index 16f908e..fff7cd5 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -18,9 +18,11 @@
 
 </head>
 
-<body onload="addNodes()">
+<body onload="blogPost();">
+	<script defer src="/scripts/constants.js"></script>
 	<script defer src="/scripts/scroll.js"></script>
 	<script defer src="/scripts/onload.js"></script>
+	<script defer src="/scripts/blog.js"></script>
 	<div class="floating-nav-container">
 		<div class="floating-nav">
 			<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>
@@ -37,8 +39,8 @@
 	</div>
 	<div class="sidebar-progress-container" id="progressContainer">
 	</div>
-	<section style="border-top: none; padding-top: 50px;" class="normal-section">
-		<div class="banner-shadow">
+	<section class="normal-section">
+		<div class="banner-shadow" style="margin-top: 100px;">
 			<img src="" alt="" class="banner img" id="banner">
 		</div>
 		<div class="center-grid">
@@ -55,6 +57,16 @@
 		</div>
 	</section>
 	{[{content}]}
+	<section class="normal-section">
+		<div class="center-grid">
+			<div class="div-sizing">
+				<h1>More Posts</h1>
+				<div id="blog-container" class="flex-container flex-container-column flex-center-content">
+
+				</div>
+			</div>
+		</div>
+	</section>
 </body>
 
 </html>
diff --git a/www/about/index.html b/www/about/index.html
index 5e006e9..039b31b 100644
--- a/www/about/index.html
+++ b/www/about/index.html
@@ -48,7 +48,7 @@
 					<div>
 						<span class="heading">About Me</span>
 						<p>
-							Hey there! I'm <b class="colored-text">Altaf</b>. I am a scholar studying abroad in <b class="colored-text">Singapore</b> from
+							Hey there! I'm Athaalaa <b class="colored-text">Altaf</b> Hafidz. I am a scholar studying abroad in <b class="colored-text">Singapore</b> from
 							<b class="colored-text">Indonesia</b> who likes to <b class="colored-text">create</b> and <b class="colored-text">tinker</b> with computers, usually.
 						</p>
 						<p>
diff --git a/www/assets/fonts/.DS_Store b/www/assets/fonts/.DS_Store
index f0dc920..16fafe0 100644
--- a/www/assets/fonts/.DS_Store
+++ b/www/assets/fonts/.DS_Store
diff --git a/www/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf b/www/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf
new file mode 100644
index 0000000..43ed4f5
--- /dev/null
+++ b/www/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf
diff --git a/www/assets/fonts/Inter-VariableFont_opsz,wght.ttf b/www/assets/fonts/Inter-VariableFont_opsz,wght.ttf
new file mode 100644
index 0000000..e31b51e
--- /dev/null
+++ b/www/assets/fonts/Inter-VariableFont_opsz,wght.ttf
diff --git a/www/assets/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf b/www/assets/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..fb3c626
--- /dev/null
+++ b/www/assets/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf
diff --git a/www/assets/fonts/Roboto-VariableFont_wdth,wght.ttf b/www/assets/fonts/Roboto-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..01656a3
--- /dev/null
+++ b/www/assets/fonts/Roboto-VariableFont_wdth,wght.ttf
diff --git a/www/assets/fonts/inter)README.txt b/www/assets/fonts/inter)README.txt
new file mode 100644
index 0000000..f7a47e8
--- /dev/null
+++ b/www/assets/fonts/inter)README.txt
@@ -0,0 +1,118 @@
+Inter Variable Font
+===================
+
+This download contains Inter as both variable fonts and static fonts.
+
+Inter is a variable font with these axes:
+  opsz
+  wght
+
+This means all the styles are contained in these files:
+  Inter-VariableFont_opsz,wght.ttf
+  Inter-Italic-VariableFont_opsz,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+  static/Inter_18pt-Thin.ttf
+  static/Inter_18pt-ExtraLight.ttf
+  static/Inter_18pt-Light.ttf
+  static/Inter_18pt-Regular.ttf
+  static/Inter_18pt-Medium.ttf
+  static/Inter_18pt-SemiBold.ttf
+  static/Inter_18pt-Bold.ttf
+  static/Inter_18pt-ExtraBold.ttf
+  static/Inter_18pt-Black.ttf
+  static/Inter_24pt-Thin.ttf
+  static/Inter_24pt-ExtraLight.ttf
+  static/Inter_24pt-Light.ttf
+  static/Inter_24pt-Regular.ttf
+  static/Inter_24pt-Medium.ttf
+  static/Inter_24pt-SemiBold.ttf
+  static/Inter_24pt-Bold.ttf
+  static/Inter_24pt-ExtraBold.ttf
+  static/Inter_24pt-Black.ttf
+  static/Inter_28pt-Thin.ttf
+  static/Inter_28pt-ExtraLight.ttf
+  static/Inter_28pt-Light.ttf
+  static/Inter_28pt-Regular.ttf
+  static/Inter_28pt-Medium.ttf
+  static/Inter_28pt-SemiBold.ttf
+  static/Inter_28pt-Bold.ttf
+  static/Inter_28pt-ExtraBold.ttf
+  static/Inter_28pt-Black.ttf
+  static/Inter_18pt-ThinItalic.ttf
+  static/Inter_18pt-ExtraLightItalic.ttf
+  static/Inter_18pt-LightItalic.ttf
+  static/Inter_18pt-Italic.ttf
+  static/Inter_18pt-MediumItalic.ttf
+  static/Inter_18pt-SemiBoldItalic.ttf
+  static/Inter_18pt-BoldItalic.ttf
+  static/Inter_18pt-ExtraBoldItalic.ttf
+  static/Inter_18pt-BlackItalic.ttf
+  static/Inter_24pt-ThinItalic.ttf
+  static/Inter_24pt-ExtraLightItalic.ttf
+  static/Inter_24pt-LightItalic.ttf
+  static/Inter_24pt-Italic.ttf
+  static/Inter_24pt-MediumItalic.ttf
+  static/Inter_24pt-SemiBoldItalic.ttf
+  static/Inter_24pt-BoldItalic.ttf
+  static/Inter_24pt-ExtraBoldItalic.ttf
+  static/Inter_24pt-BlackItalic.ttf
+  static/Inter_28pt-ThinItalic.ttf
+  static/Inter_28pt-ExtraLightItalic.ttf
+  static/Inter_28pt-LightItalic.ttf
+  static/Inter_28pt-Italic.ttf
+  static/Inter_28pt-MediumItalic.ttf
+  static/Inter_28pt-SemiBoldItalic.ttf
+  static/Inter_28pt-BoldItalic.ttf
+  static/Inter_28pt-ExtraBoldItalic.ttf
+  static/Inter_28pt-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/www/assets/fonts/inter_OFL.txt b/www/assets/fonts/inter_OFL.txt
new file mode 100644
index 0000000..d05ec4b
--- /dev/null
+++ b/www/assets/fonts/inter_OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/www/assets/fonts/roboto_OFL.txt b/www/assets/fonts/roboto_OFL.txt
new file mode 100644
index 0000000..a417551
--- /dev/null
+++ b/www/assets/fonts/roboto_OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/www/assets/fonts/roboto_README.txt b/www/assets/fonts/roboto_README.txt
new file mode 100644
index 0000000..26368fa
--- /dev/null
+++ b/www/assets/fonts/roboto_README.txt
@@ -0,0 +1,118 @@
+Roboto Variable Font
+====================
+
+This download contains Roboto as both variable fonts and static fonts.
+
+Roboto is a variable font with these axes:
+  wdth
+  wght
+
+This means all the styles are contained in these files:
+  Roboto-VariableFont_wdth,wght.ttf
+  Roboto-Italic-VariableFont_wdth,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Roboto:
+  static/Roboto_Condensed-Thin.ttf
+  static/Roboto_Condensed-ExtraLight.ttf
+  static/Roboto_Condensed-Light.ttf
+  static/Roboto_Condensed-Regular.ttf
+  static/Roboto_Condensed-Medium.ttf
+  static/Roboto_Condensed-SemiBold.ttf
+  static/Roboto_Condensed-Bold.ttf
+  static/Roboto_Condensed-ExtraBold.ttf
+  static/Roboto_Condensed-Black.ttf
+  static/Roboto_SemiCondensed-Thin.ttf
+  static/Roboto_SemiCondensed-ExtraLight.ttf
+  static/Roboto_SemiCondensed-Light.ttf
+  static/Roboto_SemiCondensed-Regular.ttf
+  static/Roboto_SemiCondensed-Medium.ttf
+  static/Roboto_SemiCondensed-SemiBold.ttf
+  static/Roboto_SemiCondensed-Bold.ttf
+  static/Roboto_SemiCondensed-ExtraBold.ttf
+  static/Roboto_SemiCondensed-Black.ttf
+  static/Roboto-Thin.ttf
+  static/Roboto-ExtraLight.ttf
+  static/Roboto-Light.ttf
+  static/Roboto-Regular.ttf
+  static/Roboto-Medium.ttf
+  static/Roboto-SemiBold.ttf
+  static/Roboto-Bold.ttf
+  static/Roboto-ExtraBold.ttf
+  static/Roboto-Black.ttf
+  static/Roboto_Condensed-ThinItalic.ttf
+  static/Roboto_Condensed-ExtraLightItalic.ttf
+  static/Roboto_Condensed-LightItalic.ttf
+  static/Roboto_Condensed-Italic.ttf
+  static/Roboto_Condensed-MediumItalic.ttf
+  static/Roboto_Condensed-SemiBoldItalic.ttf
+  static/Roboto_Condensed-BoldItalic.ttf
+  static/Roboto_Condensed-ExtraBoldItalic.ttf
+  static/Roboto_Condensed-BlackItalic.ttf
+  static/Roboto_SemiCondensed-ThinItalic.ttf
+  static/Roboto_SemiCondensed-ExtraLightItalic.ttf
+  static/Roboto_SemiCondensed-LightItalic.ttf
+  static/Roboto_SemiCondensed-Italic.ttf
+  static/Roboto_SemiCondensed-MediumItalic.ttf
+  static/Roboto_SemiCondensed-SemiBoldItalic.ttf
+  static/Roboto_SemiCondensed-BoldItalic.ttf
+  static/Roboto_SemiCondensed-ExtraBoldItalic.ttf
+  static/Roboto_SemiCondensed-BlackItalic.ttf
+  static/Roboto-ThinItalic.ttf
+  static/Roboto-ExtraLightItalic.ttf
+  static/Roboto-LightItalic.ttf
+  static/Roboto-Italic.ttf
+  static/Roboto-MediumItalic.ttf
+  static/Roboto-SemiBoldItalic.ttf
+  static/Roboto-BoldItalic.ttf
+  static/Roboto-ExtraBoldItalic.ttf
+  static/Roboto-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/www/assets/fonts/static/JetBrainsMono-Bold.ttf b/www/assets/fonts/static/JetBrainsMono-Bold.ttf
deleted file mode 100644
index b748437..0000000
--- a/www/assets/fonts/static/JetBrainsMono-Bold.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-BoldItalic.ttf b/www/assets/fonts/static/JetBrainsMono-BoldItalic.ttf
deleted file mode 100644
index 0091142..0000000
--- a/www/assets/fonts/static/JetBrainsMono-BoldItalic.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-ExtraBold.ttf b/www/assets/fonts/static/JetBrainsMono-ExtraBold.ttf
deleted file mode 100644
index 88eab2f..0000000
--- a/www/assets/fonts/static/JetBrainsMono-ExtraBold.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-ExtraBoldItalic.ttf b/www/assets/fonts/static/JetBrainsMono-ExtraBoldItalic.ttf
deleted file mode 100644
index 85e67db..0000000
--- a/www/assets/fonts/static/JetBrainsMono-ExtraBoldItalic.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-ExtraLight.ttf b/www/assets/fonts/static/JetBrainsMono-ExtraLight.ttf
deleted file mode 100644
index 1f73714..0000000
--- a/www/assets/fonts/static/JetBrainsMono-ExtraLight.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-ExtraLightItalic.ttf b/www/assets/fonts/static/JetBrainsMono-ExtraLightItalic.ttf
deleted file mode 100644
index 745b58e..0000000
--- a/www/assets/fonts/static/JetBrainsMono-ExtraLightItalic.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-Italic.ttf b/www/assets/fonts/static/JetBrainsMono-Italic.ttf
deleted file mode 100644
index 5b484dd..0000000
--- a/www/assets/fonts/static/JetBrainsMono-Italic.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-Light.ttf b/www/assets/fonts/static/JetBrainsMono-Light.ttf
deleted file mode 100644
index 296186f..0000000
--- a/www/assets/fonts/static/JetBrainsMono-Light.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-LightItalic.ttf b/www/assets/fonts/static/JetBrainsMono-LightItalic.ttf
deleted file mode 100644
index 399ede7..0000000
--- a/www/assets/fonts/static/JetBrainsMono-LightItalic.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-Medium.ttf b/www/assets/fonts/static/JetBrainsMono-Medium.ttf
deleted file mode 100644
index ad31fbd..0000000
--- a/www/assets/fonts/static/JetBrainsMono-Medium.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-MediumItalic.ttf b/www/assets/fonts/static/JetBrainsMono-MediumItalic.ttf
deleted file mode 100644
index 4f499f2..0000000
--- a/www/assets/fonts/static/JetBrainsMono-MediumItalic.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-Regular.ttf b/www/assets/fonts/static/JetBrainsMono-Regular.ttf
deleted file mode 100644
index 02bc07e..0000000
--- a/www/assets/fonts/static/JetBrainsMono-Regular.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-SemiBold.ttf b/www/assets/fonts/static/JetBrainsMono-SemiBold.ttf
deleted file mode 100644
index c3adfd3..0000000
--- a/www/assets/fonts/static/JetBrainsMono-SemiBold.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-SemiBoldItalic.ttf b/www/assets/fonts/static/JetBrainsMono-SemiBoldItalic.ttf
deleted file mode 100644
index 62d58ad..0000000
--- a/www/assets/fonts/static/JetBrainsMono-SemiBoldItalic.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-Thin.ttf b/www/assets/fonts/static/JetBrainsMono-Thin.ttf
deleted file mode 100644
index 6a6a556..0000000
--- a/www/assets/fonts/static/JetBrainsMono-Thin.ttf
+++ /dev/null
diff --git a/www/assets/fonts/static/JetBrainsMono-ThinItalic.ttf b/www/assets/fonts/static/JetBrainsMono-ThinItalic.ttf
deleted file mode 100644
index 33a23d7..0000000
--- a/www/assets/fonts/static/JetBrainsMono-ThinItalic.ttf
+++ /dev/null
diff --git a/www/index.html b/www/index.html
index 74ba9a8..ce89d90 100644
--- a/www/index.html
+++ b/www/index.html
@@ -49,7 +49,7 @@
 	<span class="home-title" style="z-index: 0;">Altaf</span>
 	<div class="home-img" style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); ">
 	</div>
-	<a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity &#8599;</a>
+	<a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link monospaced">simpliCity &#8599;</a>
 	</section>
 	<section>
 		<div class="center-grid">
diff --git a/www/projects/index.html b/www/projects/index.html
index 6593c0d..7a3b920 100644
--- a/www/projects/index.html
+++ b/www/projects/index.html
@@ -356,7 +356,7 @@
 								<a href="/video/stringsoffreedom/" class="video-play-cover">⏵</a>
 							</div>
 							<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
-								<a href="/video/stringsoffreedom/" class="link">Strings of Freedom</a>
+								<a href="/video/stringsoffreedom/" class="link monospaced">Strings of Freedom</a>
 								<span>(2025) Top Winning Submission for Yellow Ribbon Arts Competition 2025.</span>
 							</div>
 						</div>
@@ -366,7 +366,7 @@
 								<a href="/video/minds/" class="video-play-cover">⏵</a>
 							</div>
 							<div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
-								<a href="/video/minds/" class="link">MINDS Charity Car Wash Promotional</a>
+								<a href="/video/minds/" class="link monospaced">MINDS Charity Car Wash Promotional</a>
 								<span>(2025) Volunteer work with MINDS to promote their Charity Car Wash in 2025.</span>
 							</div>
 						</div>
@@ -376,7 +376,7 @@
 								<a href="/video/paperverse/" class="video-play-cover">⏵</a>
 							</div>
 							<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content">
-								<a href="/video/paperverse/" class="link">Paperverse Hub</a>
+								<a href="/video/paperverse/" class="link monospaced">Paperverse Hub</a>
 								<span>2026</span>
 							</div>
 						</div>
@@ -386,7 +386,7 @@
 								<a href="/video/eid2026" class="video-play-cover">⏵</a>
 							</div>
 							<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
-								<a href="/video/eid2026/" class="link">A message for this Eid</a>
+								<a href="/video/eid2026/" class="link monospaced">A message for this Eid</a>
 								<span>2026</span>
 							</div>
 						</div>
@@ -396,7 +396,7 @@
 								<a href="/video/openhouse/" class="video-play-cover">⏵</a>
 							</div>
 							<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
-								<a href="/video/openhouse/" class="link">Ngee Ann Open House 2025</a>
+								<a href="/video/openhouse/" class="link monspaced">Ngee Ann Open House 2025</a>
 								<span><i class="fa-solid fa-people-group"></i> 2025</span>
 							</div>
 						</div>
@@ -406,7 +406,7 @@
 								<a href="/video/s3via/" class="video-play-cover">⏵</a>
 							</div>
 							<div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
-								<a href="/video/s3via/" class="link">Secondary 3 VIA Project</a>
+								<a href="/video/s3via/" class="link monospaced">Secondary 3 VIA Project</a>
 								<span>2025</span>
 							</div>
 						</div>
diff --git a/www/scripts/constants.js b/www/scripts/constants.js
index b2b7894..1c2812e 100644
--- a/www/scripts/constants.js
+++ b/www/scripts/constants.js
@@ -1,2 +1,2 @@
-//const API_URL = "https://altafcreator.com/api"
-const API_URL = "http://localhost:9091/api"
+const API_URL = "https://altafcreator.com/api"
+//const API_URL = "http://localhost:9091/api"
diff --git a/www/scripts/onload.js b/www/scripts/onload.js
index 1e15e8e..3bc9cf3 100644
--- a/www/scripts/onload.js
+++ b/www/scripts/onload.js
@@ -28,3 +28,8 @@ function library() {
 	postList();
 	addNodes();
 }
+
+function blogPost() {
+	postList(3);
+	addNodes();
+}
diff --git a/www/style.css b/www/style.css
index bde18b8..a238263 100644
--- a/www/style.css
+++ b/www/style.css
@@ -1,104 +1,28 @@
 @font-face {
 	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-Thin.ttf") format("truetype");
-	font-weight: 100;
+	src: url("/assets/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
+	font-weight: 100 800;
+	font-style: normal;
 }
 
 @font-face {
 	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-ExtraLight.ttf") format("truetype");
-	font-weight: 200;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-Light.ttf") format("truetype");
-	font-weight: 300;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-Regular.ttf") format("truetype");
-	font-weight: 400;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-Medium.ttf") format("truetype");
-	font-weight: 500;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-SemiBold.ttf") format("truetype");
-	font-weight: 600;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-Bold.ttf") format("truetype");
-	font-weight: 700;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-ExtraBold.ttf") format("truetype");
-	font-weight: 800;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-ThinItalic.ttf") format("truetype");
-	font-weight: 100;
+	src: url("/assets/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
+	font-weight: 100 800;
 	font-style: italic;
 }
 
 @font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-ExtraLightItalic.ttf") format("truetype");
-	font-weight: 200;
-	font-style: italic;
+	font-family: "Inter";
+	src: url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
+	font-weight: 100 900;
+	font-style: normal;
 }
 
 @font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-LightItalic.ttf") format("truetype");
-	font-weight: 300;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-Italic.ttf") format("truetype");
-	font-weight: 400;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-MediumItalic.ttf") format("truetype");
-	font-weight: 500;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-SemiBoldItalic.ttf") format("truetype");
-	font-weight: 600;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-BoldItalic.ttf") format("truetype");
-	font-weight: 700;
-	font-style: italic;
-}
-
-@font-face {
-	font-family: "JetBrains Mono";
-	src: url("/assets/fonts/static/JetBrainsMono-ExtraBoldItalic.ttf") format("truetype");
-	font-weight: 800;
+	font-family: "Inter";
+	src: url("/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
+	font-weight: 100 900;
 	font-style: italic;
 }
 
@@ -127,18 +51,20 @@ body {
 	padding: 0;
 	height: 100vh;
 	width: 100%;
-	font-family: 'JetBrains Mono', monospace;
+	font-family: "Inter", serif;
 	word-wrap: break-word;
 	text-overflow: ellipsis;
 }
 
 h1 {
 	font-size: 1.7rem;
+	font-family: "JetBrains Mono", monospace;
 }
 
 h2 {
 	font-size: 1.4rem;
 	font-weight: normal;
+	font-family: "JetBrains Mono", monospace;
 }
 
 section {
@@ -183,6 +109,11 @@ li {
 	line-height: 1.6rem;
 }
 
+img {
+	font-size: 0.9rem;
+	color: #000000AA;
+}
+
 .desktop {
 	visibility: visible !important;
 }
@@ -220,12 +151,17 @@ li {
 	padding-bottom: 50px;
 }
 
+.text-section > .center-grid > .div-sizing {
+	max-width: 80ch;
+}
+
 .heading {
 	font-size: 2.5rem;
 	font-weight: 600;
 	display: block;
 	margin-top: 1rem;
 	margin-bottom: 1rem;
+	font-family: "JetBrains Mono", monospace;
 }
 
 .colored-text {
@@ -239,6 +175,10 @@ li {
 	color: rgba(0, 0, 0, 0.5);
 }
 
+.monospaced {
+	font-family: "JetBrains Mono", monospace;
+}
+
 .floating-nav-container {
 	display: block;
 	position: fixed;
@@ -257,6 +197,7 @@ li {
 	gap: 20px;
 	align-items: center;
 	clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px));
+	font-family: "JetBrains Mono", monospace;
 }
 
 .sidebar {
@@ -270,6 +211,7 @@ li {
 	flex-direction: column;
 	align-items: center;
 	transition: left .3s;
+	font-family: "JetBrains Mono", monospace;
 }
 
 .sidebar > span {
@@ -356,6 +298,7 @@ li {
 	animation-name: title;
 	animation-duration: 3s;
 	user-select: none;
+	font-family: "JetBrains Mono", monospace;
 }
 
 .div-sizing {
@@ -392,6 +335,7 @@ li {
 .big-text {
 	font-size: clamp(1rem, -0.875rem + 30vw, 2rem);
 	max-width: 80%;
+	font-family: "JetBrains Mono", monospace;
 }
 
 .link {
@@ -501,6 +445,7 @@ li {
 	display: block;
 	color: white;
 	box-sizing: border-box;
+	font-family: "JetBrains Mono", monospace;
 }
 
 .item-left {
@@ -566,6 +511,7 @@ li {
 	flex-direction: column;
 	margin-right: 8px;
 	pointer-events: none;
+	font-family: "JetBrains Mono", monospace;
 }
 
 .full-img-card.highlight-card:hover {
@@ -713,6 +659,7 @@ li {
 	box-shadow: none;
 	position: relative;
 	align-content: center;
+	font-family: "JetBrains Mono", monospace;
 }
 
 .button-alt {
@@ -1303,6 +1250,7 @@ li {
 	background: linear-gradient(180deg, transparent calc(100% - 2px), white 0);
 	font-size: large;
 	color: white;
+	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 #simpliCity-link:hover {
@@ -1347,6 +1295,19 @@ li {
 	clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px));
 }
 
+.footnote {
+	font-size: .9rem;
+	opacity: .75;
+}
+
+li:target {
+	background-color: color-mix(in srgb, var(--accent1) 25%, transparent);
+}
+
+.footnote > hr {
+	display: none;
+}
+
 @media only screen and (max-width: 600px) {
 	.desktop {
 		visibility: collapse !important;