/* BACKGROUND */
body {
    background: radial-gradient(circle at 50% 20%, #0b0c0e, #000000 80%);
    color: #d0d8e8;
}

/* STEEL-BLUE / GREY GLOW */
body::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(120, 140, 170, 0.35) 0%,
        rgba(90, 110, 140, 0.18) 35%,
        rgba(70, 90, 120, 0.08) 60%,
        rgba(50, 70, 100, 0.03) 75%,
        rgba(30, 40, 60, 0) 100%);
    filter: blur(40px);
    z-index: 0;
}

/* GREY-BLUE WISPS */
.cloud-layer {
    background: radial-gradient(circle at 40% 60%,
        rgba(120, 140, 170, 0.10) 0%,
        rgba(120, 140, 170, 0.04) 40%,
        rgba(120, 140, 170, 0) 80%);
    opacity: 0.22;
    animation: wispDrift 60s linear infinite;
}

@keyframes wispDrift {
    0%   { transform: translateX(10%) translateY(0) scale(1); }
    50%  { transform: translateX(-10%) translateY(3%) scale(1.05); }
    100% { transform: translateX(10%) translateY(-2%) scale(0.95); }
}

/* STARS (icy grey-blue) */
.stars {
    background-image:
        radial-gradient(3px 3px at 10% 20%, #d0d8e8, transparent),
        radial-gradient(3px 3px at 80% 30%, #d0d8e8, transparent),
        radial-gradient(3px 3px at 40% 70%, #d0d8e8, transparent),
        radial-gradient(3px 3px at 60% 10%, #d0d8e8, transparent),
        radial-gradient(3px 3px at 20% 90%, #d0d8e8, transparent);
    animation: twinkle 5s infinite alternate ease-in-out;
    opacity: 0.9;
}

.stars2 {
    background-image: radial-gradient(2px 2px, #b8c0d0, transparent);
    animation: drift 90s linear infinite;
    opacity: 0.5;
}

.stars3 {
    background-image: radial-gradient(1.5px 1.5px, #a0a8b8, transparent);
    animation: drift 140s linear infinite reverse;
    opacity: 0.35;
}

/* LOGO GLOW (cool grey-blue) */
.logo {
    border-color: rgba(160,170,190,0.5);
    box-shadow: 0 0 60px rgba(120,140,170,0.25);
}

/* SOCIAL ICON BASE COLOR */
.social svg {
    fill: #d0d8e8;
    filter: drop-shadow(0 0 6px rgba(160,170,190,0.4));
}

/* SOCIAL HOVERS (brand colours unchanged) */
.facebook:hover svg {
    fill: #3b5998;
    filter: drop-shadow(0 0 12px #3b5998);
}

.youtube:hover svg {
    fill: #ff0000;
    filter: drop-shadow(0 0 12px #ff0000);
}

.instagram:hover svg {
    fill: #e1306c;
    filter: drop-shadow(0 0 12px #e1306c);
}

.tiktok:hover svg {
    fill: #69C9D0;
    filter: drop-shadow(0 0 12px #69C9D0);
}

.patreon:hover svg {
    fill: #ff5900;
    filter: drop-shadow(0 0 12px #ff5900);
}

.discord:hover svg {
    fill: #5865F2;
    filter: drop-shadow(0 0 12px #5865F2);
}