feat: new colors, updated bio, and mode..

styles.css

@@ -1,70 +1,56 @@
 @import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap');
 
 * {
     transition: background-color 0.15s ease-in-out;
 }
 
-html {
-    --rosewater: #dc8a78;
-    --flamingo: #dd7878;
-    --pink: #ea76cb;
-    --mauve: #8839ef;
-    --red: #d20f39;
-    --maroon: #e64553;
-    --peach: #fe640b;
-    --yellow: #df8e1d;
-    --green: #40a02b;
-    --teal: #179299;
-    --sky: #04a5e5;
-    --sapphire: #209fb5;
-    --blue: #1e66f5;
-    --lavender: #7287fd;
-    --text: #434f69;
-    --subtext1: #5c5f77;
-    --subtext0: #6c6f85;
-    --overlay2: #7c7f93;
-    --overlay1: #8c8fa1;
-    --overlay0: #9ca0b0;
-    --surface2: #acb0be;
-    --surface1: #bcc0cc;
-    --surface0: #ccd0da;
-    --base: #eff1f5;
-    --mantle: #e6e9ef;
-    --crust: #dce0e8;
+:root {
+    --base: #faf4ed;
+    --surface: #fffaf3;
+    --overlay: #f2e9e1;
+    --muted: #9893a5;
+    --subtle: #797593;
+    --text: #575279;
+    --love: #b4637a;
+    --gold: #ea9d34;
+    --rose: #d7827e;
+    --pine: #286983;
+    --foam: #56949f;
+    --iris: #907aa9;
+    --highlight-low: #f4ede8;
+    --highlight-med: #dfdad9;
+    --highlight-high: #cecacd;
 }
 
 .dark {
-    --rosewater: #f4dbd6;
-    --flamingo: #f0c6c6;
-    --pink: #f5bde6;
-    --mauve: #c6a0f6;
-    --red: #ed8796;
-    --maroon: #ee99a0;
-    --peach: #f5a97f;
-    --yellow: #eed49f;
-    --green: #a6da95;
-    --teal: #8bd5ca;
-    --sky: #91d7e3;
-    --sapphire: #7dc4e4;
-    --blue: #8aadf4;
-    --lavender: #b7bdf8;
-    --text: #cad3f5;
-    --subtext1: #b8c0e0;
-    --subtext0: #a5adcb;
-    --overlay2: #939ab7;
-    --overlay1: #8087a2;
-    --overlay0: #6e738d;
-    --surface2: #5b6078;
-    --surface1: #494d64;
-    --surface0: #363a4f;
-    --base: #24273a;
-    --mantle: #1e2030;
-    --crust: #181926;
+    --base: #191724;
+    --surface: #1f1d2e;
+    --overlay: #26233a;
+    --muted: #6e6a86;
+    --subtle: #908caa;
+    --text: #e0def4;
+    --love: #eb6f92;
+    --gold: #f6c177;
+    --rose: #ebbcba;
+    --pine: #31748f;
+    --foam: #9ccfd8;
+    --iris: #c4a7e7;
+    --highlight-low: #21202e;
+    --highlight-med: #403d52;
+    --highlight-high: #524f67;
 }
 
+.coiny-regular {
+  font-family: "Coiny", system-ui;
+  font-weight: 400;
+  font-style: normal;
+}
+
+
 ::selection {
-    background-color: var(--overlay0);
+    background-color: var(--overlay);
 }
 
 @keyframes fadein {
@@ -89,7 +75,7 @@ body {
     width: 100%;
     min-height: 100vh;
     /* height: 100vh; */
-    background-color: var(--crust);
+    background-color: var(--base);
     color: var(--text);
     display: grid;
     place-items: center;
@@ -108,13 +94,13 @@ body {
     height: 8in;
     margin-top: 5px;
     margin-bottom: 5px;
-    background-color: var(--base);
+    background-color: var(--surface);
     padding: 0.5in;
     position: relative;
     animation: 0.5s ease-out 0s 1 fadein;
     display: grid;
     grid-template-columns: 1fr 2.5in;
-    grid-template-rows: 0.85in 0.2fr 0.4fr auto;
+    grid-template-rows: 1.1in 0.2fr 0.4fr auto;
     gap: 0px 0px;
     grid-template-areas:
         "header header"
@@ -126,37 +112,45 @@ body {
 }
 
 a {
-    color: var(--sapphire);
+    color: var(--pine);
     transition:
         0.1s color ease-in-out,
         0.1s text-decoration ease-in-out;
     text-decoration: none;
+    font-weight: 500;
 }
 
 a:hover,
 a:active,
 a:focus {
-    color: var(--blue);
+    color: var(--iris);
     text-decoration: underline;
 }
 
 .header {
     grid-area: header;
+    font-size: 3em;
 }
 
 .bio {
     grid-area: bio;
     padding: 0 0.5in 0 0;
     text-align: justify;
+    overflow-wrap: break-word;
+    hyphens: auto;
+}
+
+.small-text {
+    font-style: italic;
+    font-size: 0.8em;
+    padding: 0;
+    margin: 0;
 }
 
 .world {
     grid-area: world;
 }
 
-.separator {
-}
-
 .aside {
     grid-area: aside;
     display: flex;
@@ -192,13 +186,64 @@ a:focus {
     position: relative;
 }
 
+.button {
+    display: block;
+    padding: 1em 2em;
+    color: var(--text);
+    z-index: 0;
+    position: relative;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.button:hover, .button:active, .button:focus {
+    text-decoration: unset;
+}
+
+.button:before {
+    content: '';
+    background: linear-gradient(45deg, var(--love), var(--gold), var(--rose), var(--pine), var(--foam), var(--iris), var(--love));
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    background-size: 200%;
+    z-index: -1;
+    filter: blur(4px);
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    animation: glowing 30s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+    opacity: 1;
+}
+
+.button:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--base);
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+    transition: background 0.1s ease-in-out;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}
+
 .theme {
     position: absolute;
     bottom: 0.125in;
     right: 0.125in;
-    background-color: var(--mantle);
-    color: var(--yellow);
-    border: 1px solid var(--overlay0);
+    background-color: var(--base);
+    color: var(--gold);
+    border: 1px solid var(--overlay);
     border-radius: 10in;
     margin: 0.125in 0 0;
     padding: 0.125in;