1 files changed, 2 insertions, 285 deletions
diff --git a/docs/index.html b/docs/index.html
index 9263023..c2525e1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,291 +3,8 @@
 <head>
 <title>Xena Vectra</title>
 <meta charset="utf-8">
-<style>
-@font-face {
-    font-family: nhg;
-    src: url(./fonts/NHaasGroteskTXPro-55Rg.ttf);
-    font-weight: normal;
-    font-style: normal;
-}
-@font-face {
-    font-family: nhg;
-    src: url(./fonts/NHaasGroteskTXPro-56It.ttf);
-    font-weight: normal;
-    font-style: italic;
-}
-@font-face {
-    font-family: nhg;
-    src: url(./fonts/NHaasGroteskTXPro-75Bd.ttf);
-    font-weight: bold;
-    font-style: normal;
-}
-@font-face {
-    font-family: nhg;
-    src: url(./fonts/NHaasGroteskTXPro-76BdIt.ttf);
-    font-weight: bold;
-    font-style: italic;
-}
-html, body {
-  margin: 0; padding: 0; width: 100%; height: 100%;
-  font-family: nhg, sans-serif;
-  color: rgba(255,255,255,0.9);
-}
-html {
-  background-color: rgb(0,0,0);
-  background-image: linear-gradient(rgba(20, 10, 0, 0.0), rgba(20, 10, 0, 1.0));
-  background-attachment: fixed;
-  transition: background-color 1s;
-}
-html.day {
-  background-color: rgb(80,10,60);
-}
-html.night {
-  background-color: rgb(8,10,30);
-}
-body {
-  background-color: rgba(0,0,0,0);
-  transition: background-color 1000ms, opacity 500ms;
-  opacity: 1;
-}
-body.loading {
-  background-color: rgba(255,128,192,1);
-  background-color: black;
-  opacity: 0;
-}
-body.fade {
-  opacity: 1;
-  background-color: black;
-  background-color: rgba(255,128,192,1);
-}
-.shards {
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-}
-.bgs {
-  position: absolute;
-  top: 50%; left: 50%;
-  opacity: 0.7;
-  transition: opacity 500ms;
-}
-.stars {
-  transition: all 500ms cubic-bezier(0,0,0,1);
-  transform: translateZ(0) scaleX(1) scaleY(1);
-}
-.stars.fade {
-  transform: translateZ(0) scaleX(1.03) scaleY(1.03);
-}
-.fade {
-  opacity: 0;
-}
-.bg {
-  position: absolute;
-  top: 0; left: 0;
-  transition: all 120s;
-}
-header {
-  background-color: rgba(40,20,30,0.9);
-  position: absolute;
-  width: 100%;
-  bottom: 100px;
-  left: 0;
-}
-p {
-  margin: 0; padding: 0;
-  line-height: 1.4;
-}
-p + p {
-  margin-top: 14px;ß
-}
-a {
-  text-decoration: none;
-  color: rgba(255,255,255,0.8);
-  transition: color 200ms;
-  border-bottom: 1px dotted;
-}
-a:hover {
-  color: rgba(255,255,255,1.0);
-}
-img {
-  max-width: 100%;
-}
-img.cover {
-  max-width: 300px;
-}
-.menu a {
-  margin-right: 10px;
-  border-bottom: 0;
-}
-.menu a.active {
-  border-bottom: 1px dotted;
-  color: rgba(255,255,255,1.0);
-}
-.logo {
-  width: 400px;
-  opacity: 0.8;
-  animation: fade 10s infinite;
-}
-.row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-h1 {
-  font-size: 32px;
-  margin: 0;
-  padding: 10px 20px;
-  letter-spacing: -2px;
-  text-transform: uppercase;
-  cursor: pointer;
-  opacity: 0.9;
-  transition: opacity 500ms;
-  color: white;
-}
-h1:hover {
-  opacity: 1;
-}
-h2 {
-  margin: 0;
-  padding: 0 0 15px 0;
-  letter-spacing: -1px;
-}
-h3 {
-  margin: 0;
-  padding: 0 0 6px 0;
-  letter-spacing: 1px;
-  font-weight: normal;
-  font-style: italic;
-  font-size: 14px;
-  text-transform: uppercase;
-  opacity: 0.7;
-}
-ul {
-  margin: 0 0 20px 0;
-  padding: 0;
-  list-style-type: none;
-}
-ul li {
-  list-style-type: none;
-  line-height: 1.4;
-}
-ol {
-  margin: 0 0 20px 0;
-  padding: 0;
-}
-ol li {
-  line-height: 1.4;
-}
-.player {
-  padding: 12px 20px;
-  width: 300px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-  border-left: 1px solid #000;
-}
-.player .icon {
-  width: 1.2em;
-  height: 1.2em;
-  background-image: url(img/pause-inv.png);
-  background-size: 100%;
-  background-position: center;
-  border: 2px solid rgba(255,255,255,0.3);
-  border-radius: 100%;
-  margin: 0 10px 0 10px;
-}
-.player.playing .icon {
-  background-image: url(img/pause-inv.png);
-}
-.player.paused .icon {
-  background-image: url(img/play-inv.png);
-}
-.player .track {
-  transition: all 100ms;
-  flex: auto;
-}
-.player:hover .track {
-  color: rgba(255,255,255,1.0);
-}
-.playlist {
-  -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
-  max-height: calc(100vh - 140px);
-  width: 331px;
-  max-width: calc(100vw - 30px);
-  background: black;
-  position: absolute;
-  bottom: 160px; right: 0;
-  margin: 0px 10px;
-  padding: 0px;
-  height: 0; overflow: hidden;
-  transition: all 0.5s cubic-bezier(0,1,1,1);
-}
-.playlist.visible {
-  height: 180px;
-}
-.playlist ul {
-  margin: 0; padding: 0;
-}
-.playlist li {
-  margin: 0; padding: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: rgba(20,5,10,0.5);
-}
-.playlist li.active {
-  color: #000;
-  background: rgba(255,255,255,0.9);
-}
-.playlistToggle {
-  align-self: flex-end;
-  width: 15px;
-  height: 15px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  justify-content:space-between;
-}
-.playlistToggle div {
-  width: 100%;
-  height: 2px;
-  border-bottom: 1px solid #999;
-  background: white;
-}
-section {
-  -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
-  max-height: calc(100vh - 140px);
-  max-width: 500px;
-  background: black;
-  position: absolute;
-  bottom: 160px; left: 0;
-  margin: 10px 10px;
-  padding: 10px;
-  background: rgba(20,5,10,0.5);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 200ms;
-}
-.bio #bio,
-.discography #discography,
-.hardware #hardware,
-.contact #contact {
-  opacity: 1;
-  pointer-events: auto;
-}
-@keyframes fade {
-  0% { opacity: 0.6; }
- 50% { opacity: 1.0; }
- 90% { opacity: 0.7; }
-100% { opacity: 0.6; }
-}
-</style>
+<link rel="stylesheet" href="css/css.css" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
 </head>
 <body class='loading'>
 <div class="shards">