body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    background-color: #0a0a1a;
    color: #e0e0e0;
    overflow: hidden;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
    background: radial-gradient(circle, rgba(10, 10, 26, 0.8) 0%, rgba(10, 10, 26, 1) 70%);
}

.content {
    border: 1px solid #00ffff;
    padding: 40px 60px;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(0, 255, 255, 0.2);
    background-color: rgba(10, 20, 40, 0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 2s ease-in-out;
}

h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5em;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    margin: 0;
    letter-spacing: 2px;
}

p {
    font-size: 1.2em;
    color: #a0a0c0;
    margin-top: 10px;
    letter-spacing: 1px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation de fond */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, 0.1) 25%, rgba(0, 255, 255, 0.1) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.1) 75%, rgba(0, 255, 255, 0.1) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, 0.1) 25%, rgba(0, 255, 255, 0.1) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.1) 75%, rgba(0, 255, 255, 0.1) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    animation: moveGrid 10s linear infinite;
    z-index: 0;
}

@keyframes moveGrid {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 50px 50px;
    }
}