* {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'VT323', monospace;
    background: #000;
    color: #00ff00;
    position: relative;
}

video#back {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 105%;
    min-height: 105%;
    transform: translate(-50%, -50%);
    filter: brightness(1.2) contrast(1.1);
    z-index: -2;
}

.hacker-rain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hacker-rain::before,
.hacker-rain::after {
    content: "0101010101010101010101010101010101010101";
    position: absolute;
    width: 100%;
    height: 200%;
    font-size: 2vmin;
    opacity: 0.2;
    animation: rain-fall 6s linear infinite;
    white-space: nowrap;
}

.hacker-rain::before {
    color: #00ff00;
}

.hacker-rain::after {
    color: #ff00ff;
    left: 20%;
    animation-duration: 8s;
}

@keyframes rain-fall {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(150vh); }
}

.center-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.center-text h1 {
    font-size: 6vmin;
    color: red;
    text-shadow: 0 0 10px red;
    margin-bottom: 15px;
}

.center-text h2 {
    font-size: 2.5vmin;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
}

.bottom-text {
    position: fixed;
    bottom: 25px;
    width: 100%;
    text-align: center;
    font-size: 3vmin;
    color: red;
    text-shadow: 0 0 10px red;
    z-index: 2;
}