body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: black;
overflow: hidden;
flex-direction: column;
}
.matrix {
position: absolute;
width: 100%;
height: 100%;
display: block;
}
.foreground {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.password-container {
position: absolute;
top: 20px;
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
}
.flashing-text {
font-size: 24px;
color: orange;
animation: flash 1s infinite;
margin-bottom: 10px;
}
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
.password-input {
font-size: 18px;
padding: 10px;
border: 2px solid orange;
background: black;
color: orange;
}
canvas {
position: absolute;
top: 0;
left: 0;
}