1 files changed, 299 insertions, 0 deletions
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..98c1c93
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,299 @@
+@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
+
+/* Declare color variables */
+:root{
+  --title-color: #ff80a4;
+  --text-color: #ff2674;
+  --background-color: #202124;
+  --nav-background-color: #333;
+}
+
+/* make the scrolling smooth */
+html, body{
+  scroll-behavior: smooth;
+}
+
+.header{
+    color: var(--background-color);
+    padding: 10px;
+    font-size: 40px;
+    font-weight: bold;
+    text-align: center;
+    font-family: 'google sans', serif;
+    animation: colorchange 7s infinite alternate;
+}
+
+.java{
+    vertical-align: middle;
+    font-size: 10px;
+}
+
+.javaimg{
+    margin-left: 20%;
+    width: 50px;
+    height: 50px;
+    vertical-align: middle;
+}
+
+.rustimg{
+    margin-left: 2.6%;
+    width: 50px;
+    height: 50px;
+    vertical-align: middle;
+}
+
+.topnav{
+    /* make the navbar follow the scroll */
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: auto;
+    border: 1px solid var(--background-color);
+    box-shadow: 0px 0px 10px var(--background-color);
+    z-index: 1;
+    background-color: var(--nav-background-color);
+    overflow: hidden;
+    width: 100%;
+}
+
+.downnav{
+      /* make the navbar follow the scroll */
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      margin: auto;
+      overflow: hidden;
+      border: 1px solid var(--background-color);
+      box-shadow: 0px 0px 6px var(--background-color);
+      z-index: 1;
+      background-color: var(--nav-background-color);
+}
+
+.imsotired{
+  margin-left: 1%;
+  font-family: 'fira sans', serif;
+  color: var(--title-color);
+}
+
+.topnav a{
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-family: "google sans";
+    font-size: 15px;
+}
+
+.topnav a:hover{
+    background-color: #ddd;
+    color: black;
+}
+
+.topnav a.active{
+    background-color: var(--title-color);
+    color: white;
+}
+
+.java{
+    width: 5%;
+    font-family: 'fira sans', serif;
+    color: var(--title-color);
+    padding: 10px;
+    font-size: 40px;
+    font-weight: bold;
+    margin-left: 10%;
+    margin-top: 30px;
+}
+
+.notjava{
+    margin-left: 3%;
+    font-family: 'fira sans';
+    color: var(--text-color);
+}
+
+.data{
+    font-family: 'fira sans', serif;
+    color: var(--title-color);
+    padding: 10px;
+    font-size: 40px;
+    font-weight: bold;
+    margin-left: 10%;
+    margin-top: 30px;
+}
+
+.header span::before{
+  pointer-events: all;
+    content: "does ";
+    color: #fff;
+    animation: colorchange 5s infinite alternate;
+}
+
+.being{
+    margin-left: 11%;
+    font-family: 'fira sans';
+    color: var(--text-color);
+    font-size: 120%
+}
+
+
+.tooltip{
+  position: relative;
+  display: inline-block;
+  margin-left: 13%;
+  font-family: 'fira sans';
+  color: var(--text-color);
+  font-size: 120%
+}
+
+.tooltip .tooltiptext{
+  visibility: hidden;
+  width: 120px;
+  color: var(--title-color);
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  border:0px solid black;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -60px;
+  background-color:#ff267665;
+  opacity: 0;
+  transition: opacity 1s;
+}
+
+.tooltip:hover .tooltiptext{
+  visibility: visible;
+  opacity: 1;
+}
+
+.shh{
+text-decoration: none;
+font-family: 'fira sans';
+font-size: 120%;
+color: var(--title-color);
+}
+
+.aboutme{
+    margin-left: 13%;
+    font-family: 'fira sans';
+    color: var(--text-color);
+    font-size: 120%
+}
+
+.goimg{
+    width: 50px;
+    height: 50px;
+    vertical-align: middle;
+    margin-left: 10%;
+}
+
+@keyframes colorchange{
+    0% {
+      color: #16171a;
+    }
+    10% {
+      color: #7f0622;
+    }
+    20% {
+      color: #d62411;
+    }
+    30% {
+      color: #ff8426;
+    }
+    40% {
+      color: #ffd100;
+    }
+    50% {
+      color: #fafdff;
+    }
+    60% {
+      color: #ff80a4;
+    }
+    70% {
+      color: #ff2674;
+    }
+    80% {
+      color: #94216a;
+    }
+    90% {
+      color: #234975;
+    }
+    100% {
+      color: pink;
+    }
+  }
+
+.mebeinguseless{
+    color: var(--title-color);
+    padding: 10px;
+    font-size: 15px;
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.runaway{
+    color: var(--text-color);
+    padding: 10px;
+    font-size: 15px;
+    font-weight: bold;
+    text-align: center;
+    margin-left: 10%;
+    font-family: 'fira sans';
+}
+
+.cover{
+  position: absolute;
+  left: 10.5%;
+
+}
+
+#a:hover + #b {
+  margin-left: 20%;
+}
+
+
+.me{
+    width: 50%;
+    margin-left: 25%;
+    transform: scale(0.75);
+    margin-bottom: -60px
+}
+
+html{
+    background-color: var(--background-color);
+}
+
+.go{
+  font-weight: 9000;
+  font-size: 120%;
+}
+
+
+.languages-wrapper{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+
+.jsimg {
+  margin-left: 10%;
+}
+
+@media only screen and (max-width: 900px) {
+  /* .data{
+      margin-left: 0
+  } */
+  .javaimg{
+      margin-left: 0;
+  }
+  .jsimg {
+    margin-left: 0;
+  }
+}