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

html, body {
    height: 100%;
    overflow: hidden;
    background: #0a0005; /* deep dark red-black base */
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #ff0033;
}

body {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Subtle moving red nebula/glitch/cosmic effect in the middle background */
.bg-effect {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: 
        radial-gradient(circle at 50% 30%, rgba(180,0,30,0.25) 0%, transparent 60%),
        radial-gradient(circle at 20% 70%, rgba(120,0,20,0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(200,0,40,0.22) 0%, transparent 55%);
    opacity: 0.7;
    animation: 
        drift1 120s linear infinite,
        drift2 90s linear infinite reverse,
        pulse-bg 15s ease-in-out infinite;
    filter: blur(2px);
}

@keyframes drift1 {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(8%, 5%) rotate(2deg); }
}

@keyframes drift2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-6%, -4%) scale(1.1); }
}

@keyframes pulse-bg {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 0.85; }
}

/* Center content on top */
.container {
    position: relative;
    z-index: 10;
    text-align: center;
}

.logo {
    width: 240px;                /* smaller logo */
    max-width: 70vw;
    height: auto;
    display: block;
    margin: 0 auto 40px;
    filter: drop-shadow(0 0 35px rgba(255, 0, 50, 0.85))
            drop-shadow(0 0 70px rgba(200, 0, 30, 0.5));
    animation: pulse-glow 5s infinite ease-in-out;
    transition: transform 0.4s ease;
}

.logo:hover {
    transform: scale(1.1);
}

.title {
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 900;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #ff0033;
    text-shadow: 
        0 0 25px rgba(255,0,51,0.9),
        0 0 70px rgba(200,0,30,0.7),
        0 0 120px rgba(150,0,20,0.5);
    animation: subtle-flicker 7s infinite alternate;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1);   filter: brightness(1) drop-shadow(0 0 35px rgba(255,0,50,0.85)); }
    50%      { transform: scale(1.03); filter: brightness(1.2) drop-shadow(0 0 60px rgba(255,0,50,1)); }
}

@keyframes subtle-flicker {
    0%, 100% { opacity: 1; }
    40%, 60% { opacity: 0.93; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .logo { width: 200px; margin-bottom: 30px; }
    .title { letter-spacing: 0.3em; font-size: clamp(2.5rem, 12vw, 5rem); }
}