.detector{
    top: 50px;
}


#gate{
    display: flex;
    width: 72%;
    height: 45.7%;
    position: absolute;
    /* z-index: 999; */
    bottom: 40.6%;
    left: 9%;
    overflow: hidden;
    border-radius: 8px;
}

.door {
    flex: 1;
    background-color: transparent;
    transition: transform 1s ease;
    transform-origin: left center;
    background-color: rgb(137, 160, 203);
    opacity: 0.6;
}

.right-door {
    transform-origin: right center;
}

.left-door.opened {
    transform: scaleX(0);
}

.right-door.opened {
    transform: scaleX(0);
}

  #x-ray-source1{
    animation-name:harry;
    animation-duration: 6s;
    
    animation-timing-function:ease-in;
    animation-iteration-count: 2;
   
    
        
    
   
  }

  #start-angle:disabled {
  background-color: white;
  color: black;
  opacity: 1;           /* removes faded look */
  border: 1px solid #ccc; /* optional: normal border */
  cursor: not-allowed;  /* optional */
}
 
@keyframes harry {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
       
        transform: translateY(30px) rotate(25deg);
    }

    100% {
    
        transform: translateY(15px) rotate(65deg);
    }
}




@keyframes harry {
    0% {
   
        transform: translateY(20px) rotate(15deg);
    }

    25% {
      
        transform: translateY(15px) rotate(25deg);
    }

    50% {
      
        transform: translateY(0px) rotate(0deg);
    }
}
  /*
  #x-ray-source1:hover{
    transform: rotate(25deg);

  }
  */
  

#detector{
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes oppMoveUpDown {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
       
        transform: translateY(-10px) rotate(-15deg);
    }

    100% {
    
        transform: translateY(-20px) rotate(-15deg);
    }
}




@keyframes oppMoveUpDownZeroToDown {
    0% {
   
        transform: translateY(-20px) rotate(-15deg);
    }

    25% {
      
        transform: translateY(-15px) rotate(-15deg);
    }

    50% {
      
        transform: translateY(0px) rotate(0deg);
    }

    /* 100% {
    
        transform: translateY(30px) rotate(15deg);
    } */
}

/* @keyframes oppMoveUpDownToOriginal {
    0% {
     
        transform: translateY(33px) rotate(20deg);
    }

    100% {
      
        transform: translateY(0px) rotate(0deg);
    }
} */

/* source */

#source {
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

 @keyframes moveUpDown {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(25deg);
    }

    100% {
        transform: translateY(-30px) rotate(25deg);
    }
}

@keyframes moveUpDownZeroToDown {
    0% {
        transform: translateY(-30px) rotate(25deg);
    }

    25% {
        transform: translateY(-15px) rotate(10deg);
    }

    50% {
        transform: translateY(0px) rotate(0deg);
    }

    /* 100% {
        transform: translateY(18px) rotate(-10deg);
    } */
}

/* @keyframes moveUpDownToOriginal {
    0% {
        transform: translateY(18px) rotate(-25deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
} */
#instruction-box {
    overflow: hidden;
    white-space: nowrap;
}

#typer {
    display: inline-block;
}

/* Scroll back and forth */
.scroll-animation {
    animation: scrollText 10s linear infinite alternate;
}

@keyframes scrollText {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% + 100%)); } /* Adjust container width */
}