img{
  width: 100%;
  height: auto;
}

body{
  background-image: url(/images/hallway.gif);
  margin: 0px;
  background-size: 100%;
  background-repeat: no-repeat;
}

.flicker-overlay {
  position: absolute; /* Position overlay absolutely */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  animation: flicker 2s infinite alternate; /* Flicker effect */
  pointer-events: none; /* Allow clicks to pass through */
}

@keyframes flicker {
  0%, 100% {
      background: rgba(0, 0, 0, 0.384); /* Dark background */
  }
  20% {
      background: rgba(0, 0, 0, 0.3); /* Slightly less dark */
  }
  40% {
      background: rgba(0, 0, 0, 0.5); /* Dimmer */
  }
  60% {
      background: rgba(0, 0, 0, 0.4); /* Slightly less dim */
  }
  80% {
      background: rgba(0, 0, 0, 0.45); /* A little dimmer */
  }
}

@keyframes flickerAnimation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}



#edderkop {
  width: 1.7%;
  height: auto;
  position: relative;
  left: 40%;
  top: 225px;
}



#flickeranimation{
    width: 25px;
    height: 45px;
    position: relative;
    margin-left: 64%;
    margin-top: 5%;
    
   box-shadow: 200px 20px 50px 10px #fff;
    
  }
  


  #jump {
    position: fixed; /* Fix it to the viewport */
    position: fixed;       /* Stays fixed on the screen */
    top: 0;
    left: 0;
    width: 100vw;          /* Full viewport width */
    height: 100vh;         /* Full viewport height */
    overflow: hidden;      /* Prevents scroll bars */
    object-fit: cover; /* Cover the whole screen */
    display: none; /* Initially hidden */
    pointer-events: none; /* Prevent interaction */
    z-index: 10;
}

#jump video{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;          /* Full width of the viewport */
  height: 100vh;         /* Full height of the viewport */
  object-fit: cover;     /* Ensures the video fills the container */
  transform: translate(-50%, -50%);  /* Centers the video */
}


  


@keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  #flickeranimation {
     -webkit-animation: flickerAnimation 1s infinite;
     -moz-animation: flickerAnimation 1s infinite;
     -o-animation: flickerAnimation 1s infinite;
      animation: flickerAnimation 0.6s infinite;
  }



  .skeleton {
    width: 20%; /* Initial size */
    animation: grow 80s; /* Scale-up animation */
    margin-left: 40%; 
    margin-top: 11%;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes grow {
  0% {
      transform: scale(0.2); /* Start at original size */
  }
100% {
      transform: scale(3); /* Scale up in the middle of the animation */
  }
    
  
}

button {
  border: 0px;
}

:root {
  --width: 80px;
  --height:calc(var(--width) / 2);
}

#flyv {
  /*animation: dvdflyver 4s infinite;*/
  background-color: rgb(113, 11, 11);
  width: 70px;
  height: 50px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: larger;
  color: antiquewhite;
  text-align: center;
  text-shadow: 1px 1px rgb(0, 0, 0);
  position: absolute;
  animation: toRight linear 3.8s infinite alternate, bounce linear 12s infinite alternate;
}

#flyv:hover {
  background-color: rgb(209, 51, 51);
}

#play:hover {
  background-color: rgb(209, 51, 51);
}

#pause:hover {
  background-color: rgb(209, 51, 51);
}

@keyframes bounce {
  0% {
    top:0;
  }
  48% {
  }
  50% {
    top: calc(100% - var(--height));
  }
  52% {
  }
  100% {
    top: 0;
  }
}

@keyframes toRight {

  0% {
    left: 0;
  }

  100% {
    left: calc(100% - var(--width));
  }
}

#play, #pause{
  background-color: rgb(113, 11, 11);
  width: 80px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: smaller;
  color: antiquewhite;
  text-align: center;
  text-shadow: 1px 1px rgb(0, 0, 0);
}

footer{
  text-align: center;
  margin-top: 10%;
}



body {
  margin: 0;
  overflow: hidden; /* Prevent scrolling */
  background-color: #000; /* Black background for the scary effect */
}

#jump {
  position: fixed; /* Fix the video to cover the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the entire screen */
  display: none; /* Initially hidden */
  pointer-events: none; /* Prevent interaction */
}

.flicker-overlay {
  position: absolute; /* Position overlay absolutely */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(21, 17, 17, 0.384); /* Dark overlay */
  animation: flicker 2s infinite alternate; /* Flicker effect */
  pointer-events: none; /* Allow clicks to pass through */
}

@keyframes flicker {
  0%, 100% {
      background: rgba(21, 17, 17, 0.384); /* Dark background */
  }
  20% {
      background: rgba(21, 17, 17, 0.3); /* Slightly less dark */
  }
  40% {
      background: rgba(21, 17, 17, 0.5); /* Dimmer */
  }
  60% {
      background: rgba(21, 17, 17, 0.4); /* Slightly less dim */
  }
  80% {
      background: rgba(21, 17, 17, 0.45); /* A little dimmer */
  }
}