body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents scrollbars from appearing */
    /* background-color: #0e0e0e; Black background behind the canvas */
    font-family: monospace;

    user-select: none;;
}

/* Canvas styling to make it a non-interactive background */
#retroGrid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Place it behind all other content */
}

/* Container to center the text on the page */
.text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: hsla(10deg, 100%, 100%, 0.2);
    text-align: center;
}

/* The main text styling for that 80s retro-wave look */
h1 {
    font-size: 5vw; /* Responsive font size based on viewport width */
    font-weight: 700;
    /* text-transform: uppercase; */
    letter-spacing: 0.1em;
    
    /* Core text color */
    color: #ffffff;
    transform: rotateZ('3deg');
    
    /* 80s style text-shadow for a multi-layered glow effect */
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00ff, /* Magenta glow */
        0 0 30px #ff00ff,
        0 0 40px #ff00ff,
        0 0 55px #ff00ff,
        0 0 75px #ff00ff;
    
    /* A subtle animation to make the text 'breathe' */
    animation: flicker 3s infinite alternate;
}

/* Keyframe animation for the text flicker/glow effect */
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
            0 0 4px #fff,
            0 0 11px #fff,
            0 0 19px #fff,
            0 0 40px #0fa, /* Cyan glow */
            0 0 80px #0fa,
            0 0 90px #0fa,
            0 0 100px #0fa,
            0 0 150px #0fa;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Media query for smaller screens to adjust font size */
@media (max-width: 768px) {
    h1 {
        font-size: 8vw;
    }
}