diff --git a/drawings/avatars/akirapink_akira_swordfighter.png b/drawings/avatars/akirapink_akira_swordfighter.png
new file mode 100644
index 0000000..1810d9f
Binary files /dev/null and b/drawings/avatars/akirapink_akira_swordfighter.png differ
diff --git a/graphic_design/watermark-os16-dark.png b/graphic_design/watermark-os16-dark.png
index b2f22eb..a6d35e4 100644
Binary files a/graphic_design/watermark-os16-dark.png and b/graphic_design/watermark-os16-dark.png differ
diff --git a/graphic_design/watermark-os16-light.png b/graphic_design/watermark-os16-light.png
index 8648853..aa49b43 100644
Binary files a/graphic_design/watermark-os16-light.png and b/graphic_design/watermark-os16-light.png differ
diff --git a/graphic_design/watermark-os16.xcf b/graphic_design/watermark-os16.xcf
index d6e5c34..56c82ed 100644
Binary files a/graphic_design/watermark-os16.xcf and b/graphic_design/watermark-os16.xcf differ
diff --git a/webdev/website_16/InterFrozen.ttf b/webdev/website_16/InterFrozen.ttf
new file mode 100644
index 0000000..511245d
Binary files /dev/null and b/webdev/website_16/InterFrozen.ttf differ
diff --git a/webdev/website_16/InterFrozen_Italic.ttf b/webdev/website_16/InterFrozen_Italic.ttf
new file mode 100644
index 0000000..f2168b5
Binary files /dev/null and b/webdev/website_16/InterFrozen_Italic.ttf differ
diff --git a/webdev/website_16/anders-drange-_EhcsvdBwz0-unsplash.jpg b/webdev/website_16/anders-drange-_EhcsvdBwz0-unsplash.jpg
deleted file mode 100644
index c2301c5..0000000
Binary files a/webdev/website_16/anders-drange-_EhcsvdBwz0-unsplash.jpg and /dev/null differ
diff --git a/webdev/website_16/archive.html b/webdev/website_16/archive.html
new file mode 100644
index 0000000..e69de29
diff --git a/webdev/website_16/olga-thelavart-vS3idIiYxX0-unsplash.jpg b/webdev/website_16/bg.jpg
similarity index 99%
rename from webdev/website_16/olga-thelavart-vS3idIiYxX0-unsplash.jpg
rename to webdev/website_16/bg.jpg
index be74f01..7d2f4de 100644
Binary files a/webdev/website_16/olga-thelavart-vS3idIiYxX0-unsplash.jpg and b/webdev/website_16/bg.jpg differ
diff --git a/webdev/website_16/bg.png b/webdev/website_16/bg.png
new file mode 100644
index 0000000..2359210
Binary files /dev/null and b/webdev/website_16/bg.png differ
diff --git a/webdev/website_16/diamond.png b/webdev/website_16/diamond.png
new file mode 100644
index 0000000..9644f63
Binary files /dev/null and b/webdev/website_16/diamond.png differ
diff --git a/webdev/website_16/index.html b/webdev/website_16/index.html
new file mode 100644
index 0000000..57eb0c0
--- /dev/null
+++ b/webdev/website_16/index.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html><html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>akira.pink</title>
+<meta name="description" content="akirapink's website">
+<meta name="keywords" content="marbelynrye,marbel,akirapink,akira,last human on the internet">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" type="image/x-icon" href="pfp.png"> <!--you-->
+<style>
+/* font imports */
+@font-face {
+  font-family: "InterFrozen";
+  src: url("InterFrozen.ttf");
+  font-style: normal;
+}
+@font-face {
+  font-family: "InterFrozen";
+  src: url("InterFrozen_Italic.ttf");
+  font-style: italic;
+}
+p,h1,h2,h3,h4,h4,h5,h6{
+  margin: 0;
+  /* i hate margins on text elements */
+}
+*{ /*important rule, this makes everything obey your exact width height specifications (don't think about it too much)*/
+  box-sizing: border-box;
+}
+body,html{
+  /* making the webpage screen-sized so the background isn't cut off */
+  width: 100%;
+  height: 100%;
+  /* default styling puts margins like documents in word (we don't need that) */
+  margin: 0px;
+  padding: 0px;
+}
+body{
+  font-family: "InterFrozen";
+  overflow-y: auto;
+}
+#header{
+  /* minimum height, if text starts to form new lines it will become taller to fit the bio and name */
+  /* squish the website sideways to test */
+    /* A little buggy? Last line clips into Last Updated text. I get why though
+      /* how about now */
+        /* Better!! but, weird: Now the polaroid stripes get cut off >< */
+          /* would you send a screenshot... */
+            /* Byeah. I feel like a professional "Ideas Perso" and it kind of sucks to be that */
+             /* ,  er*/
+  min-height: 232px;
+  background: blue;
+  background: url("bg.png") center/cover, darkviolet; /*blue fallback*/
+  image-rendering: optimizeQuality;
+  /* padding so the polaroid doesn't touch */
+  padding-left: 31px; 
+  padding-bottom: 31px;
+  /* grid  makes things go horisontally here (flex (or flexbox) can do it too but who cares!!) */
+  display: grid;
+  grid-template-columns: max-content auto max-content;
+  column-gap: 30px;
+  /* put a alpha mask to do the triangle cuts, this might not be supported in every browser, it will default to a regular square as a fallback */
+  mask-image: url("diamond.png"), linear-gradient(to bottom, white, white 0 calc(100% - 11px),transparent 0 100%);
+  mask-position: 9px 100%,top;
+  mask-repeat: repeat-x;
+  mask-mode: alpha;
+  mask-type: alpha;
+  /* main page overlay stuff */
+  position: relative;
+  z-index: 1;
+}
+#polaroidContainer{
+  width: 105px;
+  /* the stripes, 56px wide */
+  background: linear-gradient(to right, #ff4de6 0 25%,#ffec4d 25% 50%,#ff955b 50% 75%,#886fed 75% 100%) center/56px 100% no-repeat;
+  /* convenient code that makes things inside centered */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* make it go beyond the padding-bottom */
+  margin-bottom: -31px;
+}
+#polaroid{
+  height: 126px;
+  width: 100%;
+  background: white;
+  padding: 5px;
+  image-rendering: optimizeQuality;
+  overflow: hidden;
+}
+#titles{
+  color: white;
+  height: 100%;
+  padding-top: 60px;
+  padding-bottom: 40px;
+  line-height: 1.1;
+  text-rendering: optimizeLegibility;
+  /* you might like this? */
+  text-shadow: 2px 2px 0 black;
+  z-index: 1;
+}
+#title{
+  font-size: 45px;
+  font-weight: 800;
+}
+#bio{
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+sub{
+  vertical-align: text-bottom;
+  font-size: 0.6em;
+  color: skyblue;
+}
+/* shrink title if screen is too tiny */
+@media screen and not (min-width: 810px) {
+  #title{font-size: 6vw;}
+}
+#links{
+  display: flex;
+  flex-flow: column;
+  width: 202px;
+  height: 100%;
+  padding-top: 10px;
+  /* this gets rid of typical list item dots */
+  list-style: none;
+  font-size: 19px;
+  font-weight: 700;
+  row-gap: 0.3em;
+  letter-spacing: -0.7px;
+}
+#links a{
+  /* make anchors (links) not make text blue */
+  color: inherit;
+  text-decoration: none;
+}
+#links>li{
+  /* variable for convenience */
+  --color: white;
+  color: var(--color);
+  border-bottom: 5px solid var(--color);
+}
+/* header stuff done! */
+#main{
+  /* max width, it won't stretch the whole page but it will shrink for mobile devices (maybe) */
+  max-width: 500px;
+  min-height: 751px;
+  /* umm your paper png was way more beige for some reason so i put a filter and correction gradient */
+  background: 
+    linear-gradient(to bottom,rgba(255,255,255,0.75),rgba(255,255,255,0.75)), 
+    url("paper.png") top center/cover, 
+    lightgray /*if the paper image fails to load it will be light gray this is helping me see right now*/ /*Thank you! I see + sorry*/ /**/
+  ;
+  image-rendering: optimizeQuality;
+  filter: grayscale(1);
+  /* ancient and convenient way to center stuff horisontally */
+  margin: auto;
+  /* we need it to overlay the header */
+  position: relative;
+  z-index: 2;
+  margin-top: -45px;
+  /* ... */
+  padding: 12px;
+  /* to fix #content not hitting height:100% ugh */
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: max-content auto;
+}
+#docheader{
+  width: 100%;
+  height: fit-content;
+  border: 1px solid gray;
+  display: grid;
+  grid-template-columns: max-content auto;
+  grid-template-rows: 50% 50%;
+}
+#docheader>p{
+  font-size: 20px;
+  line-height: 1.0;
+  padding: 3px;
+  letter-spacing: 1px;
+}
+#content{
+  border: 1px solid gray;
+  border-top: none;
+  padding: 3px;
+  font-size: 15px;
+  height: 100%;
+}
+</style>
+</head>
+<body>
+<header id="header">
+  <div id="polaroidContainer">
+    <!-- hiiiiiiiiiiii fun fact ctrl + / makes comments  -->
+      <!-- Oh right forgot about that -->
+    <!-- Does the theme I have on show up for you... -->
+     <!-- nope it's my regular dark mode thing -->
+      <!-- Okay! -->
+    <div id="polaroid"> 
+      <!-- you! older image but whatever -->
+      <img src="pfp.png" width="100%">
+    </div>
+  </div>
+  <div id="titles">
+    <header id="title">Akira Olivia Pink</header>
+    <p id="bio">
+      she/her &centerdot; 25th Jun 2008 &centerdot; <i>Homo sapiens sapiens</i><br>
+      The Last Human on the Internet<a href="https://en.wikipedia.org/wiki/Citation_needed"><sub><i>[citation needed]</i></sub></a>
+    </p>
+<!--    <footer style="padding-top: 1.5em; font-size: 15px;">Last updated 24-06-2025 <a href="archive.html" style="color: lch(80% 100 80deg); /*try some hues yeah the hues try the hues see which is the brightest*/">(click me!)</a></footer>-->
+    <!-- Moving this to the top of the paper I think -->
+     <!-- below the hello world wide web? -->
+      <!-- No, above the paper. Should have worded that better -->
+       <!--  -->
+    <!-- ↑ Might need to make this a brighter color ↑ -->
+     <!-- it's pure white wdym-->
+      <!-- The "click me" link -->
+       <!-- oh -->
+        <!-- On further consideration maybe the date should be a link...Nevermind -->
+         <!-- colorimetrists say pure red is brighter than white -->
+          <!-- Interesting! Thank you for the share :) -->
+           <!-- i am going to tire you with these -->
+            <!-- 🛞 -->
+             
+  </div>
+  <ul id="links">
+    <li style="--color:#ff4de6"><a href="#mrrp_meow">About me</a></li>
+    <li style="--color:#ffec4d"><a href="#mrrp_meow">Visual works</a></li>
+    <li style="--color:#ff955b"><a href="#mrrp_meow">Writings</a></li>
+    <li style="--color:#886fed"><a href="#mrrp_meow">Contact</a></li>
+  </ul>
+</header>
+<!-- text thingy (the paper) -->
+<article id="main">
+  <!-- like this? yippe -->
+   <!-- Above the paper, sorry sorry sorry sorry sorry sorry sorry sorry -->
+    <!-- Yeah like that! ^^ -->
+     <!-- half of the bandwidth will be our silly ramblings in comments ahahaha -->
+      <!-- It's worth it, I think : ) -->
+       <!-- what else must be done? -->
+        <!-- do you want the styling to be moved away from here the "deviating" id is for nothing atm-->
+         <!-- I don't know, I'm not sure. I was about to ask to- nevermind I changed my mind about the other thing. But yeah IDK if I-Oh...hmm.. -->
+  <p style="
+    /*this element ignores grid positioning, and shoves itself above the margin out of border-box bounds (to clarify what is going on here)*/
+    position:absolute;
+    width:100%;
+    text-align: center;
+    margin-top:-25px;
+    color:white;
+  ">
+    Last updated 24-06-2025 
+    <a href="archive.html" style="color: lch(80% 100 80deg);">(click me!)</a>
+  </p>
+  <header id="docheader">
+    <!-- this is a year i think.. or you plan on making 9999 posts -->
+    <h1 style=" /*this is called inline styling, it's styling inside the html tag (no need to declare a class or id!)*/ /*Oh, yeah, I'm aware! I was a little surprised at first but I take it it's more of a matter of preference? i used it here because it's a single text header and like, who cares if it has an id or not*/
+      font-size: 40px;
+      line-height: 1;
+      grid-row: span 2;
+      border-right: 1px solid gray;
+      min-height: 51px;
+      min-width: 125px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    ">0000</h1>
+    <p style="
+      border-bottom: 1px solid gray;
+    ">
+      Hello World Wide Web!
+    </p>
+    <p></p>
+  </header>
+  <main id="content">
+    <!-- the <q> is very useful for screenreaders (maybe (it's just semantic html)) -->
+    what is <q>Lorem Ipsum</q>?
+  </main>
+</article>
+<!-- erm ignore the tracker -->
+<script data-goatcounter="https://marbelynrye.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script></body></html>
\ No newline at end of file
diff --git a/webdev/website_16/indieground-design--uQmdm-oYco-unsplash.jpg b/webdev/website_16/indieground-design--uQmdm-oYco-unsplash.jpg
deleted file mode 100644
index 7ff177f..0000000
Binary files a/webdev/website_16/indieground-design--uQmdm-oYco-unsplash.jpg and /dev/null differ
diff --git a/webdev/website_16/navbarbg.png b/webdev/website_16/navbarbg.png
new file mode 100644
index 0000000..86b207e
Binary files /dev/null and b/webdev/website_16/navbarbg.png differ
diff --git a/webdev/website_16/paper.png b/webdev/website_16/paper.png
new file mode 100644
index 0000000..aadd9d6
Binary files /dev/null and b/webdev/website_16/paper.png differ
diff --git a/webdev/website_16/pfp.png b/webdev/website_16/pfp.png
new file mode 100644
index 0000000..1810d9f
Binary files /dev/null and b/webdev/website_16/pfp.png differ
