/* Reset default margins and paddings for all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Slightly enlarge all links and linked elements when hovered */
a:hover,
[onclick]:hover,
[role="button"]:hover {
  font-size: 24;
  transform: scale(0.95);
  transition: font-size 0.2s ease, transform 0.2s ease;
  border: none;
  color: #ffffff;
}

/* Base styles for all images */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 3px solid purple;
  filter: brightness(110%);
  opacity: 1;
  transition: all 0.3s ease;
  position: relative; /* Added position relative for the overlay */
}

/* Styles for images on hover */
img:hover {
  filter: brightness(120%);
  opacity: 0.8; /* Changed opacity for a more subtle effect */
  transform: scale(0.95); /* Adjusted the scale value */
}

/* Container for images to retain scaling */
.image-container {
  overflow: hidden; /* Hide any overflowing content */
  position: relative; /* Added position relative for the overlay */
}

.image-container:hover img {
  transform: scale(1.0); /* Adjusted the scale value */
}

/* Container for videos to retain scaling */
.video-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  border: 3px solid white; /* Add a 3-pixel white border around the video */
  transition: border 0.3s ease; /* Add transition for the border */
}

/* Adjust the border on hover to make it disappear */
.video-container:hover {
  border: none;
}

.video-container:hover iframe {
  transform: scale(1.0); /* Adjusted the scale value */
}

/* Common styles for video container */
.video-container::after {
  padding-top: 50%;
  display: block;
  content: '';
}

.video-container iframe {
  position: absolute;
  top: 0px; /* Added 'px' unit */
  left: 0;
  width: 100%;
  height: 100%; /* Adjusted the height value */
  transform: scale(0.9);
  transition: transform 0.3s ease-in-out;
  border: none; /* Removed the black border */
}



/* Rotate the image from left to right */
.wp-block-site-logo a,
.wp-block-site-logo img {
  animation: rotateSequence 30s linear infinite;
}

.wp-block-site-logo a:hover,
.wp-block-site-logo img:hover {
  transform: scale(1.1);
  animation-play-state: paused; /* Lock the rotation in place on hover */
}

@keyframes rotateSequence {
  0%, 100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(360deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(360deg) rotateY(360deg);
  }
  75% {
    transform: rotateX(0deg) rotateY(360deg);
  }
}