:root{--font-body: Inter, Helvetica, sans-serif;--font-headline: Merriweather, serif;--primary-color: yellow;--secondary-color: #525b0f;--tertiary-color: rgb(192, 124, 192);--light-grey: #d0d0d0;--font-base: 18px;--small-font: .8em;--large-font: 1.2em}*{margin:2px;padding:2px;box-sizing:border-box}body{font-family:var(--font-body);font-size:var(--font-base);color:var(--dark-grey);background-color:#000;max-width:1080px;margin:0 auto}h2,h1,h3,p,#results-title{font-family:Merriweather,serif;color:var(--primary-color)}a{text-decoration:none}.search-modal-content h2{color:var(--dark-grey)}.song-details-container h2,.song-details-container p{color:#000}#search-submit{color:#fff}ul{list-style-type:none}.genre-selection h3,.focus-cards h3{color:var(--tertiary-color)}.logo img{width:100%;height:auto;max-width:500px;object-fit:cover;display:block;margin:10px auto;border-radius:8px}.header-container{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;padding:1rem;color:var(--primary-color)}header{display:flex;text-align:center;justify-content:space-between;padding:0 20px;gap:20px}header .left img{min-height:100px;height:clamp(50px,10vw,100px);width:auto;transition:transform .3s ease,filter .3s ease}header .left img:hover{transform:scale(1.1);filter:brightness(1.2);cursor:pointer}.divider h1{text-align:center}.user-info{background-color:#f9f9f9;color:#000;border:1px solid #ddd;padding:1rem;border-radius:10px;margin-bottom:1.5rem;font-family:Inter,sans-serif;font-size:1rem;line-height:1.4;box-shadow:0 2px 6px #0000001a}.user-info p{margin:.2rem 0;color:#000}.user-info-top,.user-info-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.user-info-top p,.user-info-bottom p{margin:0;flex:1}header .center{flex:1;min-width:200px;text-align:center;word-wrap:break-word;overflow-wrap:break-word}header .center h1{align-items:center;justify-content:center}.right #navMenu ul{display:flex;flex-direction:column;gap:10px;list-style:none;margin:5px;padding:5px}.right #navMenu a{text-decoration:none;color:inherit}p{padding:.75rem}.menuLinks a{display:inline-block;padding:8px 16px;margin:4px;border:2px solid transparent;border-radius:6px;text-decoration:none;color:#fff;font-size:1rem;transition:all .3s ease}.menuLinks a:hover{color:#fc0;background-color:#333;border-color:#fc0;transform:scale(1.1)}.search-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;justify-content:center;align-items:center}.search-modal-content{background-color:#fff;padding:2rem;border-radius:12px;width:90%;max-width:400px;text-align:center;box-shadow:0 4px 12px #0000004d;position:relative;color:#000}.close-btn{position:absolute;top:10px;right:20px;font-size:1.5rem;cursor:pointer}#search-input{width:100%;padding:.5rem;margin:1rem 0;font-size:1rem}#search-btn{padding:.5rem 1rem;font-size:1rem;cursor:pointer}.search-modal-content input,.search-modal-content button{color:#000}footer{padding:20px;font-family:var(--font-body);font-size:27px;text-align:center;color:var(--primary-color)}.footer-container{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:2rem;margin:0;padding:0}.footer-container>div{flex:1 1 300px;min-width:250px;margin:0;padding:0}.footer-logo{flex-shrink:0;display:flex;justify-content:center;align-items:center}.footer-logo img{height:170px;width:auto;object-fit:contain;margin-top:10px}.copyright{color:#fff;font-size:small}.visits{font-size:20px}.info p{padding-left:15px;color:#fff;font-size:smaller}.social{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;justify-items:center;margin-top:10px;align-items:center}.social img{height:100px;width:auto;padding:10px;object-fit:contain;flex-shrink:0}.social a{min-width:120px;min-height:120px;display:flex;justify-content:center;align-items:center}.designer p{color:#000;line-height:1.4}.hero{display:grid;grid-template-columns:1fr 2fr;align-items:center}.mission{display:flex;flex-direction:column;justify-content:center;padding:5px;width:100%;margin:0 auto;border-radius:12px;background-color:#fff;color:#000;font-size:var(--large-font);line-height:1.5;opacity:.8}.mission p{margin:0 auto;width:100%;text-align:center;color:#000}.listings-wrapper,.focus-cards{display:flex;flex-direction:column;flex:1}.top-songs h3,.top-artists h3{color:#000;text-align:center;font-size:larger}span.song-rank,span.artist-rank,span.song-artist,span.song-title{background-color:#fff;padding:2px 6px;border-radius:6px}.top-selection .top-songs,.top-selection .top-artists{background:#fff;border-radius:8px;max-height:225px;padding:2px;overflow-y:auto;width:calc(100% - 10px);margin:10px}.top-selection .top-songs::-webkit-scrollbar,.top-selection .top-artists::-webkit-scrollbar{width:8px}.top-selection .top-songs::-webkit-scrollbar-thumb,.top-selection .top-artists::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.top-selection .top-songs::-webkit-scrollbar-thumb:hover,.top-selection .top-artists::-webkit-scrollbar-thumb:hover{background:#555}.top-selection .top-songs h3,.top-selection .top-artists h3{margin-bottom:.5rem}.top-selection .top-songs ul,.top-selection .top-artists ul{list-style:none;padding:0;margin:0}.top-selection .top-songs li,.top-selection .top-artists li{padding:.25rem 0;border-bottom:1px solid #eee}.hero .top-selection a{flex:1 1 45%;text-align:center}.list-item{transition:background-color .3s ease,transform .2s ease;padding:.5rem;border-radius:6px}.list-item:hover{background-color:var(--tertiary-color);transform:scale(1.05);cursor:pointer}.list-item a:hover{text-decoration:underline}.highlight{color:var(--tertiary-color)}button{padding:.5em 2em;background-color:var(--secondary-color);color:#fff;margin:auto;display:block;border:0;font-size:var(--large-font);cursor:pointer}.divider{border-bottom:2px solid var(--primary-color)}.focus-card{display:flex;flex-direction:column;align-items:center;width:300px;text-align:center;border-radius:12px}.focus-card img{width:275px;height:auto;object-fit:contain;margin-bottom:10px;border-radius:12px}.focus-card:hover{transform:scale(1.09);transition:transform .2s ease}.genre-selection{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin:20px 0}.genre-card{display:flex;flex-direction:column;align-items:center;width:150px;text-align:center}.genre-card img{width:150px;height:auto;object-fit:contain;margin-bottom:10px;border-radius:12px}.genre-card:hover{transform:scale(1.09);transition:transform .2s ease}#artist-info,#song-info{background-color:#fff;padding:2rem;border-radius:12px;margin:2rem 0;box-shadow:0 4px 12px #0000001a}#artist-info h1{margin-bottom:1rem}#top-tracks,#top-albums{margin:2rem 0}#top-tracks li,#top-albums li{margin:.5rem 0}#top-albums img{max-width:100px;margin-right:.5rem;vertical-align:middle}#song-info h1{margin-bottom:1rem}.listen-link{display:inline-block;margin-top:10px;padding:8px 14px;background-color:red;color:#fff;text-decoration:none;border-radius:6px;font-weight:700;transition:background .2s ease-in-out}.listen-link:hover{background-color:#c00}.song-details-container{display:flex;align-items:flex-start;gap:2rem;flex-wrap:wrap}.song-text{flex:1;min-width:250px}.artist-center{text-align:center}.song-cover{flex-shrink:0}.album-art{max-width:250px;border-radius:12px;box-shadow:0 4px 12px #0003}#results-container,#artist-results-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:20px}#artist-songs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}.song-grid,.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;list-style:none;padding:0}.song-card,.artist-card{display:flex;align-items:flex-start;gap:12px;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 2px 6px #0000001a;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}.artist-card{color:#000;text-decoration:none}.artist-card .artist-info h3,.artist-card .artist-info p{color:#000}.track-number{color:#fff}#artist-songs-list a{color:var(--tertiary-color);text-decoration:none}#artist-songs-list a:hover{color:#00f;text-decoration:underline}.song-card:hover,.artist-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.song-card img,.artist-card img{width:100px;height:100px;object-fit:cover;border-radius:6px}.song-card .song-info{display:flex;flex-direction:column;flex:1}.song-card .song-title{font-weight:700;margin-bottom:4px;line-height:1.2}.song-card .song-artist{font-size:.9rem;color:#555;line-height:1.2}.main-focus{display:flex;gap:2rem;margin-top:2rem;align-items:flex-start;flex-direction:row}#top-title{color:var(--primary-color);text-align:center;font-size:50px}.genre-results{display:flex;justify-content:space-between;gap:2rem;margin-top:2rem}.top-artists,.top-songs{flex:1;padding:1rem;background-color:#f9f9f9;border-radius:10px}.top-artists{order:2}.top-songs{order:1}.genre-results h3{margin-bottom:.5rem;font-size:var(--large-font);color:#333}.genre-results ul{list-style:none;padding-left:0;margin:0}.genre-results li{padding:.5rem 0;border-bottom:1px solid #ddd}.equalizer{display:flex;align-items:flex-end;gap:8px;height:clamp(40px,8vh,100px)}.equalizer span{display:inline-block;width:clamp(6px,1vw,12px);background:#fc0;border-radius:4px;animation:bounce 1s infinite ease-in-out;box-shadow:0 0 10px #fc0,0 0 20px #fc0,0 0 30px #fa0}.equalizer span:nth-child(1){animation:bounce1 .4s infinite ease-in-out}.equalizer span:nth-child(2){animation:bounce2 .5s infinite ease-in-out}.equalizer span:nth-child(3){animation:bounce3 .35s infinite ease-in-out}.equalizer span:nth-child(4){animation:bounce4 .15s infinite ease-in-out}.equalizer span:nth-child(5){animation:bounce5 .75s infinite ease-in-out}.equalizer span:nth-child(6){animation:bounce6 .55s infinite ease-in-out}@keyframes bounce1{0%,to{height:20%}50%{height:90%}}@keyframes bounce2{0%,to{height:40%}50%{height:70%}}@keyframes bounce3{0%,to{height:10%}50%{height:100%}}@keyframes bounce4{0%,to{height:30%}50%{height:80%}}@keyframes bounce5{0%,to{height:15%}50%{height:95%}}@keyframes bounce6{0%,to{height:15%}50%{height:95%}}@media (max-width: 768px){.header-container{flex-direction:column;align-items:center;text-align:center;padding:2rem 1rem;justify-content:center}.center{text-align:center;overflow-wrap:break-word}.center h1{font-size:clamp(1.5rem,6vw,2.5rem);margin-bottom:.5rem}.center h2{font-size:clamp(1rem,4vw,1.5rem)}.equalizer{margin:1rem 0;height:50px;justify-content:center}.left,.equalizer,.center,.right{width:100%;max-width:500px;margin-bottom:1rem}.info p{padding-left:0}.footer-container{flex-direction:column;align-items:center;text-align:center}.footer-container>div{width:100%;max-width:500px;margin-bottom:1.5rem}.social{grid-template-columns:repeat(2,1fr)}.footer-logo img{height:150px}.social img{height:80px}.hero{grid-template-columns:1fr}.hero .top-selection,.genre-selection{justify-content:center}.hero .top-selection a{flex:1 1 100%}#artist-results-container,#results-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:20px}.main-focus{flex-direction:column}.focus-cards{order:1}.top-songs{order:2}.top-artists{order:4}.focus-cards a:nth-child(2){order:3}.focus-cards,.listings-wrapper,.top-songs,.top-artists{width:100%;align-items:center}}@media (max-width: 480px){.equalizer{height:40px}.equalizer span{width:6px}.artist-card,.song-card{flex-direction:column;align-items:center;text-align:center}.artist-card img,.song-card img{width:80px;height:80px}.artist-card .artist-info,.song-card .song-info{margin-top:8px}}