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;