Navigation

static/index.css

@@ -7,8 +7,12 @@
     font-family: Monocraft;
     color: white;
     text-align: center;
+    line-height: 2;
+    font-size: 1.1rem;
 }
 
+
+
 .header {
     text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
     font-family: Monocraft;
@@ -69,21 +73,31 @@
 .navigation{
     width: 18%;
     height: 65%;
-    padding: 1rem;
+    padding: 0;
     border-color: #000000;
-    border-radius: 0;
-    border: none;
+    border-radius: 0.7rem;
     margin-right: 0rem;
-    left: calc(100% - 4rem);
+    left: calc(100% - 5rem);
     position: relative;
     transition: 0.5s;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 .navigation:hover {
-    left: 82%;
+    left: 85%;
 
 }
 
+.decore1 {
+    background-image: linear-gradient(to right, rgba(225, 225, 225, 0.8), rgba(225, 225, 225, 0.6));
+    width: 5.5%;
+    height: 85%;
+    margin: 0;
+    border-radius: 1rem;
+}
+
 .btn1 {
   box-shadow: 0 5px 15px 0 #BA41A6;
   transition: 0.5s;
@@ -137,6 +151,8 @@
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
+    margin-left: 1.5rem;
+    margin-top: 1rem;
 }
 
 .navbtn {
@@ -145,6 +161,25 @@
     flex-wrap: wrap;
 }
 
+.helpimg {
+    max-width: 100%;
+    width: 3.5vw;
+    height: auto;
+    margin: 2rem;
+    bottom: 10vw;
+    position: relative;
+    box-shadow: 0.4em 0.4em 0em 0px rgba(0, 0, 0, 0.8);
+    transition: 0.5s;
+    border-radius: 1em;
+    background-color: rgba(0, 0, 0, 0);
+
+}
+
+.helpimg:hover {
+    box-shadow: 0.7em 0.7em 0em 0px rgba(0, 0, 0, 0.8);
+    transform: translate(0, 0.2em);
+}
+
 body {
     background-image: url(/static/imgs/bg.gif);
     width: 100vw;