add favicon, make header wayyy better, optimise images

site is now around 1mb

bundle.css

@@ -3,11 +3,15 @@
   --accent: #ff1b8d;
   --accent2: #FA7DBC;
   --background: #fba0e3;
-  --background-body: #fdc6ee;
+  --background-body: #ffcff1;
   --rounding: 8em; 
   --transitiondur: 0.3s;
 }
 
+* {
+  transition-duration: var(--transitiondur);
+}
+
 body {
   padding: 0px;
   margin: auto;
@@ -26,44 +30,62 @@ a {
 }
 
 a:hover {
-  color: black;
-  background-color: var(--accent2);
+  border-radius: var(--rounding);
+  background-color: var(--text);
+  rotate: -2deg;
+  scale: 125%;
   transform: translateY(-10px);
-  display: inline-block;
+
   padding: 10px;
   margin: -10px;
+  display: inline-block;
 }
 
 /*
- * navbar
+ * header
  */
 
-nav {
-  margin: 1em;
-  padding: 0.5em;
-  padding-left: 0.5em;
-  padding-right: 3em;
-
+header {
+  background-image: url("/img/astolfos/header.gif");
+  background-position: 100% 100%;
+  background-size: 100% 100%;
   border-radius: var(--rounding);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
-  background-color: var(--background);
 
+  width: 60em;
+  height: 30em;
+  margin: auto;
+  margin-top: 2em;
+  animation: spinin 1s;
+}
+
+header:hover {
+  transition-duration: 3s;
+  scale: 125%;
+  transform: translateY(10%);
+  filter: hue-rotate(360deg);
+}
+
+header h1 {
+  border-radius: var(--rounding);
+  background-color: var(--accent2);
+
+  position: relative;
+  top: 3em;
+  margin: auto;
+  font-size: 8em;
+  height: fit-content;
   width: fit-content;
-  position: fixed;
-  right: 0;
-  top: 0;
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
 }
 
-nav ul {
-  list-style-type: none;
+#wave-text * {
+  animation: wave 3s infinite;
+  display: inline-block;
+
 }
 
-nav li{
-  display: inline;
-}
-
-nav a{
-  transition-duration: 0.3s;
+header a{
   padding: 0.3em;
   display: inline-block;
   border-radius: var(--rounding);
@@ -71,7 +93,7 @@ nav a{
   color: var(--text);
 }
 
-nav a:hover {
+header a:hover {
   background-color: var(--accent2);
   scale: 200%;
   transform: translateY(-5px) rotate(-7deg);
@@ -79,6 +101,43 @@ nav a:hover {
   margin-right: 2em;
 }
 
+@keyframes wave { 
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    scale: 120%;
+  }
+  50% {
+    transform: translateY(-50px);
+  }
+  75% {
+    scale: 140%;
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+@keyframes spinin { 
+  0% {
+    transform: translateY(-100vh);
+    rotate: 360deg;
+    scale: 300%;
+  }
+  100% {
+    transform: translateY(0px);
+    rotate: 0deg;
+    scale: 100%;
+  }
+}
+
+/*
+ * nav/sidebar
+ */
+
+
+
 /*
  * footer
  */
@@ -94,7 +153,7 @@ footer {
   border-top-left-radius: var(--rounding);
   box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
 
-  background-image: url("/img/astolfos/footer.png");
+  background-image: url("/img/astolfos/footer.webp");
   background-position: 100% 100%;
   background-size: 10em;
   background-repeat: no-repeat;
@@ -114,6 +173,18 @@ footer p,hr,div {
 }
 
 @media (max-width: 1000px) {
+  header {
+    margin: none;
+    width: 100%;
+    height: auto;
+    border-radius: 0px;
+    margin-top: 0px;
+  }
+
+  header h1 {
+    top: 0.3em;
+  }
+
   footer {
     flex-direction: column;
   }