.container {
  background-color: #200202;
  border: 2px solid #fcfcfc; /* Adjust border color and width as needed */
  border-radius: 12px; /* Adjust radius for rounded corners */
  padding: 1.6vw; /* Adjust padding to create space inside the container */
  margin: 1vw; /* Centers the container horizontally */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  justify-content: center; /* Centers content horizontally within the container */
  align-items: center; /* Centers content vertically within the container */
  display: flex; /* Enables flexbox layout */
  flex-direction: column; /* Stacks items vertically */
}

.background {
  background-color: #151515;
  color: #aaffff;
}

.monotype-font {
  font-family: monospace;
}

.simple-border {
  border: 1px groove #ffffff;
  margin: 0.5px;
}


ul {
  padding: 0;
  gap: 20px; /* Adjusts spacing between items */
}

li {
  display: flex;
  align-items: center;
  gap: 10px; /* Adjusts spacing between label and checkbox */
}

.image-container {
    display: block;
    column-count: 3;
    max-width: 100vw; /* Restrict width to viewport width */
    padding: 1vw; /* Optional: add padding for spacing */
    box-sizing: border-box; /* Include padding in the height and width calculation */
}

.image-container img {
    width: 97%; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    margin: 1%; /* Optional: add margin for spacing between images */
    border: 1.5px solid #0c0c0c; /* Add a solid black border of 1.5px */
    border-radius: 10px; /* Round the corners of the border */
    z-index: 5;
    position: relative;
    animation: smooth 2.9s ease-in-out infinite, faltre 3.14s ease-in-out infinite;
}

.video-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    max-width: 100vw; /* Restrict width to viewport width */
    padding: 10px; /* Optional: add padding for spacing */
    box-sizing: border-box; /* Include padding in the height and width calculation */
}

.video-container video {
    max-width: 80vw; /* Ensure images do not exceed viewport width */
    max-height: 80vh; /* Ensure images do not exceed viewport height */
    width: auto; /* Maintain aspect ratio */
    height: 700px; /* Maintain aspect ratio */
    margin: 4px; /* Optional: add margin for spacing between images */
    border: 1.5px solid #0c0c0c; /* Add a solid black border of 1.5px */
    border-radius: 10px; /* Round the corners of the border */
    transition: transform 0.3s ease, z-index 0.3s ease; /* Smooth transition for scaling and z-index */
    z-index: 1; /* Ensure default z-index is set to 1 */
}

.ball {
    z-index: 1;
    width: 350px;
    height: 350px;
    border-radius: 350px;
    position: absolute;
    background-color: #FF007F;
}



@keyframes smooth {
    0% {
        transform: translate(0,0) rotate(0deg);
    }
    33% {
        transform: translate(0.1vw,0) rotate(0.5deg);
    }
    50% {
        transform: translate(0,0.1vh) rotate(0deg);
    }
    66% {
        transform: translate(-0.1vw,0) rotate(0.5deg);
    }
    100% {
        transform: translate(0,0) rotate(0deg);
    }
}

@keyframes faltre {
  0% {
      filter: blur(0) brightness(100%) drop-shadow(0vw 0vh 15px #FF007FAA);
  }
  10% {
      filter: blur(0.01vh) brightness(102%) drop-shadow(0.2vw 0.2vh 15px #FF007FAA);
  }
  20% {
      filter: blur(0.02vh) brightness(104%) drop-shadow(0.4vw 0.6vh 15px #FF007FAA);
  }
  30% {
      filter: blur(0.03vh) brightness(106%) drop-shadow(0.6vw 0.6vh 15px #FF007FAA);
  }
  40% {
      filter: blur(0.04vh) brightness(108%) drop-shadow(0.8vw 0.8vh 15px #FF007FAA);
  }
  50% {
      filter: blur(0.05vh) brightness(110%) drop-shadow(1vw 1vh 15px #FF007FAA);
  }
  60% {
      filter: blur(0.04vh) brightness(108%) drop-shadow(0.8vw 0.8vh 15px #FF007FAA);
  }
  70% {
      filter: blur(0.03vh) brightness(106%) drop-shadow(0.6vw 0.6vh 15px #FF007FAA);
  }
  80% {
      filter: blur(0.02vh) brightness(104%) drop-shadow(0.4vw 0.6vh 15px #FF007FAA);
  }
  90% {
      filter: blur(0.01vh) brightness(102%) drop-shadow(0.2vw 0.2vh 15px #FF007FAA);
  }
  100% {
      filter: blur(0) brightness(100%) drop-shadow(0vw 0vh 15px #FF007FAA);
  }
}