body {
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* height: 100vh; */
  margin: 2rem;
  background-color: #f0f0f0;
  font-family: "Noto Serif", serif;
  box-sizing: border-box;
  /* font-size: 5rem; */

  p {
    color: #CF2E29;
    font-size: 2rem;
  }

  #video-container {
    /* position: relative; */
    width: 640px; /* Adjust based on your video width */
    height: 480px; /* Adjust based on your video height */
    /* width: 100%; */
    position: fixed;

    #video1 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    #video_canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      pointer-events: none; /* Allow clicks to pass through to the video */
    }
  }

  .hide {
    display: none;
  }

  .center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* z-index: -1; */
  }

  #result-container {
    display: none;
  }

  #caption {
    /* z-index: 5; */
    width: 585px;
    top: 30%;
  }

  #process {
   position: relative;
   z-index: 100;
  }

  #status {
    text-align: center;
  }

  #ai-image {
    /* border: 1px solid pink; */
    z-index: 0;

    img {
      /* width: 300px; /1* Set the width *1/ */
      height: 800px;
      /* height: auto; /1* Maintain aspect ratio *1/ */
    }
  }

  #human-image {

    img {
      height: 800px;
    }
  }

  .fade {
    opacity: 0.6;
  }

  button {
    font-size: 0rem; /* hack! */
    border: none;
    border-radius: 50%;
    padding: 3rem;
    font-family: "Noto Serif", serif;
    color: #fff;
    background-color: #CF2E29;
    transition: background-color 500ms linear;
  }

  #info {
    /* display: inline-block; */
    /* padding: 2rem; */
    border-radius: 50%;
    position: fixed;
    top: 2rem;
    right: 2rem;
  }

  button:disabled,
  button[disabled]{
    /* color: #666666; */
    background-color: #C0B4B6;
  }

  button svg {
    width: 150px; /* or any size you prefer */
    height: 150px;
    fill: "#fff";
  }

  .st0 {
    fill: #fff;
  }

  #reset {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
  }

  #upload-wrapper {
    text-align: center;
  }

  #upload:not(:disabled) {
    background-color: "orange";
    animation: pulsate 1.5s infinite;
  }


}

@keyframes pulsate {
  0% {
    /* transform: translate(-50%, -50%) scale(1); */
    transform: scale(1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  50% {
    /* transform: translate(-50%, -50%) scale(1.1); */
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  }
  100% {
    /* transform: translate(-50%, -50%) scale(1); */
    transform: scale(1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
}