/* =====================================
   BLADEE / GLUEE — PURPLE DREAM
===================================== */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=VT323&family=Space+Mono:wght@400;700&display=swap');

:root {

    --ice: #e4d5ff;
    --blue: #c4a4ff;
    --blue-light: #f5eaff;
    --blue-dark: #35205f;
    --lavender: #c9a5ff;
    --silver: #e5d9ff;
    --text: #f2eaff;
    --muted: #b5a1d3;

    --glass: rgba(193, 151, 255, 0.08);
    --border: rgba(213, 183, 255, 0.25);
}

/* PURPLE DREAM BACKGROUND */

body {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(174, 116, 255, 0.3),
            transparent 50%
        ),
        radial-gradient(
            ellipse at 10% 65%,
            rgba(111, 54, 174, 0.24),
            transparent 45%
        ),
        radial-gradient(
            ellipse at 90% 80%,
            rgba(198, 157, 255, 0.13),
            transparent 40%
        ),
        linear-gradient(
            160deg,
            #211337 0%,
            #30204e 45%,
            #100b1d 100%
        );

    background-attachment: fixed;
    color: var(--text);
}

/* FONT — DIGITAL UNDERGROUND */

body {
    font-family: 'Space Mono', monospace;
    color: #eee3ff;
}

h1, h2, h3, h4 {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    letter-spacing: 2px;
}

/* OPTIONAL BLACKLETTER LOGO FONT
   Add class="drain-logo" to a heading */

.drain-logo {
    font-family: 'UnifrakturMaguntia', cursive;
    font-weight: 400;
    letter-spacing: 1px;
}

/* MAIN TITLE */

h1 {
    color: #f0e2ff;
    text-shadow:
        0 0 6px rgba(224, 198, 255, 0.9),
        0 0 18px rgba(190, 137, 255, 0.7),
        3px 2px 0 rgba(119, 71, 177, 0.65);

    animation: purpleGlitch 6s infinite;
}

/* SUBHEADINGS */

h2 {
    color: #dfc7ff;
    text-shadow: 0 0 18px rgba(174, 116, 255, 0.35);
}

h3 {
    color: #cdaaff;
}

/* LINKS */

a {
    color: #d6baff;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(213, 177, 255, 0.9),
        0 0 20px rgba(173, 113, 255, 0.55);
}

/* NAVIGATION */

nav a {
    color: #d9c5f5;
    border-color: transparent;
}

nav a:hover {
    color: #ffffff;
    border-color: rgba(216, 187, 255, 0.35);
    background: rgba(186, 135, 255, 0.1);
    box-shadow: 0 0 22px rgba(173, 113, 255, 0.13);
}

/* GLASS PANELS */

.card,
.container-card {
    background: linear-gradient(
        140deg,
        rgba(211, 183, 255, 0.10),
        rgba(116, 70, 165, 0.045)
    );

    border-color: rgba(206, 172, 255, 0.22);

    box-shadow:
        0 12px 40px rgba(7, 2, 18, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(12px);
}

.card:hover,
.container-card:hover {
    border-color: rgba(224, 197, 255, 0.6);
    box-shadow: 0 15px 45px rgba(139, 80, 207, 0.16);
}

/* BUTTONS */

button,
.button,
.btn {
    color: #f4eaff;
    background: linear-gradient(
        135deg,
        rgba(173, 121, 239, 0.35),
        rgba(92, 54, 139, 0.4)
    );

    border: 1px solid rgba(215, 186, 255, 0.45);
    font-family: 'Space Mono', monospace;
}

button:hover,
.button:hover,
.btn:hover {
    background: rgba(193, 151, 255, 0.28);
    box-shadow: 0 0 25px rgba(173, 113, 255, 0.23);
}

/* INPUTS */

input,
textarea,
select {
    background: rgba(23, 13, 39, 0.8);
    color: #f3eaff;
    border-color: rgba(202, 168, 255, 0.25);
}

input:focus,
textarea:focus,
select:focus {
    border-color: #c9a5ff;
    box-shadow: 0 0 15px rgba(173, 113, 255, 0.2);
}

/* PURPLE SCROLLBAR */

html {
    scrollbar-color: #9b75c9 #160d24;
}

::-webkit-scrollbar-track {
    background: #160d24;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#d5baff, #7045a1);
    border: 2px solid #160d24;
    border-radius: 10px;
}

/* PURPLE ATMOSPHERE */

body::before {
    background: radial-gradient(
        ellipse,
        rgba(190, 146, 255, 0.16),
        rgba(117, 64, 171, 0.07) 35%,
        transparent 65%
    );

    filter: blur(45px);
    animation: purpleDream 15s ease-in-out infinite alternate;
}

/* GLITCH EFFECT */

@keyframes purpleGlitch {
    0%, 92%, 100% {
        transform: translateX(0);
        text-shadow:
            0 0 8px rgba(224, 198, 255, 0.8),
            0 0 24px rgba(190, 137, 255, 0.5);
    }

    93% {
        transform: translateX(2px);
        text-shadow:
            -3px 0 #e6baff,
            3px 0 #9c78ff;
    }

    95% {
        transform: translateX(-2px);
    }

    97% {
        transform: translateX(0);
    }
}

@keyframes purpleDream {
    from {
        transform: translate(-3%, -2%) scale(1);
    }

    to {
        transform: translate(3%, 2%) scale(1.12);
    }
}

/* TEXT COLORS */

.gold-text {
    color: #d7baff;
}

.red-text {
    color: #e2a8ff;
}

.muted-text {
    color: #b5a1d3;
}

/* ACCESSIBILITY */

::selection {
    color: #1a0d2a;
    background: #d9baff;
}

@media (max-width: 700px) {
    h1 {
        font-size: clamp(3rem, 15vw, 5rem);
        letter-spacing: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}
img{
display: block;
    width: 300px;
    max-width: 100%;
    height: auto;

    margin: 25px auto;

    border: 1px solid rgba(217, 186, 255, 0.2);
    border-radius: 6px;

    box-shadow:
        0 0 12px rgba(151, 71, 255, 0.12);

    transition:
        transform 0.4s ease,
        filter 0.4s ease,
        box-shadow 0.4s ease;
}

/* =====================================
   DRAIN GANG — EVERYTHING GLOWS 💜
===================================== */

/* SMOOTH TRANSITIONS */

a,
button,
img,
h1,
h2,
h3,
h4,
p,
.card,
.container-card,
input,
textarea,
select {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease,
        text-shadow 0.3s ease,
        transform 0.3s ease;
}

/* HEADINGS */

h1:hover,
h2:hover,
h3:hover,
h4:hover {
    color: #ffffff;
    text-shadow:
        0 0 5px #f5eaff,
        0 0 12px #d9baff,
        0 0 25px #bd87ff,
        0 0 45px #9747ff;

    transform: translateY(-2px);
}

/* PARAGRAPHS */

p:hover {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(201, 165, 255, 0.65);
}

/* LINKS */

a:hover {
    color: #ffffff;
    text-shadow:
        0 0 5px #ffffff,
        0 0 12px #d9baff,
        0 0 25px #9747ff;
}

/* BUTTONS */

button:hover,
.button:hover,
.btn:hover {
    color: #ffffff;
    border-color: #e4d5ff;

    background: rgba(174, 116, 255, 0.2);

    box-shadow:
        0 0 8px #d9baff,
        0 0 20px rgba(185, 135, 255, 0.8),
        0 0 40px rgba(151, 71, 255, 0.4);

    transform: translateY(-3px);
}

/* IMAGES — STRONG PURPLE GLOW */

img {
    width: 300px;
    max-width: 100%;
    height: auto;

    transition:
        filter 0.4s ease,
        transform 0.4s ease;
}

img:hover {
    transform: scale(1.045);

    filter:
        brightness(1.15)
        saturate(1.15)
        drop-shadow(0 0 5px #f0e2ff)
        drop-shadow(0 0 13px #c9a5ff)
        drop-shadow(0 0 28px #9747ff);
}

/* CARDS */

.card:hover,
.container-card:hover {
    border-color: #d9baff;

    box-shadow:
        0 0 8px rgba(228, 213, 255, 0.65),
        0 0 20px rgba(185, 135, 255, 0.5),
        0 0 40px rgba(151, 71, 255, 0.25);

    transform: translateY(-5px);
}

/* INPUTS */

input:hover,
textarea:hover,
select:hover {
    border-color: #c9a5ff;
    box-shadow:
        0 0 8px rgba(201, 165, 255, 0.5),
        0 0 20px rgba(151, 71, 255, 0.2);
}

/* NAVIGATION */

nav a:hover {
    background: rgba(201, 165, 255, 0.1);

    box-shadow:
        0 0 10px rgba(201, 165, 255, 0.3),
        0 0 25px rgba(151, 71, 255, 0.2);
}

/* TEXT SELECTION */

::selection {
    color: #ffffff;
    background: #8746c8;
}

/* KEEP SPACE MONO */

body {
    font-family: 'Space Mono', monospace;
}

h1,
h2,
h3,
h4 {
    font-family: 'Space Mono', monospace;
}
img:hover {
    transform: scale(1.045);

    filter:
        brightness(1.1)
        drop-shadow(0 0 6px #d9baff)
        drop-shadow(0 0 18px #9747ff);

    box-shadow:
        0 0 20px rgba(201, 165, 255, 0.25);
}