:root{
    background: linear-gradient(to top, #6f00ff, #000000);
    background-size: cover;
    height: 100vh;
    width: 100vw;
    }

.void {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 0%, transparent 10%),
    repeating-radial-gradient(circle at 80% 60%, rgba(255,255,255,0.04) 0%, transparent 15%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0%, transparent 4%);
  background-size: 300% 300%, 300% 300%, 200% 200%;
  filter: blur(6px) brightness(1.1);
  opacity: 0.4;
  
  animation:
    fog-shift 80s linear infinite,
    fog-breathe 12s ease-in-out infinite,
    fog-static 0.8s steps(8) infinite;
}

.space {
  position: relative;
  z-index: 1;
}

@keyframes fog-shift {
  0%   { background-position: 0% 0%, 50% 50%, 0% 0%; }
  50%  { background-position: 100% 100%, 0% 50%, 50% 50%; }
  100% { background-position: 0% 0%, 50% 50%, 0% 0%; }
}

@keyframes fog-breathe {
  0%, 100% { opacity: 0.35; filter: blur(6px) brightness(1.05); }
  50% { opacity: 0.55; filter: blur(8px) brightness(1.2); }
}

@keyframes fog-static {
  0% { transform: translate(0, 0) scale(1.01); }
  25% { transform: translate(-1px, 1px) scale(1.02); }
  50% { transform: translate(1px, -1px) scale(1.01); }
  75% { transform: translate(-1px, -1px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1.01); }
}

/* VOID EFFEKT OBEN!!!! */

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background-color: #6f00ff60; border-radius: 5px; border:1px solid white;}

.screen{
    width: 48vw;
    height: 80vh;
}

.desk{
    position: fixed;
    bottom: 0%;
    left: 6%;
    width: 80vw;
    height: 40vh;
}

.computer {
    position: fixed;
    bottom: 10%;
    left: 23%;
    width: fit-content;
    height: auto;
    overflow: hidden;
    background: #000;
    border-radius: 10%;
    }

.login{
    position: absolute;
    font-weight: bolder;
    top: 25%;
    left: 55%;
    width: 25%;
    height: 50%;
    padding-right: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    gap: 5vh;


    .l-age{display: flex; flex-direction: column-reverse; color: white;}

    .l-location{display: flex; flex-direction: column-reverse; color: white; display: none;}

    .l-name{display: flex; flex-direction: column-reverse; color: white; display: none;}

    .confirm{display: flex; flex-direction: column-reverse; background: linear-gradient(to right, #0077ff, #ff7700); color:white; font-size: larger; font-weight: bolder; width: fit-content; height: fit-content; padding: 8px; border-radius: 12px;}
}

.static-flicker {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow:
        0 0 2px #fff,
        0 0 5px #0ff,
        0 0 10px #0ff;
    animation:
        textFlicker 3s infinite,
        chromaShift 0.4s steps(2) infinite;
}

.computer .static {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 90%;
    height: 90%;
    border-radius: 10%;
    margin: 12px -12px -12px 12px;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 4px);
    background-size: 4px 4px, 3.2px 3.2px;
    mix-blend-mode: lighten;
    opacity: 0.6;
    animation: noiseShift 0.35s steps(8) infinite, grainFlick 3s steps(6, end) infinite;
    }

.computer .display {
    position: relative;
    z-index: 1;
    }

.computer .screen {
    display: block;
    position: relative;
    z-index: 3;
    max-width: 100%;
    height: auto;
    }

    @keyframes noiseShift {to{ background-position: 120% 120%, -120% -120%;}}
    @keyframes grainFlick {0%,100%{opacity:0.6}  10%{opacity:0.38}  30%{opacity:0.62}  60%{opacity:0.45}}
    
    @keyframes textFlicker {0%, 5%, 10%, 15%, 20%, 50%, 55%, 70%, 75%, 80%, 90%, 100% {opacity: 1;filter: brightness(1);}3%, 8%, 18%, 52%, 58%, 73%, 78%, 88% {opacity: 0.3;filter: brightness(2);}}
    @keyframes chromaShift {0% { text-shadow: 2px 0 red, -2px 0 cyan; } 50%  { text-shadow: -2px 0 red, 2px 0 cyan; } 100% { text-shadow: 2px 0 red, -2px 0 cyan; }}