Updated spots

css/general.css

@@ -150,16 +150,6 @@ nav ul li {
   top: 16px;
   font-size: 20px;
   margin: auto;
-  /* height: 100%;
-  width: 50%;
-  width: 380px;
-  margin: auto;
-  font-size: 20px;
-  display: inline-flex;
-  position: relative;
-  justify-content: left;
-  overflow: hidden;
-  align-items: center; */
 }
 
 #banner-text {
@@ -174,10 +164,6 @@ nav ul li {
   padding: 2px 5px;
 }
 
-.tooltip-nav {
-  text-decoration: none;
-}
-
 #timer-link {
   color:rgb(252, 188, 93);
   text-decoration: none;
@@ -200,16 +186,33 @@ nav ul li {
     opacity: 1;
   }
 }
-/* @keyframes headline {
-  0% {
-    transform: translateX(600px);
+/* 
+.tooltip-nav {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+  text-decoration: none;
+
 }
-  50% {
-    transform: translateX(-600px);
-  }
-  100% {
-    transform: translateX(-600px);
+
+.tooltip-nav .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  
+  position: absolute;
+  z-index: 100;
+  top: 100%;
+  left: 50%;
+  margin-left: -60px;
 }
+
+.tooltip-nav:hover .tooltiptext {
+  visibility: visible;
 } */
 
 /* .notification {

index.html

@@ -50,7 +50,9 @@
             <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
         </a>
         <div id="banner">
-            <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline">Opening Ceremony</a> in<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
+            <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline">Opening Ceremony</a> in
+                  <abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr>
+            </p>
         </div>
         <div id="nav-links-container">
             <input onclick="btnToggle()" type="checkbox" id="check">
@@ -79,7 +81,7 @@
                     <h2 id="header-subtitle-date">Aug 12 - 14</h2>
                     <div id="spots-container">
                         <div class="blob green" aria-hidden="true"></div>
-                        <h2 id="header-subtitle-spots">33 spots remaining</h2>
+                        <h2 id="header-subtitle-spots">32 spots remaining</h2>
                     </div>
                     <div id="entrance-arrow">
                         <a href="#event" id="arrow-link">