.artist-profile img { width: 250px; height: 250px; object-fit: cover; /* Ensures images fill the area consistently */ border-radius: 10px; } /* Index Page Background */ body.index { background-image: url('../background.webp'); } /* Artists Page Background */ body.artists { background-image: url('../artists_background.webp'); } /* Common logo fix */ .logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; } * { box-sizing: border-box; }body, html {margin: 0;padding: 0;font-family: 'Oxanium', sans-serif; font-display: swap; -webkit-font-smoothing: antialiased; "Exo 2", sans-serif;background: url('../background.webp') no-repeat center center fixed;background-size: cover;color: #fff;text-align: center;max-width: 100%;overflow-x: hidden;}nav {background: rgba(0, 0, 0, 0.85);padding: 10px 20px;position: fixed;width: 100%;top: 0;z-index: 1001;}.nav-links {display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;}.nav-links a {color: #ff5500;text-decoration: none;font-weight: bold;}.nav-links a.active {color: #00ff88;opacity: 1;cursor: default;}.track {margin: 20px auto;max-width: 660px;background: rgba(0, 0, 0, 0.6);border-radius: 16px;padding: 10px;border-bottom: 1px solid #333;}footer {background: rgba(0, 0, 0, 0.6);border-radius: 16px;padding: 20px;font-size: 14px;color: #fff;}@media screen and (max-width: 768px) {body {background-image: url('../background-mobile.webp');}}position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);background-size: 20px 20px;animation: sparkle 2s infinite linear;z-index: 0;border-radius: 16px;}@keyframes sparkle {0% {background-position: 0 0;}100% {background-position: 20px 20px;}}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 1;}position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;background-image:radial-gradient(circle, rgba(255,255,255,0.15) 2px, transparent 2px),radial-gradient(circle, rgba(255,255,255,0.1) 3px, transparent 3px);background-size: 60px 60px, 120px 120px;background-position: 0 0, 30px 30px;animation: sparkle 8s linear infinite;z-index: 0;border-radius: 16px;}@keyframes sparkle {from {background-position: 0 0, 30px 30px;}to {background-position: 60px 60px, 90px 90px;}}position: absolute;top: 0; left: 0;width: 100%; height: 100%;pointer-events: none;overflow: hidden;z-index: 0;}position: absolute;width: 6px;height: 6px;background: white;opacity: 0;border-radius: 50%;box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);}0%, 100% { opacity: 0; transform: scale(0.5); }50% { opacity: 1; transform: scale(1.2); }}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 1;}position: absolute;top: 0; left: 0;width: 100%; height: 100%;pointer-events: none;overflow: hidden;z-index: 1;}position: absolute;width: 12px;height: 12px;background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, transparent 70%);opacity: 0;border-radius: 50%;filter: drop-shadow(0 0 6px white);}0%, 100% { opacity: 0; transform: scale(0.3); }40% { opacity: 0.6; transform: scale(1); }60% { opacity: 1; transform: scale(1.3); }80% { opacity: 0.5; transform: scale(0.8); }}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 2;}header::before {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(0,0,0,0.3));pointer-events: none;z-index: 0;border-radius: 16px;}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 1;box-shadow: 0 0 12px rgba(0,255,136,0.4);animation: glowPulse 5s infinite ease-in-out;}@keyframes glowPulse {0%, 100% { box-shadow: 0 0 8px rgba(0,255,136,0.4); }50% { box-shadow: 0 0 18px rgba(0,255,136,0.8); }}header::after {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;background-image: url('../grain.webp');background-repeat: repeat;background-size: 128px 128px;opacity: 0.04;pointer-events: none;z-index: 2;}@media screen and (min-width: 769px) {header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);width: 60%;margin: 0 auto;}}button {transition: all 0.3s ease-in-out;background-color: #111;color: #00ffcc;border: 1px solid #00ffcc;padding: 10px 20px;border-radius: 6px;cursor: pointer;font-weight: bold;}button:hover {box-shadow: 0 0 12px #00ffcc, 0 0 24px #00ffcc;background-color: #000;color: #fff;} header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-radius: 16px; background: linear-gradient(120deg, #00ffd5, #3a0ca3, #ff006e, #00ffd5); background-size: 400% 400%; animation: shimmerPlasma 10s ease-in-out infinite; opacity: 0.2; filter: blur(12px); } @keyframes shimmerPlasma { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } header > * { position: relative; z-index: 1; } @keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-20px);}60% {transform: translateY(-10px);}}header img {animation: bounce 1.5s ease;}@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-20px);}60% {transform: translateY(-10px);}}header img {animation: bounce 1.5s ease;}h1, h2 {color: #00ff88;}@media screen and (max-width: 600px) {header img {width: 100px;}h1 {font-size: 22px;}.nav-links {flex-direction: column;gap: 10px;}iframe {height: 140px !important;}}.futuristic-nav {background: rgba(0, 0, 0, 0.85);backdrop-filter: blur(8px);padding: 10px 20px;position: fixed;width: 100%;top: 0;z-index: 1001;font-family: 'Oxanium', sans-serif;box-shadow: 0 0 12px #00ffcc88;}.nav-container {display: flex;justify-content: space-between;align-items: center;max-width: 1000px;margin: 0 auto;}.logo-title a {color: #00ffcc;font-weight: 700;text-decoration: none;font-size: 1.2rem;}.nav-links {display: flex;gap: 30px;}.nav-links a {color: #ff5500;text-decoration: none;font-weight: bold;font-size: 1rem;position: relative;transition: color 0.3s ease;}.nav-links a::after {content: "";position: absolute;width: 0%;height: 2px;left: 0;bottom: -4px;background-color: #00ffcc;transition: width 0.3s ease;}.nav-links a:hover {color: #00ffcc;text-shadow: 0 0 8px #00ffcc;}.nav-links a:hover::after {width: 100%;}.hamburger {display: none;font-size: 28px;color: #ff5500;cursor: pointer;}@media screen and (max-width: 768px) {.nav-container {flex-direction: column;align-items: stretch;}.nav-links {display: none;flex-direction: column;background: rgba(0, 0, 0, 0.95);position: absolute;top: 60px;right: 20px;padding: 15px;border-radius: 10px;}.nav-links.active {display: flex;}.hamburger {display: block;position: absolute;top: 10px;right: 20px;}} .spotify-wrapper-fixed { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; max-width: 1000px; margin: 40px auto; } .spotify-col { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 420px; } @media (max-width: 900px) { .spotify-wrapper-fixed { flex-direction: column; align-items: center; } } .grecaptcha-badge {{visibility: visible !important;opacity: 1 !important;}} *{box-sizing:border-box}body,html{margin:0;padding:0;font-family: 'Oxanium', sans-serif; font-display: swap; -webkit-font-smoothing: antialiased; "Exo 2",sans-serif;background:url('../artists_background.webp') no-repeat center center fixed;background-size:cover;color:#fff;text-align:center;max-width:100%;overflow-x:hidden}nav{background:rgba(0,0,0,0.85);padding:10px 20px;position:fixed;width:100%;top:0;z-index:1001}.nav-links{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}.nav-links a{color:#ff5500;text-decoration:none;font-weight:bold}.nav-links a.active{color:#00ff88;opacity:1;cursor:default}.artist-section{margin:40px auto;max-width:800px;background:rgba(0,0,0,0.6);border-radius:16px;padding:20px;border-bottom:1px solid #333}footer{background:rgba(0,0,0,0.6);border-radius:16px;padding:20px;font-size:14px;color:#fff}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}header img{animation:bounce 1.5s ease}h1,h2{color:#00ff88}@media screen and (max-width:600px){header img{width:100px}h1{font-size:22px}.nav-links{flex-direction:column;gap:10px}iframe{height:140px!important}}.grecaptcha-badge{visibility:visible!important;opacity:1!important;display:block!important;position:fixed!important;bottom:10px;right:10px;z-index:1000}@media screen and (max-width: 768px) {body {background-image: url('../artists_background-mobile.webp');}}position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);background-size: 20px 20px;animation: sparkle 2s infinite linear;z-index: 0;border-radius: 16px;}@keyframes sparkle {0% {background-position: 0 0;}100% {background-position: 20px 20px;}}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 1;}position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;background-image:radial-gradient(circle, rgba(255,255,255,0.15) 2px, transparent 2px),radial-gradient(circle, rgba(255,255,255,0.1) 3px, transparent 3px);background-size: 60px 60px, 120px 120px;background-position: 0 0, 30px 30px;animation: sparkle 8s linear infinite;z-index: 0;border-radius: 16px;}@keyframes sparkle {from {background-position: 0 0, 30px 30px;}to {background-position: 60px 60px, 90px 90px;}}position: absolute;top: 0; left: 0;width: 100%; height: 100%;pointer-events: none;overflow: hidden;z-index: 0;}position: absolute;width: 6px;height: 6px;background: white;opacity: 0;border-radius: 50%;box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);}0%, 100% { opacity: 0; transform: scale(0.5); }50% { opacity: 1; transform: scale(1.2); }}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 1;}position: absolute;top: 0; left: 0;width: 100%; height: 100%;pointer-events: none;overflow: hidden;z-index: 1;}position: absolute;width: 12px;height: 12px;background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, transparent 70%);opacity: 0;border-radius: 50%;filter: drop-shadow(0 0 6px white);}0%, 100% { opacity: 0; transform: scale(0.3); }40% { opacity: 0.6; transform: scale(1); }60% { opacity: 1; transform: scale(1.3); }80% { opacity: 0.5; transform: scale(0.8); }}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 2;}header::before {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(0,0,0,0.3));pointer-events: none;z-index: 0;border-radius: 16px;}header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;z-index: 1;box-shadow: 0 0 12px rgba(0,255,136,0.4);animation: glowPulse 5s infinite ease-in-out;}@keyframes glowPulse {0%, 100% { box-shadow: 0 0 8px rgba(0,255,136,0.4); }50% { box-shadow: 0 0 18px rgba(0,255,136,0.8); }}header::after {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;background-image: url('../grain.webp');background-repeat: repeat;background-size: 128px 128px;opacity: 0.04;pointer-events: none;z-index: 2;}@media screen and (min-width: 769px) {header {background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);width: 60%;margin: 0 auto;}}button {transition: all 0.3s ease-in-out;background-color: #111;color: #00ffcc;border: 1px solid #00ffcc;padding: 10px 20px;border-radius: 6px;cursor: pointer;font-weight: bold;}button:hover {box-shadow: 0 0 12px #00ffcc, 0 0 24px #00ffcc;background-color: #000;color: #fff;} header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-radius: 16px; background: linear-gradient(120deg, #00ffd5, #3a0ca3, #ff006e, #00ffd5); background-size: 400% 400%; animation: shimmerPlasma 10s ease-in-out infinite; opacity: 0.2; filter: blur(12px); } @keyframes shimmerPlasma { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } header > * { position: relative; z-index: 1; } .futuristic-nav {background: rgba(0, 0, 0, 0.85);backdrop-filter: blur(8px);padding: 10px 20px;position: fixed;width: 100%;top: 0;z-index: 1001;font-family: 'Oxanium', sans-serif;box-shadow: 0 0 12px #00ffcc88;}.nav-container {display: flex;justify-content: space-between;align-items: center;max-width: 1000px;margin: 0 auto;}.logo-title a {color: #00ffcc;font-weight: 700;text-decoration: none;font-size: 1.2rem;}.nav-links {display: flex;gap: 30px;}.nav-links a {color: #ff5500;text-decoration: none;font-weight: bold;font-size: 1rem;position: relative;transition: color 0.3s ease;}.nav-links a::after {content: "";position: absolute;width: 0%;height: 2px;left: 0;bottom: -4px;background-color: #00ffcc;transition: width 0.3s ease;}.nav-links a:hover {color: #00ffcc;text-shadow: 0 0 8px #00ffcc;}.nav-links a:hover::after {width: 100%;}.hamburger {display: none;font-size: 28px;color: #ff5500;cursor: pointer;}@media screen and (max-width: 768px) {.nav-container {flex-direction: column;align-items: stretch;}.nav-links {display: none;flex-direction: column;background: rgba(0, 0, 0, 0.95);position: absolute;top: 60px;right: 20px;padding: 15px;border-radius: 10px;}.nav-links.active {display: flex;}.hamburger {display: block;position: absolute;top: 10px;right: 20px;}}