/* =======================================================
   1. REGISTRATION & BASE STYLE
   ======================================================= */
@font-face {
    font-family: 'MyLocalFont';
    src: url('Font.ttf') format('truetype');
}

body {
    font-family: 'MyLocalFont', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #0f0f12; /* Dark fallback so text is always readable */
}

/* =======================================================
   2. DYNAMIC DISCORD-STYLE HEADER
   ======================================================= */
h1 {
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 10px;
    
    /* 1. Create a massive ultra-wide gradient spectrum */
    background: linear-gradient(
        90deg, 
        #ff007f, 
        #7f00ff, 
        #00f0ff, 
        #7f00ff, 
        #ff007f
    );
    background-size: 200% auto; /* Stretch it out so we can slide it */
    
    /* 2. Chop the background to only live inside the text shapes */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* 3. Run the infinite smooth scrolling animation */
    animation: discordGradient 5s linear infinite;
}

/* The loop that physically shifts the color timeline horizontally */
@keyframes discordGradient {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* =======================================================
   3. PARAGRAPH & LINK VARIATIONS
   ======================================================= */
p {
    color: #b9bbbe; /* Clean Discord-grey text color */
    font-size: 1.2rem;
}

a {
    color: #5865f2; /* Discord Blurple brand color */
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/* =======================================================
   4. BACKGROUND VIDEO FIX
   ======================================================= */
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Keeps video locked deep in the background layer */
    pointer-events: none;
}