* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
overflow: hidden;
background: #000000;
position: relative;
width: 100vw;
height: 100vh;
}

/* Deep space background gradient */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at top, #1a0033 0%, #000000 50%, #000000 100%),
radial-gradient(ellipse at bottom right, #0d1b2a 0%, #000000 60%),
radial-gradient(ellipse at bottom left, #1b263b 0%, #000000 60%);
z-index: 0;
}

/* Stars canvas - background layer */
#stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

/* Nebula canvas - middle layer */
#nebula {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
opacity: 0.6;
}

/* Container */
.container {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

/* Content card with dark glassmorphism */
.content {
background: rgba(15, 15, 35, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 30px;
padding: 80px 100px;
border: 1px solid rgba(100, 150, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6),
0 0 60px rgba(100, 150, 255, 0.1);
animation: fadeInUp 1s ease-out;
position: relative;
overflow: hidden;
text-align: center;
}

/* Cosmic glow effect on card */
.content::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
rgba(100, 150, 255, 0.1) 0%,
transparent 70%);
animation: rotate 20s linear infinite;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

/* Badger icon */
.badge-icon {
font-size: clamp(3rem, 8vw, 5rem);
margin-bottom: 20px;
animation: float 3s ease-in-out infinite, fadeIn 1s ease-out 0.2s both;
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
position: relative;
z-index: 1;
}

@keyframes float {

0%,
100% {
transform: translateY(0px);
}

50% {
transform: translateY(-10px);
}
}

/* Name styling */
.name {
font-size: clamp(2.5rem, 7vw, 5rem);
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
margin: 0;
text-shadow: 0 0 40px rgba(102, 126, 234, 0.5);
animation: fadeIn 1s ease-out 0.4s both, glow 2s ease-in-out infinite;
position: relative;
z-index: 1;
}

@keyframes glow {

0%,
100% {
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.5));
}

50% {
filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
}
}

/* Tagline styling */
.tagline {
font-size: clamp(0.875rem, 2vw, 1.125rem);
font-weight: 400;
color: rgba(150, 180, 255, 0.9);
letter-spacing: 0.15em;
margin: 20px 0 0 0;
text-shadow: 0 0 10px rgba(150, 180, 255, 0.5);
animation: fadeIn 1s ease-out 0.7s both;
position: relative;
z-index: 1;
text-transform: uppercase;
font-family: 'Courier New', monospace;
}

/* Animated stars line */
.stars-line {
width: 0;
height: 2px;
background: linear-gradient(90deg,
rgba(100, 150, 255, 0) 0%,
rgba(100, 150, 255, 0.8) 50%,
rgba(100, 150, 255, 0) 100%);
margin-top: 30px;
border-radius: 2px;
animation: expandLine 1.5s ease-out 1s both;
box-shadow: 0 0 20px rgba(100, 150, 255, 0.6);
position: relative;
}

/* Add twinkling stars on the line */
.stars-line::before,
.stars-line::after {
content: '\2726';
position: absolute;
color: rgba(150, 180, 255, 0.8);
font-size: 12px;
animation: twinkle 2s ease-in-out infinite;
}

.stars-line::before {
left: 10%;
top: -8px;
}

.stars-line::after {
right: 10%;
top: -8px;
animation-delay: 1s;
}

@keyframes twinkle {

0%,
100% {
opacity: 0.3;
transform: scale(1);
}

50% {
opacity: 1;
transform: scale(1.2);
}
}

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes expandLine {
from {
width: 0;
}

to {
width: 100%;
}
}

/* Responsive design */
@media (max-width: 768px) {
.content {
padding: 60px 50px;
border-radius: 20px;
}

.badge-icon {
font-size: clamp(2.5rem, 10vw, 4rem);
margin-bottom: 15px;
}

.name {
font-size: clamp(2rem, 8vw, 3.5rem);
}

.stars-line {
margin-top: 20px;
}
}

@media (max-width: 480px) {
.content {
padding: 40px 30px;
border-radius: 15px;
background: rgba(15, 15, 35, 0.6);
}

.badge-icon {
font-size: clamp(2rem, 12vw, 3rem);
}

.name {
font-size: clamp(1.75rem, 10vw, 2.5rem);
}
}

/* Smooth transitions */
* {
transition: all 0.3s ease;
}