attempt to repair the css.

web/index.html

@@ -18,20 +18,20 @@
     <h3>XPUB1</h3>
     <h4>September–December 2023</h4>
     <!-- Description of the project -->
-    <a href="https://git.xpub.nl/XPUB/SI22/raw/branch/main/web/si22.xml">Listen to our Broadcasts</a>
-    <p class="intro">– — Radio makers, listeners and electromagnetic wave enthusiasts, do you copy? — – – <br>
+    <div class="intro">
+      <p>– — Radio makers, listeners and electromagnetic wave enthusiasts, do you copy? — – – <br>
         In the middle of an on-going apocalypse what should be preserved, and what forgotten?
         In the efforts of scavenging and resurrecting a sonic archive. It is only a question of time until all will be lost. Lend an ear as we collectively explore, activate and transmit the archive of Worm community Radio. 
         We must listen closely, we must decide what remains and how we can rebuild upon a fractured past. Become absorbed by a re-imagined reality through an archival deep-dive!
       </p>
+      <p><a href="https://git.xpub.nl/XPUB/SI22/raw/branch/main/web/si22.xml">Listen to our Broadcasts</a></p>
+    </div>
     <button class="down" onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button>
     <!-- Map with projects -->
+    <div id="map">
       <div class="container">
         
-          <div class="item1"><a href="pirate-radio.html">Pirate Radio—How to Set Up Your Own Broadcast</a><br>
-            
-
-        </div>
+        <div class="item1"><a href="pirate-radio.html">Pirate Radio—How to Set Up Your Own Broadcast</a></div>
         <div class="item2"><a href="manual-radio.html">Manual for Post-Αpocalyptic Radio Making</a></div>
           <div class="item3"><a href="byte-noise.html">Byte Noise: <br>
               Sound you see me?<br>
@@ -40,9 +40,9 @@
         <div class="item5"><a href="rain-receiver.html">Rain Receiver</a></div>
         <div class="item6"><a href="echoes-wasteland.html">Echoes of the Wasteland</a></div>
         <div class="item7"><a href="listen-closely.html">Listen closely</a></div>      
-        
       </div>
       <!-- Image with the map -->
       <img id="map1" src="signal.png">
+    </div>
 </body>
 </html>

web/style.css

@@ -70,16 +70,19 @@ h4{
   color: whitesmoke;
   transition-duration: 3s;
 }
-.map{
-    top: 0rem;
-    left: 0rem;
-    width: 100%;
-    height: 100%;
-    opacity: 0%;
+#map {
+  position: absolute;
+  top: 150vh;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
 }
 #map1{
-    top: 110vh;
-    left: 0rem;
+  position: absolute;
+  left: 0;
+  top: -100px;
+  /* top: 110vh; */
+  /* left: 0rem; */
   width: 100%;
   height: 70%; 
 }
@@ -88,10 +91,10 @@ button{
   background-color: transparent;
   border: none;
 }
-
 .container{
   position: absolute;
-    top: 190vh;
+  z-index: 1;
+  /* top: 190vh; */
   left: 5rem;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
@@ -149,7 +152,7 @@ button{
   text-decoration: none;
   color: white;
 }
-  a:hover{
+.container a:hover{
   color: #c5ff26;
   transition-duration: 2s;
 }