diff --git a/art.html b/art.html
index e5ebbde..931da63 100644
--- a/art.html
+++ b/art.html
@@ -3,34 +3,39 @@
 
 <head>
     <title>Art - Gnawmon</title>
-    <link rel="stylesheet" href="/assets/css/style.css">
+    <link id="theme" rel="stylesheet" href="/assets/css/style.css">
     <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
     <script src="/assets/js/main.js"></script>
 </head>
 
 <body>
 
-    <video autoplay muted loop class="bgvideo" id="bgvideo">
-        <source src="Untitled.mp4" type="video/mp4">
+    <video style="display: none;" muted loop autoplay class="bgvideo" id="bgvideo">
+        <source src="/assets/videos/plasma.mp4" type="video/mp4">
     </video>
 
-    <div class="navbar"> <a href="index.html">Main Page </a> <a href="projects.html
-        ">Projects </a></a> <a id="active" href="art.html
-        ">Art </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()" /></div>
-    <div style="display: none;" class="settings" id="settings">
-        <label class="switch">
-            <input type="checkbox" id="enableVideoBackground">
-            <span class="slider"></span>
-        </label>
-        <p>Video Background</p>
-        <br>
-        <label class="switch">
-            <input type="checkbox" id="enableRandomBackrounds">
-            <span class="slider"></span>
-        </label>
-        <p>Random Backgrounds</p>
-    </div>
     <div class="middlething">
+        <img class="banner" id="banner" style="display: none;" src="/assets/images/banner.png">
+        <div class="navbar"> <a  href="index.html">Main Page </a> <a href="projects.html
+        ">Projects </a> <a id="active" href="art.html">Art </a>  <img src="assets/svg/gear.svg"  class="gear" onclick="showSettings()"/></div>
+        <div style="display: none;" class="settings" id="settings">
+            <p  class=" windowbar hide " style="width: 100%; margin-top: 0px;"><img src="/assets/images/osxbuttons.png" class="hide"> Settings</p><br>
+            <label class="switch">
+                <input type="checkbox" id="enableVideoBackground">
+                <span class="slider"></span>
+              </label> <p>Video Background</p>
+              <br>
+              <label class="switch" >
+                <input type="checkbox" id="backgroundVideoToggle">
+                <span class="slider"></span>
+              </label> <p>Random Backgrounds</p> <br>
+              <select style="display: none;"  id="themes" onchange = "changeTheme()">
+                <option value="osx">OSX</option>
+                <option value="glass">Glass</option>
+                <option value="minewatch">MineWatch</option>
+                <option value="vern">~vern</option>
+              </select>  <p style="display: none;">Theme</p>
+        </div>
         <div class="artShowcases">
             <img src="assets/images/awdmodathon1_v5.png">
             <img src="assets/images/vaporwave_v2_t1.png">
@@ -46,7 +51,7 @@
             <img src="assets/images/forg.png">
             <img src="assets/images/forg2.png">
         </div>
-        <p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website" class="link">source code</a></p>
+        <div class="bottomThingThatEveryWebsiteHas"> <p>written by hand <br> some css in the ~vern theme is taken from <a class="link" href="http://git.vern.cc/vern/website">here</a> <br>         <a href="http://git.vern.cc/gnawmon/website" class="link">source code</a> is avaible here, not sure why anybody would want to check it but here it is </p></div>
     </div>
 
 </body>
diff --git a/assets/blocks/a_dirt.png b/assets/blocks/a_dirt.png
new file mode 100644
index 0000000..75833dc
Binary files /dev/null and b/assets/blocks/a_dirt.png differ
diff --git a/assets/blocks/a_dirt_dark.png b/assets/blocks/a_dirt_dark.png
new file mode 100644
index 0000000..3e9b148
Binary files /dev/null and b/assets/blocks/a_dirt_dark.png differ
diff --git a/assets/blocks/cobblestone.png b/assets/blocks/cobblestone.png
new file mode 100644
index 0000000..57122cd
Binary files /dev/null and b/assets/blocks/cobblestone.png differ
diff --git a/assets/blocks/dirt.png b/assets/blocks/dirt.png
new file mode 100644
index 0000000..2e317bb
Binary files /dev/null and b/assets/blocks/dirt.png differ
diff --git a/assets/blocks/grass_side.png b/assets/blocks/grass_side.png
new file mode 100644
index 0000000..bcdbf70
Binary files /dev/null and b/assets/blocks/grass_side.png differ
diff --git a/assets/blocks/obsidian.png b/assets/blocks/obsidian.png
new file mode 100644
index 0000000..b48f525
Binary files /dev/null and b/assets/blocks/obsidian.png differ
diff --git a/assets/blocks/stone.png b/assets/blocks/stone.png
new file mode 100644
index 0000000..87e19ff
Binary files /dev/null and b/assets/blocks/stone.png differ
diff --git a/assets/css/alphaver.css b/assets/css/alphaver.css
new file mode 100644
index 0000000..7cd4fed
--- /dev/null
+++ b/assets/css/alphaver.css
@@ -0,0 +1,579 @@
+:root {
+
+  --accent-color: rgb(227, 154, 228);
+  --white: rgb(255, 255, 252);
+  --overlay: #00000069;
+}
+
+html,
+body {
+
+  height: 100%;
+  margin: 0;
+  background: url("/assets/blocks/a_dirt_dark.png");
+
+
+}
+.gallery,
+.showcase span,
+a,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+li {
+  font-family:  sans-serif;
+
+  font-variant: normal;
+  color: var(--white);
+}
+
+button {
+  background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
+  color: var(--white);
+  padding: 10px;
+  border: none;
+  background-position: 0% 0%;
+  background-size: 100% 200%;
+  border-bottom: 5px solid var(--accent-color);
+  border-radius: 2px;
+  transition: 0.3s;
+  line-height: 10px;
+}
+
+button:hover {
+  background-position: 0% 0%;
+  background-size: 100% 100%;
+
+}
+
+button:active {
+  filter: hue-rotate(180deg);
+}
+
+.paragraph {
+  align-self: center;
+  position: relative;
+  width: 40%;
+}
+
+.navbar {
+  width: 100%;
+  height: 30px;
+  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), var(--overlay);
+
+  z-index: 3;
+}
+.navbar::after{
+  content: "Gnawmon's fsdafssdsdfsWebsite"
+}
+.navbar a {
+  color: rgb(255, 218, 6);
+  padding: 10px;
+  text-decoration: underline;
+
+  text-decoration-thickness: 1px;
+  text-underline-offset: 8px;
+  transition: all 0.2s ease-in-out;
+}
+
+
+
+.middlething {
+  overflow: auto;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.454);
+
+
+
+}
+
+.bgvideo {
+  filter: brightness(80%);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  display: none;
+}
+
+.title {
+  margin-left: 10px;
+  font-size: 30px;
+  text-align: center;
+
+}
+
+.gallery {
+
+  transition: all 1s ease;
+  align-self: center;
+  position: relative;
+  width: 40%;
+  backdrop-filter: blur(50px);
+  padding: 10px;
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.369);
+
+
+}
+
+.div-hidden {
+  display: none;
+}
+
+
+.dropdown {
+  margin-left: 10px;
+  border-bottom: 3px solid var(--accent-color);
+  border-radius: 1px;
+  cursor: pointer;
+  transition: border-bottom 0.2s ease;
+  user-select: none;
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
+
+.dropdown:hover {
+  border-bottom: 13px solid var(--accent-color);
+}
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
+  }
+
+  to {
+    text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
+  }
+}
+
+@keyframes slideaway {
+  from {
+    display: block;
+  }
+
+  to {
+    transform: translateY(40px);
+    opacity: 0;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(65, 65, 65);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(155, 153, 153);
+}
+
+
+
+.gimage:hover {
+  width: 1500px;
+  position: fixed;
+  float: none;
+  transition: height 4s;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.gimage {
+  transition: height 4s;
+  width: 100%;
+  height: auto;
+  border-radius: 3px;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotateY(0deg);
+    rotate: 0deg;
+  }
+
+  to {
+
+
+    transform: rotateY(360deg);
+    rotate: -360deg;
+
+  }
+
+}
+
+.rotate {
+  animation: rotation 10s linear infinite;
+}
+
+input {
+  background-color: rgba(32, 32, 32, 0.507);
+
+  width: 24%;
+
+  border: 0;
+  border-bottom: 2px solid gray;
+  outline: 0;
+  font-size: 1.3rem;
+  color: white;
+  padding: 7px;
+  transition: border-bottom 1s;
+
+}
+
+input:focus {
+  border-bottom: 2px solid var(--accent-color);
+
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  color: var(--white);
+  border-bottom: 1px solid var(--accent-color);
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: #3d3d3dd3;
+  width: 190px;
+  color: var(--white);
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 10;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+.invert {
+  padding: 2px;
+  color: var(--white);
+  backdrop-filter: blur(60px);
+}
+
+.contact {
+  padding: 10px;
+  align-self: center;
+  position: relative;
+  width: 40%;
+  backdrop-filter: blur(5px);
+  vertical-align: baseline;
+  margin-top: 2px;
+  border-radius: 5px;
+  transition: all 0.5s ease;
+
+}
+
+.contact:hover {
+  margin-left: 12px;
+  box-shadow: 0 0 20px 1px var(--accent-color);
+  backdrop-filter: blur(60px);
+  border: rgb(200, 200, 200) 2px solid;
+}
+
+.contact image {
+  display: inline-block;
+}
+
+.contact p {
+  padding-left: 10px;
+  position: absolute;
+  display: inline-block;
+
+  line-height: 10px;
+
+  vertical-align: baseline;
+}
+
+.contact a {
+
+  display: block;
+
+  text-decoration: none;
+}
+
+.smalimages {
+  backdrop-filter: blur(60px);
+  align-self: center;
+  position: relative;
+  image-rendering: pixelated;
+  margin-top: 40px;
+  padding: 20px;
+  border-radius: 3px;
+  width: 50%;
+  text-align: center;
+}
+
+.smalimages img {
+  width: 88px;
+  height: 31px;
+  display: inline-block;
+  transition: all 0.2s ease;
+  
+}
+
+.smalimages img:hover {
+  position: relative;
+  scale: 1.3;
+  height: fit-content;
+  filter: drop-shadow(8px 10px 0px var(--accent-color));
+  position: relative;
+  border: 0.2px solid rgba(255, 255, 255, 0.726);
+  border-radius: 3px;
+}
+
+.link {
+  color: var(--accent-color);
+}
+
+.bottomtext {
+  backdrop-filter: blur(60px);
+  text-align: center;
+  margin-top: 4%;
+  bottom: 0;
+  background: var(--overlay);
+}
+
+.emote {
+  width: 30px;
+  margin-left: 3px;
+  position: absolute;
+}
+
+code {
+  background-color: rgb(9, 24, 37);
+
+}
+
+.showcases {
+  display: grid;
+  grid-template-columns: auto auto;
+  margin: auto;
+
+}
+
+.showcase {
+  float: left;
+  box-shadow: 0 0 0.2em rgb(0, 0, 0);
+  border-radius: 3px;
+  width: 800px;
+  margin: 10px;
+  margin-top: 20px;
+  height: 400px;
+}
+
+.showcase img:not(.background) {
+
+  padding: 10px;
+  width: 60%;
+  padding-left: 20px;
+  float: left;
+}
+
+.showcase span {
+  padding-top: 10px;
+  float: left;
+  overflow: inherit;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  display: block;
+  white-space: normal;
+  width: 35%;
+}
+
+.showcase h2 {
+  border-bottom: 2px white solid;
+  margin-left: 10px;
+  border-bottom: 4px solid var(--accent-color);
+  user-select: none;
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
+
+.showcase .background {
+  position: absolute;
+  width: max-content;
+  height: max-content;
+  z-index: -1;
+  opacity: 0.4;
+  background-size: cover;
+}
+
+#relaunch {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/alphaver.png");
+  background-size: 50%;
+}
+
+#minewatchWiki{
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/seahaven.png");
+  background-size: 100%;
+  background-position: 20 0px;
+}
+#doom {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/doomBg.png");
+  background-size: 100%;
+}
+
+#blur {
+  background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
+  backdrop-filter: blur(20px);
+}
+
+.pausetext {
+  float: right;
+}
+
+.pausetext:hover {
+  cursor: pointer;
+}
+
+.settings {
+  z-index: 11;
+  position: fixed;
+  width: 20%;
+  background: #2929293c;
+  border-radius: 3px;
+  margin-left: auto;
+  right: 0;
+  top: 4%;
+  transition: ease 0.2s all;
+  backdrop-filter: blur(10px);
+  background-color: rgba(0, 0, 0, 0.532);
+}
+
+.settings p {
+  display: inline-block;
+  transform: translateY(-11px);
+}
+
+.gear {
+  float: right;
+  width: 20px;
+  margin-top: 6px;
+  margin-right: 10px;
+  transition: ease-in-out 1s;
+}
+
+.gear:hover {
+  cursor: pointer;
+  transform: rotate(360deg);
+}
+
+.switch {
+
+  --button-width: 3.5em;
+  --button-height: 2em;
+  --toggle-diameter: 1.5em;
+  --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+  --color-grey: #cccccc;
+
+}
+
+.slider {
+  margin-top: 4%;
+  margin-left: 2%;
+  display: inline-block;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--color-grey);
+  border-radius: calc(var(--button-height) / 2);
+  position: relative;
+  transition: 0.3s all ease-in-out;
+}
+
+.slider::after {
+  content: "";
+  display: inline-block;
+  width: var(--toggle-diameter);
+  height: var(--toggle-diameter);
+  background-color: #fff;
+  border-radius: calc(var(--toggle-diameter) / 2);
+  position: absolute;
+  top: var(--button-toggle-offset);
+  transform: translateX(var(--button-toggle-offset));
+  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  transition: 0.3s all ease-in-out;
+}
+
+.switch input[type="checkbox"]:checked+.slider {
+  background-color: var(--accent-color);
+}
+
+.switch input[type="checkbox"]:checked+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+
+.switch input[type="checkbox"] {
+  display: none;
+}
+
+.switch input[type="checkbox"]:active+.slider::after {
+  width: var(--toggle-wider);
+}
+
+.switch input[type="checkbox"]:checked:active+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
+}
+
+.artShowcases {
+  display: grid;
+  grid-template-columns: auto auto auto ;
+  margin: auto;
+  margin-top: 60px;
+}
+.artShowcases img{
+  margin-top: 20px;
+  width: 500px;
+  height: auto;
+  box-shadow: 0.2em 0.3em 3em rgb(0, 0, 0);
+  border-radius: 7px;
+  transition: scale 0.2s ease;
+  background: rgba(0, 0, 0, 0.532);
+  margin-left: 20px;
+  
+}
+
+.artShowcases img:hover {
+  scale: 1.2;
+}
+.windowbar img {
+ display: none;
+}
+.banner{
+  display: none;
+}
+
+.hide {display: none;}
\ No newline at end of file
diff --git a/assets/css/minewatch.css b/assets/css/minewatch.css
new file mode 100644
index 0000000..a7aa000
--- /dev/null
+++ b/assets/css/minewatch.css
@@ -0,0 +1,610 @@
+:root {
+  --cobblestone: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/blocks/cobblestone.png");
+  --dirt: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/blocks/dirt.png");
+  --grass: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/blocks/grass_side.png");
+  --obsidian: url("/assets/blocks/obsidian.png");
+  --stone: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/assets/blocks/stone.png");
+  --dirt-scale: 3%;
+  --accent-color: #64c9fb;
+  --white: rgb(255, 255, 252);
+  --overlay: #00000069;
+}
+
+
+body {
+
+  z-index: -1;
+  image-rendering: pixelated;
+  background: var(--dirt);
+  background-size: 3%;
+
+  display: flex;
+  justify-content: center;
+}
+
+body::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 39px;
+
+  background-image: var(--grass);
+
+  background-size: var(--dirt-scale);
+  z-index: -1;
+  image-rendering: pixelated;
+}
+
+.showcase span,
+a,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+li {
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+
+  font-variant: normal;
+  color: var(--white);
+}
+
+button {
+  background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
+  color: var(--white);
+  padding: 10px;
+  border: none;
+  background-position: 0% 0%;
+  background-size: 100% 200%;
+  border-bottom: 5px solid var(--accent-color);
+  border-radius: 2px;
+  transition: 0.3s;
+  line-height: 10px;
+}
+
+button:hover {
+  background-position: 0% 0%;
+  background-size: 100% 100%;
+
+}
+
+button:active {
+  filter: hue-rotate(180deg);
+}
+
+.paragraph {
+  align-self: center;
+  position: relative;
+  width: 40%;
+  background: var(--stone);
+  border: 1px white solid;
+  padding: 4px;
+}
+
+
+
+
+
+.middlething {
+
+  margin-top: -8px;
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 70%;
+  background-color: rgba(0, 0, 0, 0.454);
+
+  background: var(--cobblestone);
+  background-size: 4%;
+  image-rendering: pixelated;
+  border-style: solid;
+  border-width: 0px 1px 0px 1px;
+  border-color: #ffffffa6;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5),
+    0 2px 2px rgba(0, 0, 0, 0.5),
+    0 4px 4px rgba(0, 0, 0, 0.5),
+    0 8px 90px rgba(0, 0, 0, 0.5),
+    0 16px 16px rgba(0, 0, 0, 0.5);
+
+}
+
+.bgvideo {
+  filter: brightness(80%);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  display: none;
+}
+
+.title {
+  margin-left: 10px;
+  font-size: 30px;
+  text-align: center;
+
+}
+
+.gallery {
+  background: var(--stone);
+  background-size: 5%;
+  transition: all 1s ease;
+  align-self: center;
+  position: relative;
+  width: 40%;
+
+  border-style: solid;
+  border-color: white;
+  padding: 10px;
+  color: white;
+  border-width: 0px 1px 1px 1px;
+  margin-top: -20px;
+
+}
+
+.div-hidden {
+  display: none;
+}
+
+
+.dropdown {
+  background: url("/assets/blocks/obsidian.png");
+  background-size: 5%;
+  text-align: center;
+  width: 40.9%;
+  border: 1px solid white;
+  display: table;
+
+  cursor: pointer;
+  transition: border-bottom 0.2s ease;
+  user-select: none;
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
+
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
+  }
+
+  to {
+    text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
+  }
+}
+
+@keyframes slideaway {
+  from {
+    display: block;
+  }
+
+  to {
+    transform: translateY(40px);
+    opacity: 0;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(65, 65, 65);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(155, 153, 153);
+}
+
+
+
+.gimage:hover {
+  width: 1500px;
+  position: fixed;
+  float: none;
+  transition: height 4s;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.gimage {
+  transition: height 4s;
+  width: 100%;
+  height: auto;
+  border-radius: 3px;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotateY(0deg);
+    rotate: 0deg;
+  }
+
+  to {
+
+
+    transform: rotateY(360deg);
+    rotate: -360deg;
+
+  }
+
+}
+
+.rotate {
+  animation: rotation 10s linear infinite;
+}
+
+input {
+  background-color: rgba(32, 32, 32, 0.507);
+
+  width: 24%;
+
+  border: 0;
+  border-bottom: 2px solid gray;
+  outline: 0;
+  font-size: 1.3rem;
+  color: white;
+  padding: 7px;
+  transition: border-bottom 1s;
+
+}
+
+input:focus {
+  border-bottom: 2px solid var(--accent-color);
+
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  color: var(--white);
+  border-bottom: 1px solid var(--accent-color);
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: #3d3d3dd3;
+  width: 190px;
+  color: var(--white);
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 10;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+.invert {
+  padding: 2px;
+  color: var(--white);
+  backdrop-filter: blur(60px);
+}
+
+.contact {
+  padding: 10px;
+  align-self: center;
+  position: relative;
+  width: 40%;
+  background: var(--stone);
+  border: 1px white solid;
+  background-size: 5%;
+  vertical-align: baseline;
+  margin-top: 2px;
+
+
+
+}
+
+.contact:hover {
+  margin-left: 12px;
+
+  backdrop-filter: blur(60px);
+  border: rgb(200, 200, 200) 2px solid;
+}
+
+.contact image {
+  display: inline-block;
+}
+
+.contact p {
+  padding-left: 10px;
+  position: absolute;
+  display: inline-block;
+
+  line-height: 10px;
+
+  vertical-align: baseline;
+}
+
+.contact a {
+
+  display: block;
+
+  text-decoration: none;
+}
+
+.smalimages {
+
+  align-self: center;
+  position: relative;
+  image-rendering: pixelated;
+  margin-top: 40px;
+  padding: 20px;
+  border-radius: 3px;
+  width: 50%;
+  text-align: center;
+  background: var(--stone);
+  border: 1px white solid;
+  background-size: 5%;
+}
+
+.smalimages img {
+  width: 88px;
+  height: 31px;
+  display: inline-block;
+  transition: all 0.2s ease;
+
+}
+
+.smalimages img:hover {
+  position: relative;
+  scale: 1.3;
+  height: fit-content;
+  filter: drop-shadow(8px 10px 0px var(--accent-color));
+  position: relative;
+  border: 0.2px solid rgba(255, 255, 255, 0.726);
+  border-radius: 3px;
+}
+
+.link {
+  color: var(--accent-color);
+  text-shadow: #000000 1px 1px;
+}
+
+.bottomtext {
+  backdrop-filter: blur(60px);
+  text-align: center;
+  margin-top: 4%;
+  bottom: 0;
+  background: var(--overlay);
+}
+
+.emote {
+  width: 30px;
+  margin-left: 3px;
+  position: absolute;
+}
+
+code {
+  background-color: rgb(9, 24, 37);
+
+}
+
+.showcases {
+  display: grid;
+  grid-template-columns: auto auto;
+  margin: auto;
+
+}
+
+.showcase {
+  float: left;
+  border: solid 1px white;
+  background: var(--stone);
+  background-size: 5%;
+  width: 90%;
+  margin: 10px;
+  margin-top: 20px;
+  height: 400px;
+}
+
+.showcase img:not(.background) {
+
+  padding: 10px;
+  width: 60%;
+  padding-left: 20px;
+  float: left;
+}
+
+.showcase span {
+  padding-top: 10px;
+  float: left;
+  overflow: inherit;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  display: block;
+  white-space: normal;
+  width: 35%;
+}
+
+.showcase h2 {
+  background: var(--obsidian);
+
+  border-bottom: 2px white solid;
+text-align: center;
+margin-top: 0px;
+  user-select: none;
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
+
+.showcase .background {
+  position: absolute;
+  width: max-content;
+  height: max-content;
+  z-index: -1;
+  opacity: 0.4;
+  background-size: cover;
+}
+
+
+
+.pausetext {
+  float: right;
+}
+
+.pausetext:hover {
+  cursor: pointer;
+}
+
+.settings {
+  z-index: 11;
+  position: fixed;
+  width: 20%;
+  background: var(--stone);
+  background-size: 5%;
+  border: 1px white solid;
+  border-radius: 3px;
+  margin-left: auto;
+  right: 0;
+  top: 4%;
+
+}
+
+.settings p {
+  display: inline-block;
+  transform: translateY(-11px);
+}
+
+.gear {
+  float: right;
+  width: 20px;
+  margin-right: 10px;
+  filter: invert(100%);
+}
+
+.gear:hover {
+  cursor: pointer;
+
+}
+
+.switch {
+
+  --button-width: 3.5em;
+  --button-height: 2em;
+  --toggle-diameter: 1.5em;
+  --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+  --color-grey: #cccccc;
+
+}
+
+.slider {
+  margin-top: 4%;
+  margin-left: 2%;
+  display: inline-block;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--color-grey);
+  border-radius: calc(var(--button-height) / 2);
+  position: relative;
+  transition: 0.3s all ease-in-out;
+}
+
+.slider::after {
+  content: "";
+  display: inline-block;
+  width: var(--toggle-diameter);
+  height: var(--toggle-diameter);
+  background-color: #fff;
+  border-radius: calc(var(--toggle-diameter) / 2);
+  position: absolute;
+  top: var(--button-toggle-offset);
+  transform: translateX(var(--button-toggle-offset));
+  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  transition: 0.3s all ease-in-out;
+}
+
+.switch input[type="checkbox"]:checked+.slider {
+  background-color: var(--accent-color);
+}
+
+.switch input[type="checkbox"]:checked+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+
+.switch input[type="checkbox"] {
+  display: none;
+}
+
+.switch input[type="checkbox"]:active+.slider::after {
+  width: var(--toggle-wider);
+}
+
+.switch input[type="checkbox"]:checked:active+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
+}
+
+.artShowcases {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  margin: auto;
+  margin-top: 60px;
+  width: 100%;
+}
+
+.artShowcases img {
+  margin-top: 20px;
+  width: 400px;
+  height: auto;
+  border: 1px solid white;
+  background: rgba(0, 0, 0, 0.532);
+  margin-left: 20px;
+
+}
+
+.artShowcases img:hover {
+  scale: 1.2;
+}
+
+.banner {
+  display: block;
+  width: 70%;
+  align-self: center;
+  border: 1px white solid;
+}
+
+.navbar {
+  width: 70%;
+  height: 30px;
+  background: white;
+  border: 1px white solid;
+  align-self: center;
+}
+
+.navbar a {
+  padding: 10px;
+  transition: all 0.2s ease-in-out;
+  color: black;
+  font-style: italic;
+}
+.windowbar img {
+  display: none;
+ }
+ 
+.hide {display: none;}
diff --git a/assets/css/osx.css b/assets/css/osx.css
new file mode 100644
index 0000000..2e9e57f
--- /dev/null
+++ b/assets/css/osx.css
@@ -0,0 +1,621 @@
+:root {
+
+  --accent-color: rgb(227, 154, 228);
+  --white: rgb(255, 255, 252);
+  --overlay: #00000069;
+}
+
+@font-face {
+  font-family: myFirstFont;
+  src: url(/assets/misc/lsansuni.ttf);
+}
+
+html,
+body {
+
+  height: 100%;
+  margin: 0;
+  background: url("/assets/images/mbg.png");
+  backdrop-filter: blur(10px);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.showcase span,
+a,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+li {
+  font-family: myFirstFont;
+
+  font-variant: normal;
+  color: black;
+}
+
+button {
+  background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
+  color: var(--white);
+  padding: 10px;
+  border: none;
+  background-position: 0% 0%;
+  background-size: 100% 200%;
+  border-bottom: 5px solid var(--accent-color);
+  border-radius: 2px;
+  transition: 0.3s;
+  line-height: 10px;
+}
+
+button:hover {
+  background-position: 0% 0%;
+  background-size: 100% 100%;
+
+}
+
+button:active {
+  filter: hue-rotate(180deg);
+}
+
+.paragraph {
+  color: white;
+  align-self: center;
+  position: relative;
+  width: 40%;
+}
+
+.navbar {
+  background-image: url("/assets/images/osxbar.png");
+  width: 100%;
+  height: 25px;
+  display: inline-block;
+  position: fixed;
+  z-index: 3;
+}
+
+.navbar a {
+  font-weight: lighter;
+  font-family: myFirstFont;
+  text-decoration: none;
+  margin-left: 20px;
+  color: black;
+}
+
+
+.middlething {
+  overflow: auto;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.454);
+
+
+
+}
+
+.bgvideo {
+  filter: brightness(80%);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  display: none;
+}
+
+.title {
+  margin-left: 10px;
+  font-size: 30px;
+  text-align: center;
+
+}
+
+
+
+.div-hidden {
+  display: none;
+}
+
+
+
+
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
+  }
+
+  to {
+    text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
+  }
+}
+
+@keyframes slideaway {
+  from {
+    display: block;
+  }
+
+  to {
+    transform: translateY(40px);
+    opacity: 0;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(65, 65, 65);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(155, 153, 153);
+}
+
+
+
+.gimage:hover {
+  width: 1500px;
+  position: fixed;
+  float: none;
+  transition: height 4s;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.gimage {
+  transition: height 4s;
+  width: 100%;
+  height: auto;
+  border-radius: 3px;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotateY(0deg);
+    rotate: 0deg;
+  }
+
+  to {
+
+
+    transform: rotateY(360deg);
+    rotate: -360deg;
+
+  }
+
+}
+
+.rotate {
+  animation: rotation 10s linear infinite;
+}
+
+input {
+  background-color: rgba(32, 32, 32, 0.507);
+
+  width: 24%;
+
+  border: 0;
+  border-bottom: 2px solid gray;
+  outline: 0;
+  font-size: 1.3rem;
+  color: white;
+  padding: 7px;
+  transition: border-bottom 1s;
+
+}
+
+input:focus {
+  border-bottom: 2px solid var(--accent-color);
+
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  color: black;
+  border-bottom: 1px solid var(--accent-color);
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: #3d3d3dd3;
+  width: 190px;
+  color: var(--white);
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 10;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+.invert {}
+
+.contact {
+  padding: 10px;
+  align-self: center;
+  position: relative;
+  width: 40%;
+  backdrop-filter: blur(5px);
+  vertical-align: baseline;
+  margin-top: 2px;
+  border-radius: 5px;
+  transition: all 0.5s ease;
+
+}
+
+
+
+.contact image {
+  display: inline-block;
+}
+
+.contact p {
+  
+  padding-left: 10px;
+  position: absolute;
+  display: inline-block;
+  color: white;
+  line-height: 10px;
+
+  vertical-align: baseline;
+}
+
+.contact a {
+
+  display: block;
+
+  text-decoration: none;
+}
+
+.smalimages {
+
+  align-self: center;
+  position: relative;
+  image-rendering: pixelated;
+  background: #EEEEEE;
+  padding: 20px;
+  border-radius: 0px 0px 5px 5px;
+  width: 50%;
+  margin-top: 50px;
+  text-align: center;
+}
+
+.smalimages img:not(.windowbar img) {
+  width: 88px;
+  height: 31px;
+  display: inline-block;
+  transition: all 0.2s ease;
+
+}
+
+.smalimages img:hover:not(.windowbar img) {
+  position: relative;
+  scale: 1.3;
+  height: fit-content;
+  filter: drop-shadow(8px 10px 0px var(--accent-color));
+  position: relative;
+  border: 0.2px solid rgba(255, 255, 255, 0.726);
+  border-radius: 3px;
+}
+
+.link {
+  color: var(--accent-color);
+}
+
+.bottomtext {
+  backdrop-filter: blur(60px);
+  text-align: center;
+  margin-top: 4%;
+  bottom: 0;
+  background: var(--overlay);
+}
+
+.emote {
+  width: 30px;
+  margin-left: 3px;
+  position: absolute;
+}
+
+code {
+  background-color: rgb(9, 24, 37);
+
+}
+
+.showcases {
+  display: grid;
+  grid-template-columns: auto auto;
+  margin: auto;
+
+}
+
+.showcase {
+  float: left;
+  box-shadow: 0 0 0.2em rgb(0, 0, 0);
+  border-radius: 3px;
+  width: 800px;
+  margin: 10px;
+  margin-top: 20px;
+  height: 400px;
+}
+
+.showcase img:not(.background) {
+
+  padding: 10px;
+  width: 60%;
+  padding-left: 20px;
+  float: left;
+}
+
+.showcase span {
+  padding-top: 10px;
+  float: left;
+  overflow: inherit;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  display: block;
+  white-space: normal;
+  width: 35%;
+}
+
+.showcase h2 {
+
+
+  user-select: none;
+
+}
+
+.showcase .background {
+  position: absolute;
+  width: max-content;
+  height: max-content;
+  z-index: -1;
+  opacity: 0.4;
+  background-size: cover;
+}
+
+#relaunch {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/alphaver.png");
+  background-size: 50%;
+}
+
+#minewatchWiki {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/seahaven.png");
+  background-size: 100%;
+  background-position: 20 0px;
+}
+
+#doom {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/doomBg.png");
+  background-size: 100%;
+}
+
+#blur {
+  background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
+  backdrop-filter: blur(20px);
+}
+
+.pausetext {
+  float: right;
+}
+
+.pausetext:hover {
+  cursor: pointer;
+}
+
+.settings {
+  z-index: 11;
+  position: fixed;
+  width: 20%;
+
+  border-radius: 0px 0px 5px 5px;
+  margin-left: auto;
+  right: 0;
+  top: 4%;
+  transition: ease 0.2s all;
+  background: #EEEEEE;
+
+}
+
+.settings p {
+
+  display: inline-block;
+  transform: translateY(-11px);
+}
+
+.gear {
+  filter: invert(100);
+  float: right;
+  width: 20px;
+  margin-top: 2px;
+  margin-right: 10px;
+  transition: ease-in-out 1s;
+}
+
+.gear:hover {
+  cursor: pointer;
+  transform: rotate(360deg);
+}
+
+.switch {
+
+  --button-width: 3.5em;
+  --button-height: 2em;
+  --toggle-diameter: 1.5em;
+  --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+  --color-grey: #cccccc;
+
+}
+
+.slider {
+  margin-top: 4%;
+  margin-left: 2%;
+  display: inline-block;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--color-grey);
+  border-radius: calc(var(--button-height) / 2);
+  position: relative;
+  transition: 0.3s all ease-in-out;
+}
+
+.slider::after {
+  content: "";
+  display: inline-block;
+  width: var(--toggle-diameter);
+  height: var(--toggle-diameter);
+  background-color: #fff;
+  border-radius: calc(var(--toggle-diameter) / 2);
+  position: absolute;
+  top: var(--button-toggle-offset);
+  transform: translateX(var(--button-toggle-offset));
+  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  transition: 0.3s all ease-in-out;
+}
+
+.switch input[type="checkbox"]:checked+.slider {
+  background-color: var(--accent-color);
+}
+
+.switch input[type="checkbox"]:checked+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+
+.switch input[type="checkbox"] {
+  display: none;
+}
+
+.switch input[type="checkbox"]:active+.slider::after {
+  width: var(--toggle-wider);
+}
+
+.switch input[type="checkbox"]:checked:active+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
+}
+
+.artShowcases {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  margin: auto;
+  margin-top: 60px;
+}
+
+.artShowcases img {
+  margin-top: 20px;
+  width: 500px;
+  height: auto;
+  box-shadow: 0.2em 0.3em 3em rgb(0, 0, 0);
+  border-radius: 7px;
+  transition: scale 0.2s ease;
+  background: rgba(0, 0, 0, 0.532);
+  margin-left: 20px;
+
+}
+
+.artShowcases img:hover {
+  scale: 1.2;
+}
+
+.windowbar {
+
+  background: linear-gradient(#D9D2D9, #9B9B9B);
+  height: 27px;
+  color: black;
+  font-weight: lighter;
+  vertical-align: middle;
+  font-size: large;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  width: 100%;
+}
+
+.windowbar img {
+  width: 70px;
+  float: left;
+  padding: 5px;
+}
+
+.dropdown {
+  text-align: center;
+  cursor: pointer;
+
+  user-select: none;
+  font-family: myFirstFont;
+}
+
+.gallery {
+
+  margin-top: -16px;
+  align-self: center;
+  position: relative;
+  width: 40%;
+  backdrop-filter: blur(50px);
+  padding: 10px;
+  background: #EEEEEE;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.gallery p {
+  color: black;
+
+}
+.banner{
+  display: none;
+}
+.bnav {
+
+  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 1, 12, 0.9)), url("/assets/images/bring.jpg");
+  background-size: 100%;
+  margin-top: 20px;
+  text-align: center;
+  align-items: center;
+  width: 150px;
+  padding: 0px;
+  animation-name: move-bg;
+}
+.bnav a{
+  color: a;
+  vertical-align: sub;
+  font-size: 25px;
+  text-decoration: none;
+}
+#left,#right{
+  transition: all 0.2s ease;
+}
+#left:hover{
+  margin-right: 4px;
+}
+#right:hover{
+  margin-left: 4px;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 5380750..dc04d9a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -16,6 +16,7 @@ body {
   background-repeat: no-repeat;
 }
 
+.gallery,
 .showcase span,
 a,
 h1,
@@ -30,6 +31,9 @@ li {
   font-variant: normal;
   color: var(--white);
 }
+a{
+  color: var(--accent-color);
+}
 
 button {
   background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
@@ -61,14 +65,20 @@ button:active {
 }
 
 .navbar {
+
   width: 100%;
   height: 30px;
   background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), var(--overlay);
   position: fixed;
   z-index: 3;
+
+
+
 }
 
+
 .navbar a {
+  color:  var(--white);
   padding: 10px;
   text-decoration: underline;
   text-decoration-color: rgba(41, 41, 41, 0.507);
@@ -108,7 +118,7 @@ button:active {
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
-  display: none;
+ 
 }
 
 .title {
@@ -346,22 +356,20 @@ input:focus {
   height: 31px;
   display: inline-block;
   transition: all 0.2s ease;
-  
+
 }
 
 .smalimages img:hover {
   position: relative;
-  scale: 1.3;
+  scale: 1.2;
   height: fit-content;
-  filter: drop-shadow(8px 10px 0px var(--accent-color));
+  filter: drop-shadow(0px 0px 5px var(--accent-color));
   position: relative;
   border: 0.2px solid rgba(255, 255, 255, 0.726);
   border-radius: 3px;
 }
 
-.link {
-  color: var(--accent-color);
-}
+
 
 .bottomtext {
   backdrop-filter: blur(60px);
@@ -440,15 +448,20 @@ code {
   background-size: 50%;
 }
 
-#minewatchWiki{
+#minewatchWiki {
   background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/seahaven.png");
   background-size: 100%;
   background-position: 20 0px;
 }
+
 #doom {
   background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/doomBg.png");
   background-size: 100%;
 }
+#bring {
+  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/bring.jpg");
+  background-size: 100%;
+}
 
 #blur {
   background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
@@ -475,6 +488,7 @@ code {
   transition: ease 0.2s all;
   backdrop-filter: blur(10px);
   background-color: rgba(0, 0, 0, 0.532);
+  margin-right: 10px;
 }
 
 .settings p {
@@ -556,11 +570,12 @@ code {
 
 .artShowcases {
   display: grid;
-  grid-template-columns: auto auto auto ;
+  grid-template-columns: auto auto auto;
   margin: auto;
   margin-top: 60px;
 }
-.artShowcases img{
+
+.artShowcases img {
   margin-top: 20px;
   width: 500px;
   height: auto;
@@ -569,9 +584,59 @@ code {
   transition: scale 0.2s ease;
   background: rgba(0, 0, 0, 0.532);
   margin-left: 20px;
-  
+
 }
 
 .artShowcases img:hover {
   scale: 1.2;
-}
\ No newline at end of file
+}
+
+.windowbar img {
+  display: none;
+}
+
+.banner {
+  display: none;
+}
+
+.hide {
+  display: none;
+}
+
+.bottomGlow:empty::before {
+  content: "\A0";
+}
+
+.bottomThingThatEveryWebsiteHas {
+
+  margin-top: 20px;
+  overflow: none;
+  text-align: center;
+  background: rgb(2, 2, 2);
+
+}
+
+.bnav {
+  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 1, 12, 0.9)), url("/assets/images/bring.jpg");
+  background-size: 100%;
+  margin-top: 20px;
+  text-align: center;
+  align-items: center;
+  width: 150px;
+  padding: 0px;
+  animation-name: move-bg;
+}
+.bnav a{
+  vertical-align: sub;
+  font-size: 25px;
+  text-decoration: none;
+}
+#left,#right{
+  transition: all 0.2s ease;
+}
+#left:hover{
+  margin-right: 4px;
+}
+#right:hover{
+  margin-left: 4px;
+}
diff --git a/assets/css/vern.css b/assets/css/vern.css
new file mode 100644
index 0000000..a8597f9
--- /dev/null
+++ b/assets/css/vern.css
@@ -0,0 +1,579 @@
+:root {
+  --blue: #51afef;
+  --accent-color: #ff6c6b;
+  --white: #bbc2cf;
+  --overlay: #00000069;
+}
+
+
+body {
+
+  background: #282c34;
+  display: flex;
+  justify-content: center;
+}
+
+
+
+.gallery,
+.showcase span,
+a,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+li {
+
+  font-family: DejaVu Sans Mono, monospace;
+  font-size: 20px;
+
+  color: var(--white);
+}
+
+h1,
+h2,
+h3 {
+  color: var(--blue);
+}
+
+button {
+  background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
+  color: var(--white);
+  padding: 10px;
+
+  background-position: 0% 0%;
+  background-size: 100% 200%;
+
+  transition: 0.3s;
+  line-height: 10px;
+}
+
+button:hover {
+  background-position: 0% 0%;
+  background-size: 100% 100%;
+
+}
+
+button:active {
+  filter: hue-rotate(180deg);
+}
+
+.paragraph {
+
+  position: relative;
+  width: 40%;
+
+  padding: 4px;
+}
+
+
+
+
+
+.middlething {
+
+  margin-top: -50px;
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 800px;
+
+
+}
+
+.bgvideo {
+  filter: brightness(80%);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  display: none;
+}
+
+.title {
+  margin-left: 10px;
+  font-size: 1.3em;
+  text-align: center;
+
+}
+
+.gallery {
+
+
+  width: 100%;
+
+
+  padding: 10px;
+
+
+
+
+}
+
+.div-hidden {
+  display: none;
+}
+
+
+.dropdown {
+
+  width: 40.9%;
+
+  display: table;
+
+  cursor: pointer;
+
+  user-select: none;
+  font-size: 30px;
+}
+
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
+  }
+
+  to {
+    text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
+  }
+}
+
+@keyframes slideaway {
+  from {
+    display: block;
+  }
+
+  to {
+    transform: translateY(40px);
+    opacity: 0;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(65, 65, 65);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(155, 153, 153);
+}
+
+
+
+.gimage:hover {
+  width: 1500px;
+  position: fixed;
+  float: none;
+  transition: height 4s;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.gimage {
+  transition: height 4s;
+  width: 100%;
+  height: auto;
+  border-radius: 3px;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotateY(0deg);
+    rotate: 0deg;
+  }
+
+  to {
+
+
+    transform: rotateY(360deg);
+    rotate: -360deg;
+
+  }
+
+}
+
+.rotate {
+  animation: rotation 10s linear infinite;
+}
+
+input {
+  background-color: rgba(32, 32, 32, 0.507);
+
+  width: 24%;
+
+  border: 0;
+  border-bottom: 2px solid gray;
+  outline: 0;
+  font-size: 1.3rem;
+  color: white;
+  padding: 7px;
+  transition: border-bottom 1s;
+
+}
+
+input:focus {
+  border-bottom: 2px solid var(--accent-color);
+
+}
+
+.tooltip {
+  font-size: 1.1em;
+  position: relative;
+  display: inline-block;
+  color: var(--white);
+  border-bottom: 1px solid var(--accent-color);
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: #3d3d3dd3;
+  width: 190px;
+  color: var(--white);
+  text-align: center;
+  padding: 5px 0;
+
+  position: absolute;
+  z-index: 10;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+
+
+.contact {
+  padding: 10px;
+  align-self: center;
+  position: relative;
+  width: 40%;
+
+
+  background-size: 5%;
+  vertical-align: baseline;
+  margin-top: 2px;
+
+
+
+}
+
+.contact:hover {
+  margin-left: 12px;
+
+  backdrop-filter: blur(60px);
+  border: rgb(200, 200, 200) 2px solid;
+}
+
+.contact image {
+  display: inline-block;
+}
+
+.contact p {
+  padding-left: 10px;
+  position: absolute;
+  display: inline-block;
+
+  line-height: 10px;
+
+  vertical-align: baseline;
+}
+
+.contact a {
+
+  display: block;
+
+  text-decoration: none;
+}
+
+.smalimages {
+
+  align-self: center;
+  position: relative;
+  image-rendering: pixelated;
+  margin-top: 40px;
+  padding: 20px;
+  border-radius: 3px;
+  width: 100%;
+  text-align: center;
+
+  background-size: 5%;
+}
+
+.smalimages img {
+  width: 88px;
+  height: 31px;
+  display: inline-block;
+  transition: all 0.2s ease;
+
+}
+
+.smalimages img:hover {
+  position: relative;
+  scale: 1.3;
+  height: fit-content;
+  filter: drop-shadow(8px 10px 0px var(--accent-color));
+  position: relative;
+  border: 0.2px solid rgba(255, 255, 255, 0.726);
+  border-radius: 3px;
+}
+
+.link {
+  color: var(--accent-color);
+}
+
+.bottomtext {
+  width: 20px;
+
+  margin-top: 4%;
+  bottom: 0;
+
+}
+.bottomtext::after{
+  content: "this theme uses css things <a>from vern</a>";
+}
+.emote {
+  width: 30px;
+  margin-left: 3px;
+  position: absolute;
+}
+
+code {
+  background-color: rgb(9, 24, 37);
+
+}
+
+.showcases {
+  display: grid;
+  grid-template-columns: auto auto;
+  margin: auto;
+
+}
+
+.showcase {
+  float: left;
+  border: solid 1px white;
+
+  background-size: 5%;
+  width: 90%;
+  margin: 10px;
+  margin-top: 20px;
+  height: 400px;
+}
+
+.showcase img:not(.background) {
+display: none;
+  padding: 10px;
+  width: 60%;
+  padding-left: 20px;
+  float: left;
+}
+
+.showcase span {
+  padding-top: 10px;
+  float: left;
+  overflow: inherit;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  display: block;
+  white-space: normal;
+  width: 100%;
+margin-left: 1px;
+}
+
+.showcase h2 {
+
+
+  border-bottom: 2px white solid;
+  text-align: center;
+  margin-top: 0px;
+  user-select: none;
+  text-shadow: 0 0 0.2em rgb(0, 0, 0);
+}
+
+.showcase .background {
+  position: absolute;
+  width: max-content;
+  height: max-content;
+  z-index: -1;
+  opacity: 0.4;
+  background-size: cover;
+}
+
+
+
+.pausetext {
+  float: right;
+}
+
+.pausetext:hover {
+  cursor: pointer;
+}
+
+.settings {
+  z-index: 11;
+  position: fixed;
+  width: 20%;
+
+  background-size: 5%;
+
+  margin-left: auto;
+  right: 0;
+  top: 4%;
+
+}
+
+.settings p {
+  display: inline-block;
+  transform: translateY(-11px);
+}
+
+.gear {
+
+  float: right;
+  width: 20px;
+  margin-right: 10px;
+  filter: brightness(0) saturate(100%) invert(56%) sepia(58%) saturate(4782%) hue-rotate(327deg) brightness(125%) contrast(113%);
+}
+
+.gear:hover {
+  cursor: pointer;
+
+}
+
+.switch {
+
+  --button-width: 3.5em;
+  --button-height: 2em;
+  --toggle-diameter: 1.5em;
+  --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+  --color-grey: #cccccc;
+
+}
+
+.slider {
+  margin-top: 4%;
+  margin-left: 2%;
+  display: inline-block;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--color-grey);
+  border-radius: calc(var(--button-height) / 2);
+  position: relative;
+  transition: 0.3s all ease-in-out;
+}
+
+.slider::after {
+  content: "";
+  display: inline-block;
+  width: var(--toggle-diameter);
+  height: var(--toggle-diameter);
+  background-color: #fff;
+  border-radius: calc(var(--toggle-diameter) / 2);
+  position: absolute;
+  top: var(--button-toggle-offset);
+  transform: translateX(var(--button-toggle-offset));
+  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  transition: 0.3s all ease-in-out;
+}
+
+.switch input[type="checkbox"]:checked+.slider {
+  background-color: var(--accent-color);
+}
+
+.switch input[type="checkbox"]:checked+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+
+.switch input[type="checkbox"] {
+  display: none;
+}
+
+.switch input[type="checkbox"]:active+.slider::after {
+  width: var(--toggle-wider);
+}
+
+.switch input[type="checkbox"]:checked:active+.slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
+}
+
+.artShowcases {
+  display: grid;
+  grid-template-columns: auto auto auto;
+ 
+  width: 100%;
+}
+
+.artShowcases img {
+  
+  margin-top: 20px;
+  width: 400px;
+  height: auto;
+  border: 1px solid white;
+  background: rgba(0, 0, 0, 0.532);
+  margin-left: 20px;
+
+}
+
+.artShowcases img:hover {
+  scale: 1.2;
+}
+
+.banner {
+  display: none;
+
+}
+
+.navbar {
+  width: 100%;
+  height: 100px;
+
+  border-bottom: 2px solid var(--accent-color);
+  border-radius: 0.5rem;
+  padding-bottom: 30px;
+  display: flex;
+  align-items:end;
+  justify-content: right;
+}
+
+.navbar a {
+margin-right: 30px;
+ 
+  transition: all 0.2s ease-in-out;
+  color: var(--accent-color);
+  text-decoration: none;
+
+}
+
+.windowbar img {
+  display: none;
+}
+
+.hide {
+  display: none;
+}
\ No newline at end of file
diff --git a/assets/images/banner.png b/assets/images/banner.png
new file mode 100644
index 0000000..9db55fb
Binary files /dev/null and b/assets/images/banner.png differ
diff --git a/assets/images/bring.jpg b/assets/images/bring.jpg
new file mode 100644
index 0000000..863d23a
Binary files /dev/null and b/assets/images/bring.jpg differ
diff --git a/assets/images/mbg.png b/assets/images/mbg.png
new file mode 100644
index 0000000..533b919
Binary files /dev/null and b/assets/images/mbg.png differ
diff --git a/assets/images/osxbar.png b/assets/images/osxbar.png
new file mode 100644
index 0000000..ce68f02
Binary files /dev/null and b/assets/images/osxbar.png differ
diff --git a/assets/images/osxbuttons.png b/assets/images/osxbuttons.png
new file mode 100644
index 0000000..15a39f6
Binary files /dev/null and b/assets/images/osxbuttons.png differ
diff --git a/assets/images/osxwbar.png b/assets/images/osxwbar.png
new file mode 100644
index 0000000..560ecae
Binary files /dev/null and b/assets/images/osxwbar.png differ
diff --git a/assets/js/main.js b/assets/js/main.js
index d0480f3..8e5365d 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,73 +1,96 @@
 const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png", "cbg.png"];
 const colors = ["#676667", 'rgb(227, 154, 228)', '#C9A333', 'rgb(236, 36, 36)', '#990066'];
 var backgroundVideo;
-var pausetext;
+var backgroundVideoToggle;
+var randomBackgroundToggle
 window.onload = function () {
-
+    //Hide divs
     try {
-        document.getElementById("moreInfo").classList.add('div-hidden');
-        document.getElementById("specs").classList.add('div-hidden');
+        hideDropdowns();
     } catch (exception) {
         console.log("something was supposed to happen, but it didnt.");
     }
 
+    //set theme
+    //setTheme(localStorage.getItem("theme"));
 
 
+    backgroundVideoToggle = document.getElementById("enableVideoBackground");
+    randomBackgroundToggle = document.getElementById("backgroundVideoToggle");
     backgroundVideo = document.getElementById("bgvideo");
-    pausetext = document.getElementById("pausetext");
-    var enableVideoBackground = document.getElementById("enableVideoBackground");
-    var enableRandomBackrounds = document.getElementById("enableRandomBackrounds");
 
-if(!localStorage.getItem("enableRandomBackrounds") && !localStorage.getItem("enableVideoBackground")){
-    backgroundVideo.style.display = "block";
 
-    backgroundVideo.play();
-    setDefaultColorAndBackground();
-}
+
+    if (!localStorage.getItem("enableRandomBackrounds") && !localStorage.getItem("enableVideoBackground")) {
+        setDefaultBackground();
+        enableVideoBackground();
+        backgroundVideoToggle.checked = true;
+    }
     if (localStorage.getItem("enableRandomBackrounds") == "true") {
-        randomColorAndBackground();
-    }
-    if (localStorage.getItem("enableVideoBackground") == "true") {
-        backgroundVideo.play();
-        backgroundVideo.style.display = "block";
-        enableVideoBackground.checked = true;
+        setRandomBackground();
+    }else{
+        setDefaultBackground();
     }
 
-    enableVideoBackground.addEventListener('change', function () {
+    if (localStorage.getItem("enableVideoBackground") == "true") {
+      enableVideoBackground();
+    }else{
+        disableVideoBackground();
+    }
+
+
+
+    backgroundVideoToggle.addEventListener('change', function () {
         if (this.checked) {
-            backgroundVideo.style.display = "block";
-            enableRandomBackrounds.checked = false;
-            backgroundVideo.play();
-            setDefaultColorAndBackground();
-            localStorage.setItem("enableVideoBackground", true);
+            setDefaultBackground();
+            enableVideoBackground();
+            randomBackgroundToggle.checked = false;
+
         } else {
-            backgroundVideo.style.display = "none";
-            localStorage.setItem("enableVideoBackground", false);
+            disableVideoBackground();
         }
     });
-    enableRandomBackrounds.addEventListener('change', function () {
+
+    randomBackgroundToggle.addEventListener('change', function () {
         if (this.checked) {
-            backgroundVideo.style.display = "none";
-            randomColorAndBackground();
-            enableVideoBackground.checked = false;
-            localStorage.setItem("enableRandomBackrounds", true);
-            localStorage.setItem("enableVideoBackground", false);
+            disableVideoBackground();
+            setRandomBackground();
+            backgroundVideoToggle.checked = false;
 
         } else {
-            setDefaultColorAndBackground();
+            setDefaultBackground();
             localStorage.setItem("enableRandomBackrounds", false);
         }
     });
+
 };
 
-function randomColorAndBackground() {
+function disableVideoBackground() {
+    backgroundVideo.style.display = "none";
+    localStorage.setItem("enableVideoBackground", false);
+}
+
+function enableVideoBackground() {
+    backgroundVideo.style.display = "block";
+    setDefaultBackground();
+    backgroundVideo.play();
+    localStorage.setItem("enableVideoBackground", true);
+}
+
+function hideDropdowns() {
+    document.getElementById("moreInfo").classList.add('div-hidden');
+    document.getElementById("specs").classList.add('div-hidden');
+}
+
+function setRandomBackground() {
     console.log("ran");
     const randValue = getRandomInt(backgrounds.length);
     document.documentElement.style.setProperty('--accent-color', colors[randValue]);
     document.body.style.background = getBackground(randValue);
     document.body.style.backgroundSize = "cover";
+    localStorage.setItem("enableRandomBackrounds", true);
 }
-function setDefaultColorAndBackground() {
+function setDefaultBackground() {
     document.documentElement.style.setProperty('--accent-color', colors[1]);
     document.body.style.background = getBackground(1);
     document.body.style.backgroundSize = "cover";
@@ -79,7 +102,7 @@ function pauseVideo() {
         backgroundVideo.play();
     }
 }
-function showThing(element) {
+function showElement(element) {
     var gallery = document.getElementById(element);
     if (gallery.classList.contains("div-hidden")) {
         gallery.classList.remove('div-hidden');
@@ -94,11 +117,6 @@ function rotate() {
     var button = document.getElementById("rotate_button");
     button.style.display = "none";
 }
-function reset_animation(element) {
-    element.style.animation = 'none';
-    element.offsetHeight; /* trigger reflow */
-    element.style.animation = null;
-}
 
 function getBackground(i) {
     return 'url("/assets/images/' + backgrounds[i] + '")';
@@ -107,15 +125,69 @@ function getBackground(i) {
 function getRandomInt(max) {
     return Math.floor(Math.random() * max);
 }
+
 function showSettings() {
     var settings = document.getElementById("settings");
     if (settings.style.display == "none") {
         settings.style.display = "block";
-        setTimeout(() => {    settings.style.opacity = "1"; }, 200);
-      
+        setTimeout(() => { settings.style.opacity = "1"; }, 200);
+
     } else {
         settings.style.opacity = "0";
-        setTimeout(() => {  settings.style.display = "none"; }, 200);
-       
+        setTimeout(() => { settings.style.display = "none"; }, 200);
+
     }
-}
\ No newline at end of file
+}
+
+function changeTheme() {
+    var themesList = document.getElementById("themes");
+    console.log(themesList.options[themesList.selectedIndex].text);
+    setTheme(themesList.options[themesList.selectedIndex].text);
+    location.reload();
+}
+
+function setTheme(themeToSet) {
+    var themeLink = document.getElementById("theme");
+
+    var r = document.querySelector(':root');
+    switch (themeToSet) {
+        case "MineWatch":
+            console.log("glass");
+            themeLink.removeAttribute("href");
+            themeLink.setAttribute("href", "/assets/css/minewatch.css");
+            localStorage.setItem("theme", "MineWatch");
+            document.documentElement.style.setProperty('--accent-color', '#64c9fb');
+            break;
+        case "Glass":
+            console.log("glass");
+            themeLink.removeAttribute("href");
+            themeLink.setAttribute("href", "/assets/css/style.css");
+            localStorage.setItem("theme", "Glass");
+            backgroundVideoToggle.removeAttribute("disabled");
+            enableVideoBackground.removeAttribute("disabled");
+            document.documentElement.style.setProperty('--accent-color', '#E39AE4');
+            break;
+        case "OSX":
+            console.log("glass");
+            themeLink.removeAttribute("href");
+            themeLink.setAttribute("href", "/assets/css/osx.css");
+            localStorage.setItem("theme", "OSX");
+
+            backgroundVideoToggle.removeAttribute("disabled");
+            enableVideoBackground.removeAttribute("disabled");
+            document.documentElement.style.setProperty('--accent-color', '#E39AE4');
+            break;
+        case "~vern":
+            console.log("glass");
+            themeLink.removeAttribute("href");
+            themeLink.setAttribute("href", "/assets/css/vern.css");
+            localStorage.setItem("theme", "~vern");
+
+            backgroundVideoToggle.removeAttribute("disabled");
+            enableVideoBackground.removeAttribute("disabled");
+            document.documentElement.style.setProperty('--accent-color', '#ff6c6b');
+            break;
+
+    }
+
+}
diff --git a/assets/misc/lsansuni.ttf b/assets/misc/lsansuni.ttf
new file mode 100644
index 0000000..8840730
Binary files /dev/null and b/assets/misc/lsansuni.ttf differ
diff --git a/Untitled.mp4 b/assets/videos/comp.mp4
similarity index 100%
rename from Untitled.mp4
rename to assets/videos/comp.mp4
diff --git a/assets/videos/drip.mp4 b/assets/videos/drip.mp4
new file mode 100644
index 0000000..d7ad1c6
Binary files /dev/null and b/assets/videos/drip.mp4 differ
diff --git a/assets/videos/integritty_hitting_the_gritty.mp4 b/assets/videos/integritty_hitting_the_gritty.mp4
new file mode 100644
index 0000000..f2ae1c0
Binary files /dev/null and b/assets/videos/integritty_hitting_the_gritty.mp4 differ
diff --git a/assets/videos/plasma.mp4 b/assets/videos/plasma.mp4
new file mode 100644
index 0000000..6a42749
Binary files /dev/null and b/assets/videos/plasma.mp4 differ
diff --git a/assets/videos/where.mp4 b/assets/videos/where.mp4
new file mode 100644
index 0000000..d00935e
Binary files /dev/null and b/assets/videos/where.mp4 differ
diff --git a/index.html b/index.html
index 3f5add8..a0215c8 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,8 @@
 <html>
 
 <head>
-    <title>Homepage - Gnawmon</title>
-    <link rel="stylesheet" href="assets/css/style.css">
+    <title >Homepage - Gnawmon</title>
+    <link id="theme" rel="stylesheet" href="assets/css/style.css">
   <link rel="stylesheet" href="assets/css/fetch.css">
   <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
     <script src="assets/js/main.js"></script>
@@ -11,43 +11,55 @@
 
 <body>
     
-    <video muted loop class="bgvideo" id="bgvideo">
-        <source src="Untitled.mp4" type="video/mp4">
+    <video style="display: none;" muted loop autoplay class="bgvideo" id="bgvideo">
+        <source src="/assets/videos/plasma.mp4" type="video/mp4">
     </video>
 
     <div class="middlething">
-        <div class="navbar"> <a id="active" href="index.html">Main Page </a> <a href="projects.html
+        <img class="banner" id="banner"  src="/assets/images/banner.png">
+        <div class="navbar"> <img src="http://freevector.co/wp-content/uploads/2014/07/72887-pear-fruit.png" class="hide" style="width: 10px;  scale: 1.7; margin-left: 10px;">  <a id="active" href="index.html">Main Page </a> <a href="projects.html
         ">Projects </a> <a  href="art.html">Art </a>  <img src="assets/svg/gear.svg"  class="gear" onclick="showSettings()"/></div>
     <div style="display: none;" class="settings" id="settings">
+        <p  class=" windowbar hide " style="width: 100%; margin-top: 0px;"><img src="/assets/images/osxbuttons.png" class="hide"> Settings</p><br>
         <label class="switch">
             <input type="checkbox" id="enableVideoBackground">
             <span class="slider"></span>
           </label> <p>Video Background</p>
           <br>
-          <label class="switch">
-            <input type="checkbox" id="enableRandomBackrounds">
+          <label class="switch" >
+            <input type="checkbox" id="backgroundVideoToggle">
             <span class="slider"></span>
-          </label> <p>Random Backgrounds</p>
+          </label> <p>Random Backgrounds</p> <br>
+          <select style="display: none;"  id="themes" onchange = "changeTheme()">
+            <option value="osx">OSX</option>
+            <option value="glass">Glass</option>
+            <option value="minewatch">MineWatch</option>
+            <option value="vern">~vern</option>
+          </select>  <p style="display: none;">Theme</p>
     </div>
     
-        <h3 class="paragraph invert" style="margin-top: 40px;">Hello hi, I'm Gnawmon</h3>
-        <p class="paragraph">
+        <h3 style="width: 41%; margin-top: 40px;" class="paragraph invert windowbar" ><img src="/assets/images/osxbuttons.png"> Hello hi, I'm Gnawmon</h3>
+       <div class="gallery" style="margin-top: -18px;">
             I'm a programmer and an artist <br> <br>
-            I program in c# and python, I wanna learn a <tot class="tooltip">lower level language<span
-                    class="tooltiptext">rust, c or c++ idk</span> </tot> at one point too. I've made a few games in
+            I program in c# and python, I wanna learn a <p class="tooltip">lower level language<span
+                    class="tooltiptext">rust, c or c++ idk</span> </p> at one point too. I've made a few games in
             unity and never posted them online. <br> <br>
-            I've made <tot class="tooltip">a few scenery<span class="tooltiptext">You're looking at them right now!
-                    Although they're blurred</span> </tot> in blender and posted a few on <a class="link"
+            I've made <p class="tooltip">a few scenery <span
+                class="tooltiptext">check them out in the art section!</span> </p> in blender and posted a few on <a class="link"
                 target=”_blank” href="https://nitter.net/Gnawmon">twitter</a> but stopped posting a while back. I
-            also made prodecural textures with substance 3d in the past.<br><br>
-            I use an arch based os btw<br><br>
+            also made prodecural textures with substance 3d in the past.
+            <div class="gallery bnav">
+                <p><a href="https://webring.crumpetalpaca.eu.org/gnawmon/previous" id="left"><</a> bring <a href="https://webring.crumpetalpaca.eu.org/gnawmon/next" id="right">></a></p>
+            </div>
+       </div>
+    
    <!--   <button onclick="pauseVideo()">Pause the video</button> -->
 
 
         </p>
-        <h2 onclick="showThing('moreInfo')" class="paragraph dropdown">More</h2>
+        <h2 style="width: 41%;" onclick="showElement('moreInfo')" class="paragraph dropdown windowbar"><img src="/assets/images/osxbuttons.png"> More</h2>
         <div class="gallery" id="moreInfo">
-            <p class="paragraph">
+          
                 I speak <s>3</s> 2 languages <br> <br> 
                 <p>Not in a particular order, my favourite video games</p>
                 <ul>
@@ -65,11 +77,11 @@
                     <li>Team Fortress 2</li>
                     <li>Oneshot</li>
                 </ul>
-               <a> also heres <a class="link" href="assets/misc/pgp.txt"> my pgp key</a> 
+               also heres <a class="link" href="assets/misc/pgp.txt"> my pgp key</a> 
         
-            </p>
+            
         </div>
-        <h2  onclick="showThing('specs')" class="paragraph dropdown">Computers</h2>
+        <h2 style="width: 41%;" onclick="showElement('specs')" class="paragraph dropdown windowbar"><img src="/assets/images/osxbuttons.png"> Computers</h2>
         <div class="gallery" id="specs" style="margin-bottom: 2px;">
         <h3>Lonix Machine </h3> 
         <ul>
@@ -77,7 +89,6 @@
          <li>Nvidia GTX GPU</li>
          <li>AMD CPU</li>
          <li>Runs EndeavourOS with KDE Plasma</li>
-         <li><code>curl http://gnawmon.vern.cc/endeavour</code> run this to see fetch on your computer</li>    </ul>
          <div class="term-container"><span class="term-fg31 term-fg1">                                 .&#47;</span><span class="term-fg35 term-fg1">o</span><span class="term-fg34 term-fg1">.</span>                  <span class="term-fg31 term-fg1">gnawmon</span>@<span class="term-fg31 term-fg1">lepc</span>
             <span class="term-fg31 term-fg1">                   .&#47;</span><span class="term-fg35 term-fg1">sssso</span><span class="term-fg34 term-fg1">-</span>                ------------
             <span class="term-fg31 term-fg1">                 `:</span><span class="term-fg35 term-fg1">osssssss+</span><span class="term-fg34 term-fg1">-</span>              <span class="term-fg35 term-fg1">OS</span>: EndeavourOS Linux x86_64
@@ -107,7 +118,6 @@
          <li>Another Nvidia GTX GPU</li>
          <li>Intel CPU</li>
          <li>Runs Windows 10</li>
-         <li><code>curl http://gnawmon.vern.cc/windows</code></li>
         </ul>
         <div class="term-container"><span class="term-fg36 term-fg1">                                            ..,</span>   <span class="term-fg36 term-fg1">Gnawmon@DESKTOP-BVIMVA0</span>
             <span class="term-fg36 term-fg1">                    ....,,:;+ccllll</span>   ------------------
@@ -163,7 +173,7 @@
                                            <span class="term-fgx8 term-bgx8">   </span><span class="term-fgx9 term-bgx9">   </span><span class="term-fgx10 term-bgx10">   </span><span class="term-fgx11 term-bgx11">   </span><span class="term-fgx12 term-bgx12">   </span><span class="term-fgx13 term-bgx13">   </span><span class="term-fgx14 term-bgx14">   </span><span class="term-fgx15 term-bgx15">   </span></div>                 
         </div>
         <div class="contact">
-            <img src="assets/svg/matrix.svg" height="40" width="40" />
+            <img src="assets/svg/matrix.svg" height="40" width="40" /> 
             <p>@gnawmon@matrix.org</p>
         </div>
 
@@ -187,33 +197,36 @@
             <img src="assets/svg/mail.svg" height="40" width="40" />
             <p>gnawmon@vern.cc</p>
         </div>
-        <div class="smalimages">
+        
+        <div class="smalimages gallery">
+            <p  class="windowbar hide" style="width: 104.2%; margin-top: -47px; margin-left: -20px;"><img src="/assets/images/osxbuttons.png">Buttons!</p>
             <p>people</p>
-            <a href="https://dottych.github.io/"> <img src="assets/88x31/dottych.png"></img></a>
-            <a href="https://andrewidot.neocities.org"><img src="https://andrewidot.neocities.org/assets/88x31/andrewidot_88x31.gif"></a>
-            <a href="https://gnawmon.vern.cc"> <img src="assets/88x31/gnawmon.png"></img></a>
-            <a href="https://tauon.dev/" target="_blank"><img src="https://tauon.dev/images/88x31/lily.png" alt="lily" /></a>
-            <a href="https://liminalityyy.github.io/"> <img src="assets/88x31/liminal.png"></img></a>
-            <a href="https://illudens.neocities.org"><img src="https://illudens.neocities.org/illudens.gif"></a>
+            <a href="https://dottych.github.io/"> <img title="dottych" alt="dottych" src="assets/88x31/dottych.png"></img></a>
+            <a href="https://andrewidot.neocities.org"><img title="andrewidot" alt="andrewidot" src="https://andrewidot.neocities.org/assets/88x31/andrewidot_88x31.gif"></a>
+            <a href="https://gnawmon.vern.cc"> <img title="me!" alt="me!" src="assets/88x31/gnawmon.png"></img></a>
+            <a href="https://tauon.dev/" target="_blank"><img title="tauon" alt="tauon" src="https://tauon.dev/images/88x31/lily.png" alt="lily" /></a>
+            <a href="https://liminalityyy.github.io/"> <img title="liminal" alt="liminal" src="assets/88x31/liminal.png"></img></a>
+            <a href="https://illudens.neocities.org"><img title="illudens" alt="illudens" src="https://illudens.neocities.org/illudens.gif"></a>
 
             <p>software i like</p>
-            <a href="https://endeavouros.com/"> <img src="assets/88x31/endeavour.png"></img> </a>
-            <a href="https://www.mozilla.org/en-US/firefox/new"> <img src="assets/88x31/firefox.gif"></img></a>
-            <a href="https://balls-online-plus.onrender.com"> <img src="assets/88x31/bop.gif"></img></a>
+            <a href="https://endeavouros.com/"> <img title="endeavour os" alt="endeavour os" src="assets/88x31/endeavour.png"></img> </a>
+            <a href="https://www.mozilla.org/en-US/firefox/new"> <img title="firefox" alt="firefox" src="assets/88x31/firefox.gif"></img></a>
+            <a href="https://balls-online-plus.onrender.com"> <img title="balls online plus" alt="balls online plus" src="assets/88x31/bop.gif"></img></a>
 
             <p>other</p>
-            <a href="https://vern.cc"> <img src="assets/88x31/vern.png"></img></a>
-            <img src="assets/88x31/ie_exploder.gif"></img>
-            <a href="https://yesterweb.org/no-to-web3/"><img src="assets/88x31/saynotoweb3.gif"></img></a>
-            <a href="https://www.youtube.com/@Windows969"><img src="assets/88x31/96.png"></img></a>
+            <a href="https://vern.cc"> <img title="~vern" alt="~vern" src="assets/88x31/vern.png"></img></a>
+            <img title="internet exploder" alt="internet exploder"  src="assets/88x31/ie_exploder.gif"></img>
+            <a href="https://yesterweb.org/no-to-web3/"><img title="say no to web3" alt="say no to web3" src="assets/88x31/saynotoweb3.gif"></img></a>
+            <a href="https://www.youtube.com/@Windows969"><img title="windows 96" alt="windows 96" src="assets/88x31/96.png"></img></a>
             <p>unfiction</p>
-            <img src="assets/88x31/mwd.png"></img>
-            <a href="https://www.youtube.com/@minewatch/about"> <img src="assets/88x31/minexplorer.png"></img></a>
-            <a href="https://www.youtube.com/@unintelligible-synapse"> <img src="assets/88x31/tbotvact1.png"></img></a>
-            <a href="https://www.youtube.com/@minewatch/about"> <img src="assets/88x31/minewatch.png"></img></a>
+            <img title="mwd" alt="mwd" src="assets/88x31/mwd.png"></img>
+            <a href="https://www.youtube.com/@minewatch/about"> <img title="minexplorer" alt="minexplorer" src="assets/88x31/minexplorer.png"></img></a>
+            <a href="https://www.youtube.com/@unintelligible-synapse"> <img title="tbotv act 1" alt="tbotv act 1" src="assets/88x31/tbotvact1.png"></img></a>
+            <a href="https://www.youtube.com/@minewatch/about"> <img title="minewatch" alt="minewatch" src="assets/88x31/minewatch.png"></img></a>
     </div>
         <button id="rotate_button" onclick="rotate()" style="width: 90px; align-self: center;">rotate</button>
-        <p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website" class="link">source code</a></p>
+
+        <div class="bottomThingThatEveryWebsiteHas"> <p>written by hand <br> some css in the ~vern theme is taken from <a class="link" href="http://git.vern.cc/vern/website">here</a> <br>         <a href="http://git.vern.cc/gnawmon/website" class="link">source code</a> is avaible here, not sure why anybody would want to check it but here it is </p></div>
     </div>
 
 </body>
diff --git a/projects.html b/projects.html
index cbb52f4..4bc44da 100644
--- a/projects.html
+++ b/projects.html
@@ -3,31 +3,39 @@
 
 <head>
     <title>Projects - Gnawmon</title>
-    <link rel="stylesheet" href="/assets/css/style.css">
+    <link id="theme" rel="stylesheet" href="/assets/css/style.css">
     <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
     <script src="/assets/js/main.js"></script>
 </head>
 
 <body>
 
-    <video autoplay muted loop class="bgvideo" id="bgvideo">
-        <source src="Untitled.mp4" type="video/mp4">
+    <video style="display: none;" muted loop autoplay class="bgvideo" id="bgvideo">
+        <source src="/assets/videos/plasma.mp4" type="video/mp4">
     </video>
  
-    <div class="navbar"> <a  href="index.html">Main Page </a> <a id="active" href="projects.html
-        ">Projects </a><a  href="art.html">Art </a>   <img src="assets/svg/gear.svg"  class="gear" onclick="showSettings()"/></div>
-    <div style="display: none;" class="settings" id="settings">
-        <label class="switch">
-            <input type="checkbox" id="enableVideoBackground">
-            <span class="slider"></span>
-          </label> <p>Video Background</p>
-          <br>
-          <label class="switch">
-            <input type="checkbox" id="enableRandomBackrounds">
-            <span class="slider"></span>
-          </label> <p>Random Backgrounds</p>
-    </div>
     <div class="middlething">
+        <img class="banner" id="banner" style="display: none;" src="/assets/images/banner.png">
+        <div class="navbar"> <a  href="index.html">Main Page </a> <a id="active" href="projects.html
+        ">Projects </a> <a  href="art.html">Art </a>  <img src="assets/svg/gear.svg"  class="gear" onclick="showSettings()"/></div>
+        <div style="display: none;" class="settings" id="settings">
+            <p  class=" windowbar hide " style="width: 100%; margin-top: 0px;"><img src="/assets/images/osxbuttons.png" class="hide"> Settings</p><br>
+            <label class="switch">
+                <input type="checkbox" id="enableVideoBackground">
+                <span class="slider"></span>
+              </label> <p>Video Background</p>
+              <br>
+              <label class="switch" >
+                <input type="checkbox" id="backgroundVideoToggle">
+                <span class="slider"></span>
+              </label> <p>Random Backgrounds</p> <br>
+              <select style="display: none;"  id="themes" onchange = "changeTheme()">
+                <option value="osx">OSX</option>
+                <option value="glass">Glass</option>
+                <option value="minewatch">MineWatch</option>
+                <option value="vern">~vern</option>
+              </select>  <p style="display: none;">Theme</p>
+        </div>
       
 
         <div class="showcases" >
@@ -36,7 +44,7 @@
                     src="/assets/cats/fanofargs.png"></img> </p>
             <div class="showcase" id="relaunch">
 
-                <h2>ReLaunch | A Minecraft Launcher</h2>
+                <h2 class="windowbar">ReLaunch | A Minecraft Launcher</h2>
                 <img src="/assets/images/minecraftLauncher.png">
                 <span>A launcher made with <a href="https://alphaver.miraheze.org/wiki/AlphaVer_Wiki" class="link">Alphaver</a> in mind. <br><br> It will/was going to have windows and linux support. <br> <br> <a class="link" href="http://git.vern.cc/gnawmon/ReLaunch">Git Repo</a></span>
             </div>
@@ -57,18 +65,24 @@
                 <img src="/assets/images/minewatchWiki.png">
                 <span>I wrote most of the pages.  <br><br> Also please don't use fandom version of this wiki. <br> <br> <a href="https://minewatch.miraheze.org/wiki/Minewatch_Wiki" class="link">Link</a></span>
             </div>
-            <div class="showcase" id="blur">
+            <div class="showcase" id="bring">
+                <h2>Bring</h2>
+                <span style="margin-left: 20px; width: 75%;">A webring (software) written in python.<br><br> <a class="link" href="http://git.vern.cc/gnawmon/bring"> Git Repo</a> <br><br><a class="link" href="https://webring.crumpetalpaca.eu.org">Link</a> </span>
+            </div>
+            <div class="showcase" >
 
                 <h2>This Website?</h2>
-                <span style="margin-left: 20px;">lorem ipsum i forgot </span>
+               
+                <span>lorem ipsum sir i forgot the rest</span>
             </div>
            
+           
             <br> <br>
             <!--  <button onclick="pauseVideo()">Pause the video</button> -->
 
         </div>
 
-        <p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website" class="link">source code</a></p>
+        <div class="bottomThingThatEveryWebsiteHas"> <p>written by hand <br> some css in the ~vern theme is taken from <a class="link" href="http://git.vern.cc/vern/website">here</a> <br>         <a href="http://git.vern.cc/gnawmon/website" class="link">source code</a> is avaible here, not sure why anybody would want to check it but here it is </p></div>
     </div>
 
 </body>
