body {
  background: black;
  
}

.halloween-outer {
  color: orange;
  text-align: center;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
  height: 360px;
  width: 495px;
  background: black;
  padding: 20px;
  border: purple solid;
  border-width: 5px;
  margin: 20px auto;
  outline: dotted green;
  background-image: url("halloweenbackground.gif");

  
 
  
  /* FIX 1: Make this the anchor point for the absolute child */
  position: relative; 
}
  



.halloween-middle {
  background: black;
  padding: 20px;
  width: 200px;
  height: 50%; /* Takes up exactly 180px (half of 360px) */

  /* FIX 2: Force the box to absolute center itself */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Shifts it perfectly into the geometric center */

  /* Optional: Centers text/content INSIDE the middle box */
  display: flex;
  justify-content: center;
  align-items: center;     
}




.halloween-outer {
  color: orange;
  text-align: center;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
  height: 360px;
  width: 495px;
  background: black;
  padding: 20px;
  border: purple solid;
  border-width: 5px;
  margin: 20px auto;
  outline: dotted green;
  background-image: url("halloweenbackground.gif");
  

  /* FIXES ADDED HERE: Centers the child box vertically and horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
}
    





.halloween-middle {
  background: black;
  padding: 20px;
  width: 200px;
  height: 50%;
  align-content: center;
  
display: flex;
  justify-content: center;
  align-items: center;     /* Centers items vertically */
  
   flex: 0 0 200px;
}