body{
    background-color: rgb(0, 0, 0);
  }

  .main-container {
    font-family: "Roboto", sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    padding-right: 50px;
    
  }

  .main-container h1 {
    font-size: 90px;
    margin: 24px 0;
    color: #ef233c;
    text-align: center;
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: transform 0.2s ease, box-shadow 0.5s ease; /* Smooth transitions */
}

.main-container h1:hover {
    transform: scale(1.1); /* Scale the H1 by 10% on hover */
    text-shadow: 0 0 20px rgba(239, 35, 60, 0.5); /* Add a glowing effect */
}

  .container {
    display: flex;
    justify-content: space-around;
  }
  
  .container img {
    width: 52%;
    border: 1px solid #000000;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  }

  /* MOUSE */


 .revealed-area {
    position: fixed;
    inset: 0;
    background: radial-gradient(
      circle 60px at 50% 50%,
      transparent 10%,
       rgba(0, 0, 0, 0.98)
    );
    pointer-events: none; 
 }


/* EYE button */
.turnOnEye {
  background-color: transparent;
  border: none;
  position: absolute; /* Change from relative to absolute */
  padding: 0;
  cursor: pointer;
  bottom: -22.5em; /* Adjust vertical position as needed */
  right: 81em; /* Adjust horizontal position as needed */
  transition: box-shadow 0.3s ease; /* Smooth transition for box-shadow effect */
}

.turnOnEye img {
  width: 70px; /* Adjust as needed */
  height: 70px; /* Adjust as needed */
}

.turnOnEye:hover {
  box-shadow: 0 0 30px 10px rgba(255, 0, 0, 0.7); /* Larger, more intense shadow */
  transform: scale(1.1); /* Slightly scale up the button on hover */
  filter: 
    brightness(1.3) /* Increase overall brightness */
    contrast(1.2) /* Increase contrast */
    saturate(1.5) /* Enhance saturation */
    hue-rotate(20deg) /* Rotate hue towards red */
    drop-shadow(0 0 20px rgba(255, 0, 0, 0.5)) /* Add red drop shadow for a spooky effect */
    drop-shadow(0 0 30px rgba(255, 0, 0, 0.5)); /* Add larger red drop shadow */
  transition: box-shadow 0.5s ease, transform 0.5s ease, filter 0.5s ease; /* Smooth transitions */
}


        /* EYE */   

        .eye {
          width: 15%;
          height: 6%;
          background-image: url("resources/eyes.jpg");
          background-size: contain;
          z-index: 1;
          background-repeat: no-repeat;
          position: absolute;
          top: 70px;
          left: 180px;
          transform-origin: center;
          animation: none; /* Initially set animation to none */
          display: none; /* Initially hide the eye */
          
        }
        
        .blink-animation {
          animation: blink-animation 1.5s infinite alternate;
        }

        @keyframes blink-animation {
          0% {
            transform: scaleY(1);
          }
          35% {
            transform: scaleY(0);
          }
          100% {
            transform: scaleY(1);
          }
        }
        
          
/* SCARY BUTTON */

.container2 {
    position: relative; /* Create a relative positioning context */
    height: 10vh; /* Set a height for the container */
  }

.scary-button {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 24px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
    background-color: #8B0000;
    color: #FFF;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;

    position: absolute; /* Position the button absolutely */
    top: 20px; /* Adjust top position as needed */
    right: 20px; /* Adjust right position as needed */
  }
  
  .scary-button:hover {
    background-color: #FF0000;
    box-shadow: 0px 0px 2 }



  .spider {
    width: 100px;
    height: 50px;
    background-image: url('resources/spiderC.png'); /* Replace with spider image path */
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute ;
    bottom: 0;
    left: 5px;/* Start spiders off-screen */
    animation: crawl-animation 5s linear infinite;
  
  }

  .spider2 {
    width: 100px;
    height: 50px;
    background-image: url('resources/spiderC2.jpg.png'); /* Replace with spider image path */
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute ;
    bottom: 0;
    left: 5px;/* Start spiders off-screen */
    animation: crawl-animation 5s linear infinite;
  
  }

  
  @keyframes crawl-animation {
    0% {
      transform: translateX(0);
      
    }
    100% {
      transform: translateX(calc(100vw + 100px)); 
    }
  } 

  .box {
    padding: 40px;
    background-color: #1f1f1f; /* Dark background color */
    border-radius: 10px;
    position: absolute;
    right: 120px;
    bottom: -100px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7); /* Red shadow for a spooky effect */
  }
  
  input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #ff0000; /* Red border for the input */
    border-radius: 5px;
    font-size: 18px;
    position: relative;
    bottom: -40px;
    color: #ff0000; /* Red text color */
    background-color: #1f1f1f; /* Dark background color */
  }




 /* .main-container img {
    width: 100%;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
  }
   

  
   .main-container .description {
    column-count: 2;
    margin-top: 24px;
  }
   
  .main-container p {
    line-height: 1.8;
    font-size: 18px;
    margin: 0;
    margin-bottom: 16px;
  } */