body {
  margin: 0;
  padding-top: 5vh;
  padding-left: 5vw;
  padding-right: 5vw;
  overflow: hidden;
  background-color: black;
  /*cursor: none;*/

  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; 
}

.screen_position {
  margin: auto;
  overflow: hidden;
  width: 150vw;
  height: 90vw;
  max-width: 150vh;
  max-height: 90vh;
}
.screen {
  position: relative;
  background-color: black;
  background-image: radial-gradient(
    rgba(0, 75, 35, 1), black 150%
  );

  height: 100%;
  width: 100%;

  border-radius: 3vw;
  transform: skewY(0deg);

  margin: 0;
  overflow: hidden;
  padding: 0;
  color: #44ff44;
  font: 20px Inconsolata, monospace;
  text-shadow: -2px 0 0px #aa0000, 2px 0 0px #0000aa;
  animation: screenFlicker 0.05s linear infinite;
}
@keyframes screenFlicker { 
   00% { opacity: 1.0;}  10% { opacity: 0.95; }  
   20% { opacity: 1.0;}  30% { opacity: 0.95; }  
   40% { opacity: 1.0;}  50% { opacity: 0.95; }  
   60% { opacity: 1.0;}  70% { opacity: 0.95; }  
   80% { opacity: 1.0;}  90% { opacity: 0.95; }  
}

.scanlines {
  position: absolute;
  pointer-events: none;

  box-sizing: border-box; 
  width: 100%;
  height: 100%;

  z-index: 5;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 3px 100%;
}
.scanline {
  position:absolute;
  pointer-events: none;
  top:0%;
  width: 100%;
  height: 2px;
  z-index: 10;
  background: rgba(0, 0, 0, .3);
  opacity: 0.5;
  animation: scanline 6s linear infinite;
}
@keyframes scanline {
  0% {
    top:99%;
  }
}


.screenContent {
  position:absolute;
  width: 95%;
  top: 0;
  max-height: 100%;
  height: 100%;
  margin: 3%;
  animation: screen-skew 4s infinite;
}

@keyframes fadeIn {
  0% {background-color: #444444;}
  100% {opacity:1;}
}
@keyframes screen-skew {
  20% {transform: skew(0deg, 0deg); filter: blur(0);}
  20.5% {transform: skew(-5deg, 0deg); filter: blur(4px);} 
  21% {transform: skew(-20deg, 0deg) translateX(0px);}
  21.5% {transform: skew(0deg, 0deg) translateX(-40px);}
  22% {transform: skew(0deg, 0deg) translateX(0px); filter: blur(0);}
}


#splashScreen {
  text-align: center;
  padding-top: 16vh;
}

#inputField {
  position: absolute;
  color: rgba(0,0,0,0,);
  background: transparent;
  border: rgba(0,0,0,0);
  width: 0px;
  transform: translateY(-9999px);
}


.transistionFrame{
  position: absolute;
  clip: rect(200px, 800px, 1000px, 0px);
  transform: skewX(20deg) translate(100px, 50px);
  filter: blur(1px);
  text-shadow: -5px 0 #ff000099 10px 0 #0000ff99;
}


#deniedPopup{
  color: red;
}

#hackingPage {
  position: relative;
  height: 95%;
  width: 100%;
  top: 0;
}

.hackingBackground {
  position: absolute;
  opacity: 0.15;
  margin: 0;
  font: 15px Inconsolata, monospace;
  width: 48%;
  overflow: hidden;
  text-align: right;
}

#hackingBackgroundRHS {
  left: 52%;
  opacity: 0.25;
  text-align: left;
}


#hackingForeground {
  position: absolute;
  margin: 0;
  width: 100%;
}

#hackingProgressBar { 
  position:absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  text-align: center;
  padding: 1vh;
  margin: 0;
}


#hackingStatsBox { 
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.3;
  text-align: right;
}


#homePage {
  height:  100%;
  width: 100%;
}

#homepageHeader {
  height:  40%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


@keyframes hacking-skew1 {
    0% {transform: skew(0deg, 0deg);}
    48% {transform: skew(0deg, 0deg); filter: blur(0);}
    50% {transform: skew(-10deg, 0deg); filter: blur(4px);} 
    52% {transform: skew(20deg, 0deg);}
    54% {transform: skew(0deg, 0deg); filter: blur(0);}
    64% {transform: translateY(0px);}
    66% {transform: translateY(-20px);}
    67% {transform: translateY(0px);}
    97% {transform: skew(0deg, 0deg);}
    99% {transform: skew(-10deg, 0deg);}
    100% {transform: skew(0deg, 0deg);}
}

@keyframes hacking-skew2 {
    0% {transform: skew(0deg, 0deg) translate(0px, 0px); filter: blur(0);}
    1% {transform: skew(20deg, 0deg) translate(-100px, 30px); filter: blur(4);}
    3% {transform: skew(0deg, 0deg) translate(0px, 0px); filter: blur(0);}

    27% {text-shadow: 2px 0 1px rgba(0,30,180,0.1);}
    30% {text-shadow: 10px 30px 10px rgba(0,30,180,0.75);}
    31% {text-shadow: 2px 0 1px rgba(0,30,180,0.1);}

    48% {transform: skew(0deg, 0deg); filter: blur(0);}
    50% {transform: skew(-10deg, 0deg); filter: blur(4px);} 
    52% {transform: skew(20deg, 0deg);}
    54% {transform: skew(0deg, 0deg); filter: blur(0);}

    70% {transform: skew(0deg, 0deg) translate(0px, 0px); filter: blur(0);}
    73% {transform: skew(20deg, 0deg) translate(-100px, 30px); filter: blur(4); clip: rect(400px, 1500px, 1000px, 0px);}
    76% {transform: skew(0deg, 0deg) translate(0px, 0px); filter: blur(0);}

    87% {text-shadow: 2px 0px 1px rgba(0,30,180,0.75),  2px 0px 1px rgba(255,0,80,0.53);}
    90% {text-shadow: -20px -5px 10px rgba(0,30,180,0.75),  20px 5px 10px rgba(255,0,80,0.53);}
    94% {text-shadow: 2px 0px 1px rgba(0,30,180,0.75),  2px 0px 1px rgba(255,0,80,0.53);}
}


@keyframes jitterShadow {
  0%   { text-shadow: 0.0389924193300864px 0 1px rgba(0,30,180,0.75),  -0.0389924193300864px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  5%   { text-shadow: 1.7928974010788217px 0 1px rgba(0,30,180,0.75),  -1.7928974010788217px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  10%  { text-shadow: 0.02956275843481219px 0 1px rgba(0,30,180,0.75), -0.02956275843481219px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  15%  { text-shadow: 0.40218538552878136px 0 1px rgba(0,30,180,0.75), -0.40218538552878136px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  20%  { text-shadow: 3.4794037899852017px 0 1px rgba(0,30,180,0.75),  -3.4794037899852017px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  25%  { text-shadow: 1.6125630401149584px 0 1px rgba(0,30,180,0.75),  -1.6125630401149584px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  30%  { text-shadow: 0.7015590085143956px 0 1px rgba(0,30,180,0.75),  -0.7015590085143956px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  35%  { text-shadow: 3.896914047650351px 0 1px rgba(0,30,180,0.75),   -3.896914047650351px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  40%  { text-shadow: 3.870905614848819px 0 1px rgba(0,30,180,0.75),   -3.870905614848819px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  45%  { text-shadow: 2.231056963361899px 0 1px rgba(0,30,180,0.75),   -2.231056963361899px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  50%  { text-shadow: 0.08084290417898504px 0 1px rgba(0,30,180,0.75), -0.08084290417898504px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  55%  { text-shadow: 2.3758461067427543px 0 1px rgba(0,30,180,0.75),  -2.3758461067427543px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  60%  { text-shadow: 2.202193051050636px 0 1px rgba(0,30,180,0.75),   -2.202193051050636px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  65%  { text-shadow: 2.8638780614874975px 0 1px rgba(0,30,180,0.75),  -2.8638780614874975px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  70%  { text-shadow: 0.48874025155497314px 0 1px rgba(0,30,180,0.75), -0.48874025155497314px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  75%  { text-shadow: 1.8948491305757957px 0 1px rgba(0,30,180,0.75),  -1.8948491305757957px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  80%  { text-shadow: 0.0833037308038857px 0 1px rgba(0,30,180,0.75),  -0.0833037308038857px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  85%  { text-shadow: 0.09769827255241735px 0 1px rgba(0,30,180,0.75), -0.09769827255241735px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  90%  { text-shadow: 3.443339761481782px 0 1px rgba(0,30,180,0.75),   -3.443339761481782px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  95%  { text-shadow: 2.1841838852799786px 0 1px rgba(0,30,180,0.75),  -2.1841838852799786px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
  100% { text-shadow: 2.6208764473832513px 0 1px rgba(0,30,180,0.75),  -2.6208764473832513px 0 1px rgba(255,0,80,0.53), 0 0 3px;}
}


@keyframes turn-off{
  0%{
    transform: scale(1,1.3) translate3d(0,0,0);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1;
  }
  52%{
    transform: scale(1.3,0.001) translate3d(0,0,0);
    -webkit-filter: brightness(10);
    filter: brightness(10);
  }
  90%{
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: scale(0.000,0.0001) translate3d(0,0,0);
    -webkit-filter: brightness(50);
    filter: brightness(50);
  }
  100%{
  }
}