body{
background-image: url(sonic_adventure_background.jpg) ;
background-repeat: no-repeat ;
background-position: center;
background-attachment: fixed;
background-size: cover;
font-family: Arial, Helvetica, sans-serif;

.top-image {
  width: 100vw;  
  height: 230px;
  object-fit: contain ;
  position:static;
}

.container {
  display: flex;
  justify-content: center;
}

.img {
 width: 200px; /* Set a fixed width for all images */
  height: 200px; /* Set a fixed height for all images */
  object-fit: cover; /* This will make sure the images maintain their proportions */
  margin: 5px; /* This will add some spacing between the images */
}

.container2 {
  display: flex; /* Makes the children flex items, aligning them horizontally */
  align-items: center; /* Vertically centers the items in the container */
  justify-content: space-between; /* Optional: adds space between the text and image */
  padding: 40px; /* Adds some inner spacing */
  border: 1px solid #0044ff; /* Optional: for visibility */
  gap: 20px; /* Provides consistent spacing between the text and image */
  background-color: rgb(137, 255, 255,0.7);
 
}

.text-content {
  /* Optional: gives the text a defined width relative to the image */
  flex: 1; 
}

.image-container img {
  max-width: 100%; /* Ensures the image is responsive */
  height: 600px; /* Maintains the aspect ratio */
  display: block; /* Helps with alignment issues */  
}
.text {
  color: rgb(255, 68, 0);
  text-shadow: 0,0,5,5;
  text-decoration-line: overline;
}

.container3 {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 400px;
  height: 400px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 400px;
  width: 400px;
  opacity: 0;
  transition: .5s ease;
  background-image: url(shadow-crazy.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.container3:hover .overlay {
  opacity: 1;
}

/*
.sonadow {
  width: 400px;
  height: 400px;
}
.sonadow:hover{
background-image: url('shadow-crazy.jpg');
width: 400px;
height:400px;
position:absolute;
opacity: 1;
}*/
}