/* Prevent horizontal scrolling on the page */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: rgb(255, 179, 217);
}
h1 {
    text-align: center;
    font-family: fantasy;
}
/* The Container */
.project-container {
  display: flex;
  align-items: center; 
  
  /* Positioning: 15% down from the top, pushing it off-center */
  margin-top: 7vh; 
  margin-left: 0vw; /* Gives it a little breathing room on the left */
  
  /* The Animation setup */
  transform-origin: left center; /* Ensures it grows outward from the left edge */
  animation: growSmoothly 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* The Growing Animation */
@keyframes growSmoothly {
  0% {
    transform: scaleX(0); /* Starts at zero width */
    opacity: 0;
  }
  100% {
    transform: scaleX(1); /* Expands to full 100% of its defined size */
    opacity: 1;
  }
}

/* The Rectangular Box (Shaft) */
.shaft {
  width: 66vw;  /* Scaled down to achieve the 75% total width */
  height: 18vw; /* Proportions maintained */
  background-color: #c49a6c;
  
  /* Left edge is now completely square (no border-radius) */
  border-radius: 0; 
  z-index: 1;
}

/* The Semicircle (Head) */
.head {
  width: 13.5vw; 
  height: 22.5vw; /* Maintained the slight height overlap */
  background-color: #b07e52;
  border-radius: 0 50vw 50vw 0; 
  
  /* Pulled back by 4.5vw. Total width = 66 + 13.5 - 4.5 = 75vw (Exactly 75%) */
  margin-left: -4.5vw; 
  
  z-index: 2;
  box-shadow: -1vw 0 1.5vw rgba(0, 0, 0, 0.15); 
}