Updated Nav

css/general.css

@@ -14,7 +14,7 @@ html {
 }
 
 nav {
-    background: rgb(31, 33, 35);;
+    /*background: rgb(31, 33, 35);*/
     height: auto;
     width: 100%;
     overflow: hidden;
@@ -23,13 +23,12 @@ nav {
     position: fixed;
     flex-wrap: nowrap;
     z-index: 100;
-    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
+    /*box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);*/
 }
 
 nav * {
     padding: 0;
     margin: 1px 1px;
-    text-decoration: none;
     list-style: none;
     box-sizing: border-box;
     z-index: 100;
@@ -42,20 +41,44 @@ nav ul {
 
 nav li {
     display: inline-block;
-    line-height: 58px;
-    margin: 0 7px;
+    line-height: 30px;
+    margin: 10px 7px;
+    padding: 3px 5px;
+    cursor: pointer;
 }
 
-nav a {
-    color:rgb(136, 180, 231);
+nav li a {
+    /*color:rgb(136, 180, 231);*/
+    color:rgb(233, 203, 104);
     font-size: 18px;
+    text-decoration: none;
+    position: relative;
 }
 
-nav a.active,a:hover {
-    color: rgb(111, 129, 138);
+nav li a.active,a:hover {
+    color: rgba(233, 203, 104, 0.774);
     transition: .5s;
 }
 
+nav li a::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0.1em;
+    background-color: hotpink;
+    opacity: 1;
+    transition: opacity 300ms, transform 300ms;
+    transform: scale(0);
+    transform-origin: center;
+  }
+
+nav li a:hover::after,
+nav li a:focus::after{
+    transform: scale(1);
+}
+
 .checkbtn {
     font-size: 30px;
     color: white;
@@ -70,7 +93,22 @@ nav a.active,a:hover {
     display: none;
 }
 
+#sign-up {
+    padding: 3px 5px;
+    border-radius: 5px;
+    line-height: 30px;
+    background-color: rgb(140, 42, 165);
+    color: bisque;
+}
 
+#sign-up:hover {
+    background-color: blueviolet;
+    transition: 0.5s;
+    cursor: pointer;
+    padding: 4px 6px;
+    margin: 0px 4.5px;
+    font-size: 17px;
+}
 
 .header-background {
     background-image: none;

index.html

@@ -50,7 +50,7 @@
                         <li><a href="">Rules</a></li>
                         <li><a href="">Prizes</a></li>
                         <li><a href="">Teams</a></li>
-                        <li id="sign-up"><a href="">SIGN UP</a></li>
+                        <a href=""></a><li id="sign-up">SIGN UP</li></a>
                     </ul>
                 </nav>
             </div>