/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #0d1117;
    /* Developer favorite: GitHub dark-mode background */
    color: #c9d1d9;
    /* Muted tech grey-white */
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    /* Monospace developer font */
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Canvas background */
#particleCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Text Content */
.content {
    position: relative;
    z-index: 2;
    text-align: center;
    pointer-events: none;
    padding: 20px;
}

h1 {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #58a6ff;
    /* Clean terminal blue */
    margin-bottom: 12px;
    text-shadow: 0 0 20px rgba(88, 166, 255, 0.15);
}

/* Syntax styling to look like a terminal string or status code */
h1::before {
    content: 'const status = "';
    color: #ff7b72;
    /* Code syntax pink/red */
    font-size: 1.2rem;
    font-weight: normal;
}

h1::after {
    content: '";';
    color: #ff7b72;
    font-size: 1.2rem;
    font-weight: normal;
}

p {
    font-size: 1rem;
    color: #8b949e;
    /* Dim tech grey */
}

p::before {
    content: '// ';
    color: #8b949e;
}