/* Global Dark Space Theme */
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #0b0b10;
}

body {
    background-color: #0b0b10;
    color: #c44;
    font-family: 'Orbitron','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}
    body .container {
        height: 100%;
    }

a {
    color: #ff5555;
    text-decoration: none;
}

    a:hover {
        color: #ff7777;
        text-shadow: 0 0 8px #ff4444;
    }

h1, h2, h3 {
    color: #ff4444;
    text-shadow: 0 0 10px #aa0000;
}

input, button {
    background-color: #1a1a22;
    border: 1px solid #550000;
    padding: 8px;
    color: #ff4444;
    border-radius: 4px;
}

/* Center container */
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 40px auto;
}

/* Optional star background */
.stars {
    background: url('/images/stars.jpg') repeat;
    background-size: cover;
    animation: panStars 200s linear infinite;
}

@keyframes panStars {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 5000px 5000px;
    }
}

/* HOLOGRAPHIC PANEL */
.holo-panel {
    text-align: center;
    border: 1px solid #ff2222;
    padding: 20px;
    margin: 20px 0;
    background: rgba(20,0,0,0.15);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px #b30000 inset, 0 0 20px rgba(255,0,0,0.4);
    border-radius: 8px;
    animation: glitch-skew 4s infinite ease-in-out;
}

    /* sweep animation */
    .holo-panel::after {
        content: "";
        position: absolute;
        top: -150%;
        left: 0;
        width: 100%;
        height: 300%;
        background: linear-gradient( to bottom, rgba(255,0,0,0) 0%, rgba(255,50,50,0.03) 50%, rgba(255,0,0,0) 100% );
        animation: holoSweep 6s linear infinite;
        pointer-events: none;
    }

@keyframes holoSweep {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}