1 files changed, 117 insertions, 0 deletions
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0d3a55e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,117 @@
+@font-face {
+    font-family: Ubuntu;
+    src: url(ubuntu.ttf);
+}
+@font-face {
+    font-family: Ubuntu-Bold;
+    src: url(ubuntu-bold.ttf);
+}
+:root {
+    --hfont: 'Ubuntu-Bold', 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
+    --stdfont: 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
+}
+html, body {
+    min-height: 100%;
+    margin:0;
+    padding:0;
+}
+body {
+    overflow-x: clip;
+    color: gainsboro;
+    font-family: var(--stdfont);
+    background-color: black;
+    background-image: url('bg_default.png');
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    overflow-wrap: break-word;
+    display: flex;
+    flex-direction: row-reverse;
+}
+a {
+    color: gainsboro;
+}
+p {
+    text-shadow: 0 0 5px black;
+}
+#main {
+    flex: 50%;
+    padding: 1rem;
+    box-shadow: 0 0 45px 90px rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
+}
+#secondary {
+    flex: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#displaycontent {
+    box-shadow: 4px 4px 8px 2px black;
+    font-size: 0;
+}
+#header {
+    font-family: var(--hfont);
+    font-size: 3.5em;
+    color: transparent;
+    -webkit-text-stroke-width: 2px;
+    margin: 0;
+}
+#subheader {
+    margin-left: -5px;
+    font-size: 0.6em;
+    color: white;
+    -webkit-text-stroke-width: 0;
+    text-shadow: 0 0 9px white;
+    z-index: 1;
+    animation-name: subheaderappear;
+    animation-duration: 0.5s;
+}
+@keyframes subheaderappear {
+    from {color: #19191900; text-shadow: 0 0 0 black;}
+    to {color: white; text-shadow: 0 0 9px white;}
+}
+nav a {
+    text-decoration: none;
+    display: inline;
+    font-family: var(--hfont);
+    font-size: 1.4em;
+    padding: 5px;
+}
+@media(max-width: 80vh) {
+    body {
+        flex-direction: column;
+    }
+    #main {
+        padding: 1rem;
+        background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
+    }
+}
+.bandcamp-color { color: #629aa9; transition-duration: 0.2s; }
+.bandcamp-color:hover { color: #86c3d4 ; text-shadow: 0 0 7px #629aa9 ; }
+.youtube-color { color: #ff0000; transition-duration: 0.2s; }
+.youtube-color:hover { color: #ff5252 ; text-shadow: 0 0 7px #ff0000 ; }
+.itchio-color { color: #fa5c5c; transition-duration: 0.2s; }
+.itchio-color:hover { color: #ff8181 ; text-shadow: 0 0 7px #fa5c5c ; }
+.patreon-color { color: #FF424D; transition-duration: 0.2s; }
+.patreon-color:hover { color: #ff656c ; text-shadow: 0 0 7px #FF424D ; }
+.white-color { color: gainsboro; transition-duration: 0.2s; }
+.white-color:hover { color: white; text-shadow: 0 0 7px white;}
+
+#headerblue { -webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue; animation: hblue; animation-duration: 10s; animation-iteration-count: infinite;}
+@keyframes hblue {
+    0%, 100% {-webkit-text-stroke-color: rgb(0, 0, 200); text-shadow: 0 0 15px rgb(0, 0, 200);}
+    15% {-webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue;}
+}
+#headergreen { -webkit-text-stroke-color: #5ff508; text-shadow: 0 0 15px #5ff508; }
+#headeryellow { -webkit-text-stroke-color: gold; text-shadow: 0 0 15px gold; animation: hyellow; animation-duration: 16.7ms; animation-iteration-count: infinite;}
+@keyframes hyellow {
+    from {text-shadow: 0 0 15px rgba(219, 186, 0, 0.87);}
+    to {text-shadow: 0 0 15px gold;}
+}