diff --git a/projects/project-03/icons/H_ezreal.jpg b/projects/project-03/icons/H_ezreal.jpg
new file mode 100644
index 0000000..e4e5f7e
Binary files /dev/null and b/projects/project-03/icons/H_ezreal.jpg differ
diff --git a/projects/project-03/icons/H_kayn.jpg b/projects/project-03/icons/H_kayn.jpg
new file mode 100644
index 0000000..555adb8
Binary files /dev/null and b/projects/project-03/icons/H_kayn.jpg differ
diff --git a/projects/project-03/icons/H_ksante.jpg b/projects/project-03/icons/H_ksante.jpg
new file mode 100644
index 0000000..41c7d4f
Binary files /dev/null and b/projects/project-03/icons/H_ksante.jpg differ
diff --git a/projects/project-03/icons/H_sett.jpg b/projects/project-03/icons/H_sett.jpg
new file mode 100644
index 0000000..fa14cf0
Binary files /dev/null and b/projects/project-03/icons/H_sett.jpg differ
diff --git a/projects/project-03/icons/H_yone.jpg b/projects/project-03/icons/H_yone.jpg
new file mode 100644
index 0000000..2987670
Binary files /dev/null and b/projects/project-03/icons/H_yone.jpg differ
diff --git a/projects/project-03/icons/K_ahri.jpg b/projects/project-03/icons/K_ahri.jpg
new file mode 100644
index 0000000..51fb3d4
Binary files /dev/null and b/projects/project-03/icons/K_ahri.jpg differ
diff --git a/projects/project-03/icons/K_akali.jpg b/projects/project-03/icons/K_akali.jpg
new file mode 100644
index 0000000..e900ffe
Binary files /dev/null and b/projects/project-03/icons/K_akali.jpg differ
diff --git a/projects/project-03/icons/K_evelynn.jpg b/projects/project-03/icons/K_evelynn.jpg
new file mode 100644
index 0000000..ba82531
Binary files /dev/null and b/projects/project-03/icons/K_evelynn.jpg differ
diff --git a/projects/project-03/icons/K_kaisa.jpg b/projects/project-03/icons/K_kaisa.jpg
new file mode 100644
index 0000000..3b7169c
Binary files /dev/null and b/projects/project-03/icons/K_kaisa.jpg differ
diff --git a/projects/project-03/icons/P_karthus.jpg b/projects/project-03/icons/P_karthus.jpg
new file mode 100644
index 0000000..ffa93d4
Binary files /dev/null and b/projects/project-03/icons/P_karthus.jpg differ
diff --git a/projects/project-03/icons/P_kayle.jpg b/projects/project-03/icons/P_kayle.jpg
new file mode 100644
index 0000000..b2f0a74
Binary files /dev/null and b/projects/project-03/icons/P_kayle.jpg differ
diff --git a/projects/project-03/icons/P_olaf.jpg b/projects/project-03/icons/P_olaf.jpg
new file mode 100644
index 0000000..e816e5c
Binary files /dev/null and b/projects/project-03/icons/P_olaf.jpg differ
diff --git a/projects/project-03/icons/P_sona.jpg b/projects/project-03/icons/P_sona.jpg
new file mode 100644
index 0000000..dfbe88a
Binary files /dev/null and b/projects/project-03/icons/P_sona.jpg differ
diff --git a/projects/project-03/icons/SG_ahri.png b/projects/project-03/icons/SG_ahri.png
new file mode 100644
index 0000000..4801e8e
Binary files /dev/null and b/projects/project-03/icons/SG_ahri.png differ
diff --git a/projects/project-03/icons/SG_akali.png b/projects/project-03/icons/SG_akali.png
new file mode 100644
index 0000000..db1aae7
Binary files /dev/null and b/projects/project-03/icons/SG_akali.png differ
diff --git a/projects/project-03/icons/SG_lulu.png b/projects/project-03/icons/SG_lulu.png
new file mode 100644
index 0000000..31df7a3
Binary files /dev/null and b/projects/project-03/icons/SG_lulu.png differ
diff --git a/projects/project-03/icons/SG_lux.png b/projects/project-03/icons/SG_lux.png
new file mode 100644
index 0000000..cb6b74b
Binary files /dev/null and b/projects/project-03/icons/SG_lux.png differ
diff --git a/projects/project-03/icons/SG_morgana.png b/projects/project-03/icons/SG_morgana.png
new file mode 100644
index 0000000..57e9023
Binary files /dev/null and b/projects/project-03/icons/SG_morgana.png differ
diff --git a/projects/project-03/icons/SG_syndra.png b/projects/project-03/icons/SG_syndra.png
new file mode 100644
index 0000000..b8b9075
Binary files /dev/null and b/projects/project-03/icons/SG_syndra.png differ
diff --git a/projects/project-03/icons/SG_xayah.jpg b/projects/project-03/icons/SG_xayah.jpg
new file mode 100644
index 0000000..95f06ac
Binary files /dev/null and b/projects/project-03/icons/SG_xayah.jpg differ
diff --git a/projects/project-03/icons/SG_zoe.png b/projects/project-03/icons/SG_zoe.png
new file mode 100644
index 0000000..7dd286d
Binary files /dev/null and b/projects/project-03/icons/SG_zoe.png differ
diff --git a/projects/project-03/icons/TD_ekko.jpg b/projects/project-03/icons/TD_ekko.jpg
new file mode 100644
index 0000000..26b0b50
Binary files /dev/null and b/projects/project-03/icons/TD_ekko.jpg differ
diff --git a/projects/project-03/icons/TD_qiyana.jpg b/projects/project-03/icons/TD_qiyana.jpg
new file mode 100644
index 0000000..eece0bd
Binary files /dev/null and b/projects/project-03/icons/TD_qiyana.jpg differ
diff --git a/projects/project-03/icons/TD_senna.jpg b/projects/project-03/icons/TD_senna.jpg
new file mode 100644
index 0000000..fc1bd7e
Binary files /dev/null and b/projects/project-03/icons/TD_senna.jpg differ
diff --git a/projects/project-03/icons/TD_yasuo.jpg b/projects/project-03/icons/TD_yasuo.jpg
new file mode 100644
index 0000000..345b48b
Binary files /dev/null and b/projects/project-03/icons/TD_yasuo.jpg differ
diff --git a/projects/project-03/index.html b/projects/project-03/index.html
index a3c67bb..9779228 100644
--- a/projects/project-03/index.html
+++ b/projects/project-03/index.html
@@ -18,50 +18,324 @@
 
 
 
-<div class="grid-cell grid-cell-first">League of Legends <br><span id="subtitle">ALT Unirsive - Music Groups</span></div> 
+<div class="grid-cell grid-cell-first" id="icon_game_LOL">League of Legends <br><span id="subtitle">ALT Unirsive - Music Groups</span></div> 
 
 
 <nav id="navbar">
     
+    
     <div class="icon" draggable="true" id="icon_akali_TD">
         <img src="icons/TD_akali.jpg">
     </div>
-    <div class="icon" draggable="true" id="icon_ekko">Ekko (TD)</div>
-    <div class="icon" draggable="true" id="icon_senna">Senna (TD)</div>
-    <div class="icon" draggable="true" id="icon_qiyana">Qiyana (TD)</div>
-    <div class="icon" draggable="true" id="icon_yasuo">Yasuo (TD)</div>
-
-    <div class="icon" draggable="true" id="icon_morgana">Morgana (SG)</div>
-    <div class="icon" draggable="true" id="icon_syndra">Syndra (SG)</div>
-    <div class="icon" draggable="true" id="icon_zoe">Zoe (SG)</div>
-    <div class="icon" draggable="true" id="icon_lulu">Lulu (SG)</div>
-    <div class="icon" draggable="true" id="icon_lux">Lux (SG)</div>
-    <div class="icon" draggable="true" id="icon_xayah">Xayah (SG)</div>
-    <div class="icon" draggable="true" id="icon_ahri_SG">Ahri (SG)</div>
-    <div class="icon" draggable="true" id="icon_akali_SG">Akali (SG)</div>
-
-    <div class="icon" draggable="true" id="icon_ezreal">Ezreal (H)</div>
-    <div class="icon" draggable="true" id="icon_kayne">Kayne (H)</div>
-    <div class="icon" draggable="true" id="icon_sett">Sett (H)</div>
-    <div class="icon" draggable="true" id="icon_yone">Yone (H)</div>
-    <div class="icon" draggable="true" id="icon_ksante">K'Sante (H)</div>
-
-    <div class="icon" draggable="true" id="icon_akali_K">Akali (K)</div>
-    <div class="icon" draggable="true" id="icon_ahri_K">Ahri (K)</div>
-    <div class="icon" draggable="true" id="icon_kaisa_K">Kai'sa (K)</div>
-    <div class="icon" draggable="true" id="icon_evelynn_K">Evelynn (K)</div>
-
-    <div class="icon" draggable="true" id="icon_olaf">Olaf (P)</div>
-    <div class="icon" draggable="true" id="icon_sona">Sona (P)</div>
-    <div class="icon" draggable="true" id="icon_kayle">Kalye (P)</div>
-    <div class="icon" draggable="true" id="icon_karthus">Karthus (P)</div>
+    <div class="icon" draggable="true" id="icon_ekko_TD">
+        <img src="icons/TD_ekko.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_senna_TD">
+        <img src="icons/TD_senna.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_qiyana_TD">
+        <img src="icons/TD_qiyana.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_yasuo_TD">
+        <img src="icons/TD_yasuo.jpg">
+    </div>
+    
+
+    <div class="icon" draggable="true" id="icon_morgana_SG">
+        <img src="icons/SG_morgana.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_syndra_SG">
+        <img src="icons/SG_syndra.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_zoe_SG">
+        <img src="icons/SG_zoe.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_lulu_SG">
+        <img src="icons/SG_lulu.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_lux_SG">
+        <img src="icons/SG_lux.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_xayah_SG">
+        <img src="icons/SG_xayah.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_ahri_SG">
+        <img src="icons/SG_ahri.png">
+    </div>
+    <div class="icon" draggable="true" id="icon_akali_SG">
+        <img src="icons/SG_akali.png">
+    </div>
+    
+
+    <div class="icon" draggable="true" id="icon_ezreal_H">
+        <img src="icons/H_ezreal.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_kayn_H">
+        <img src="icons/H_kayn.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_sett_H">
+        <img src="icons/H_sett.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_yone_H">
+        <img src="icons/H_yone.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_ksante_H">
+        <img src="icons/H_ksante.jpg">
+    </div>
+    
+
+    <div class="icon" draggable="true" id="icon_akali_K">
+        <img src="icons/K_akali.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_ahri_K">
+        <img src="icons/K_ahri.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_kaisa_K">
+        <img src="icons/K_kaisa.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_evelynn_K">
+        <img src="icons/K_evelynn.jpg">
+    </div>
+    
+
+    <div class="icon" draggable="true" id="icon_olaf_P">
+        <img src="icons/P_olaf.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_sona_P">
+        <img src="icons/P_sona.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_kayle_P">
+        <img src="icons/P_kayle.jpg">
+    </div>
+    <div class="icon" draggable="true" id="icon_karthus_P">
+        <img src="icons/P_karthus.jpg">
+    </div>
+    
+    <div class="help" id="icon_help_Q">
+        ?
+    </div>
+
+
+
 </nav>
 
 
+
+<!-- below is the icon info -->
 <div id="content_icon_akali_TD" class="icon-content hidden">
-    ????????? TD_AKALI
+    <p class="info_title"> Akali </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Akali is the rapper. </p>
+</div>
+
+<div id="content_icon_ekko_TD" class="icon-content hidden">
+    <p class="info_title"> Ekko </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Ekko's description for True Damage. </p>
 </div>
 
+<div id="content_icon_senna_TD" class="icon-content hidden">
+    <p class="info_title"> Senna </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Senna's description for True Damage. </p>
+</div>
+
+<div id="content_icon_qiyana_TD" class="icon-content hidden">
+    <p class="info_title"> Qiyana </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Qiyana's description for True Damage. </p>
+</div>
+
+<div id="content_icon_yasuo_TD" class="icon-content hidden">
+    <p class="info_title"> Yasuo </p>
+    <p class="info_subitle"> True Damage </p>
+    <br><br>
+    <p class="info_description"> Yasuo's description for True Damage. </p>
+</div>
+
+
+<div id="content_icon_morgana_SG" class="icon-content hidden">
+    <p class="info_title"> Morgana </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Morgana's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_syndra_SG" class="icon-content hidden">
+    <p class="info_title"> Syndra </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Syndra's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_zoe_SG" class="icon-content hidden">
+    <p class="info_title"> Zoe </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Zoe's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_lulu_SG" class="icon-content hidden">
+    <p class="info_title"> Lulu </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Lulu's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_lux_SG" class="icon-content hidden">
+    <p class="info_title"> Lux </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Lux's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_xayah_SG" class="icon-content hidden">
+    <p class="info_title"> Xayah </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Xayah's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_ahri_SG" class="icon-content hidden">
+    <p class="info_title"> Ahri </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Ahri's description for Star Guardian. </p>
+</div>
+
+<div id="content_icon_akali_SG" class="icon-content hidden">
+    <p class="info_title"> Akali </p>
+    <p class="info_subitle"> Star Guardian </p>
+    <br><br>
+    <p class="info_description"> Akali's description for Star Guardian. </p>
+</div>
+
+
+<div id="content_icon_ezreal_H" class="icon-content hidden">
+    <p class="info_title"> Ezreal </p>
+    <p class="info_subitle"> Heartsteel
+    <br><br>
+    <p class="info_description"> Kayn's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_kayn_H" class="icon-content hidden">
+    <p class="info_title"> Kayn </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Kayn's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_sett_H" class="icon-content hidden">
+    <p class="info_title"> Sett </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Sett's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_yone_H" class="icon-content hidden">
+    <p class="info_title"> Yone </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Yone's description for Heartsteel. </p>
+</div>
+
+<div id="content_icon_ksante_H" class="icon-content hidden">
+    <p class="info_title"> Ksante </p>
+    <p class="info_subitle"> Heartsteel </p>
+    <br><br>
+    <p class="info_description"> Ksante's description for Heartsteel. </p>
+</div>
+
+
+<div id="content_icon_akali_K" class="icon-content hidden">
+    <p class="info_title"> Akali </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Akali's description for K/DA. </p>
+</div>
+
+<div id="content_icon_ahri_K" class="icon-content hidden">
+    <p class="info_title"> Ahri </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Ahri's description for K/DA. </p>
+</div>
+
+<div id="content_icon_kaisa_K" class="icon-content hidden">
+    <p class="info_title"> Kai'Sa </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Kai'Sa's description for K/DA. </p>
+</div>
+
+<div id="content_icon_evelynn_K" class="icon-content hidden">
+    <p class="info_title"> Evelynn </p>
+    <p class="info_subitle"> K/DA </p>
+    <br><br>
+    <p class="info_description"> Evelynn's description for K/DA. </p>
+</div>
+
+
+<div id="content_icon_olaf_P" class="icon-content hidden">
+    <p class="info_title"> Olaf </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Olaf's description for Pentakill. </p>
+</div>
+
+<div id="content_icon_sona_P" class="icon-content hidden">
+    <p class="info_title"> Sona </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Sona's description for Pentakill. </p>
+</div>
+
+<div id="content_icon_kayle_P" class="icon-content hidden">
+    <p class="info_title"> Kayle </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Kayle's description for Pentakill. </p>
+</div>
+
+<div id="content_icon_karthus_P" class="icon-content hidden">
+    <p class="info_title"> Karthus </p>
+    <p class="info_subitle"> Pentakill </p>
+    <br><br>
+    <p class="info_description"> Karthus's description for Pentakill. </p>
+</div>
+
+
+<div id="content_icon_help_Q" class="icon-content hidden">
+    <p class="info_title"> What TO DO </p>
+    <p class="info_subitle"> Pick three champions to match the team </p>
+    <br><br>
+    <p class="info_description"> Read the information of each champion and sort it into their music group team. While three correct match, the music video will be unlocked!</p>
+</div>
+
+
+
+<div id="content_icon_game_LOL" class="icon-content hidden">
+    <p class="info_title">  League of Legends </p>
+    <p class="info_subitle"> Alt Universe - Music Groups  </p>
+    <br><br>
+    <p class="info_description"> League of Legends is a .......</p>
+</div>
+
+<!-- above is the icon info -->
+
+
+
+
+
+
+
+
+
+
 
 
 <div id="background">
diff --git a/projects/project-03/script.js b/projects/project-03/script.js
index 706eb40..cd6b0f4 100644
--- a/projects/project-03/script.js
+++ b/projects/project-03/script.js
@@ -135,15 +135,15 @@ document.addEventListener("DOMContentLoaded", function() {
         let iconsInDivision = division.querySelectorAll('.icon');
         let divisionId = division.id;
         let correctIconsForDivisions = {
-            'TD_pickdroplot': ['icon_akali_TD', 'icon_ekko', 'icon_senna', 'icon_qiyana', 'icon_yasuo'],
+            'TD_pickdroplot': ['icon_akali_TD', 'icon_ekko_TD', 'icon_senna_TD', 'icon_qiyana_TD', 'icon_yasuo_TD'],
 
-            'SG_pickdroplot': ['icon_morgana', 'icon_syndra', 'icon_zoe', 'icon_lulu', 'icon_lux', 'icon_xayah', 'icon_ahri_SG', 'icon_akali_SG'],
+            'SG_pickdroplot': ['icon_morgana_SG', 'icon_syndra_SG', 'icon_zoe_SG', 'icon_lulu_SG', 'icon_lux_SG', 'icon_xayah_SG', 'icon_ahri_SG', 'icon_akali_SG'],
 
-            'H_pickdroplot': ['icon_ezreal', 'icon_kayne', 'icon_sett', 'icon_yone', 'icon_ksante'],
+            'H_pickdroplot': ['icon_ezreal_H', 'icon_kayn_H', 'icon_sett_H', 'icon_yone_H', 'icon_ksante_H'],
 
             'K_pickdroplot': ['icon_akali_K', 'icon_ahri_K', 'icon_kaisa_K', 'icon_evelynn_K'],
 
-            'P_pickdroplot': ['icon_olaf', 'icon_sona', 'icon_kayle', 'icon_karthus'],
+            'P_pickdroplot': ['icon_olaf_P', 'icon_sona_P', 'icon_kayle_P', 'icon_karthus_P'],
         };
     
         let correctIcons = correctIconsForDivisions[divisionId] || [];
@@ -253,30 +253,25 @@ document.addEventListener("DOMContentLoaded", function() {
 
 
     //this is for icon info
-    document.querySelectorAll('.icon').forEach(icon => {
-        console.log('Adding event listeners to icon:', icon.id);
-        icon.addEventListener('mouseenter', (event) => showInfoBox(event.target.id));
-        icon.addEventListener('mouseleave', hideInfoBox);
+    document.querySelectorAll('.icon, .help, #icon_game_LOL').forEach(element => {
+        element.addEventListener('mouseenter', function() {
+            showInfoBox(this.id);
+        });
+        element.addEventListener('mouseleave', hideInfoBox);
     });
 
-    function showInfoBox(iconId) {
-        console.log('showInfoBox called for:', iconId);
+    function showInfoBox(elementId) {
         const infoBox = document.getElementById('infoBox') || createInfoBox();
-        const contentId = 'content_' + iconId;
+        const contentId = 'content_' + elementId;
         const content = document.getElementById(contentId);
-        console.log('Content ID:', contentId);
 
         if (content) {
-            console.log('Content found for:', iconId);
             infoBox.innerHTML = content.innerHTML;
             infoBox.style.display = 'block';
-        } else {
-            console.log('No content found for:', iconId);
         }
     }
 
     function hideInfoBox() {
-        console.log('hideInfoBox called');
         const infoBox = document.getElementById('infoBox');
         if (infoBox) {
             infoBox.style.display = 'none';
@@ -284,14 +279,12 @@ document.addEventListener("DOMContentLoaded", function() {
     }
 
     function createInfoBox() {
-        console.log('Creating infoBox');
         const infoBox = document.createElement('div');
         infoBox.id = 'infoBox';
         document.body.appendChild(infoBox);
         return infoBox;
     }
     
-    
 
 
 
diff --git a/projects/project-03/style.css b/projects/project-03/style.css
index 881bc7e..e34504a 100644
--- a/projects/project-03/style.css
+++ b/projects/project-03/style.css
@@ -44,6 +44,7 @@ body, html {
     border: 1px dashed rgb(255, 255, 255);
     margin-top: 10px;
     margin-left: 10px;
+    cursor: pointer;
 }
 
 
@@ -58,7 +59,8 @@ body, html {
     color: #ffffff;
     font-family: 'Red Hat Mono', monospace; 
     font-size: 24px;
-    padding-left: 5px;
+    padding: 5px;
+
 }
 
 #subtitle {
@@ -71,24 +73,49 @@ body, html {
     right: 0;
     width: 60%;
     height: 150px;
-    background-color: rgba(255, 255, 255, 0.337);
+    background-color: rgba(255, 255, 255, 0);
     z-index: 1;
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-around;
     align-items: center; /*??*/
-    flex-wrap: wrap;
+   
     border-radius: 1%;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 35px;
+    padding-right: 35px;
+    padding-top: 5px;
+    padding-bottom: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.254);
-    display: flex;
+    
     flex-direction: row;
     flex-wrap: wrap; /* idk???? */
     margin-top: 10px;
     margin-right: 10px;
+    
+}
 
+#icon_help_Q {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: rgb(255, 201, 201);
+    color: white;
+    text-align: center;
+    line-height: 30px;
+    margin: 2px;
+    cursor: crosshair;
+    
+    /* position: absolute;  */
+    margin-right: 5px; 
+    
+  
+    overflow: hidden;
+   
+    justify-content: center; 
+    align-items: center;
+    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
+    cursor: pointer;
 }
 
 
@@ -96,7 +123,7 @@ body, html {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: blue;
+    background-color: rgb(201, 201, 255);
     color: white;
     text-align: center;
     line-height: 40px;
@@ -107,7 +134,7 @@ body, html {
     margin-right: 5px; 
 
     transition: transform 0.5s ease; /* like floaring maybe */
-
+    background-size: cover;
     background-image: cover;
     overflow: hidden;
     display: flex;
@@ -120,9 +147,11 @@ body, html {
 .icon img {
     max-width: 100%;
     max-height: 100%;
-    object-fit: contain;
-    scale:97%;
+    object-fit: cover;
+    display: block;
     border: 15px white;
+    scale: 110%;
+    
 }
 
 
@@ -133,7 +162,8 @@ body, html {
 }
 
 .icon-content {
-    font-size: 12pt;
+   ???
+    
 }
 
 #infoBox {
@@ -141,15 +171,39 @@ body, html {
     height: 500px;
     position: fixed;
     left: 10px;
-    top: 100px;
+    top: 120px;
     z-index: 100; /* Above other elements */
-    background-color: rgba(255, 255, 255, 0.242);
+    background-color: rgba(132, 132, 132, 0.727);
     border: 1px solid rgb(255, 255, 255);
     padding: 10px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
     display: none; /* Initially hidden */
+
+    color: #ffffff;
+    font-family: 'Red Hat Mono', monospace; 
+
+
+
 }
 
+.info_title {
+    font-size: 24pt;
+    
+}
+
+.info_title {
+    font-size: 18pt;
+    font-weight: 600;
+}
+
+.info_title {
+    font-size: 14pt;
+    font-weight: 200;
+    
+}
+
+
+
 
 /* .container {
     position: relative;