/* Reset and basic styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main container styles */
#main {
  width: calc(100vh * (820 / 1024)); /* Same width as #sky */
  height: 100vh; /* Full height of the viewport */
  max-height: 1024px; /* Maximum height */
  position: relative;
  overflow: hidden; /* Prevent scrolling */
  margin: 0 auto; /* Center horizontally */
}

/* Sky styles */
#sky {
  width: 100%; /* Same width as #main */
  height: 100%; /* Same height as #main */
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover; /* Ensure the sky PNG fills the div without distortion */
  background-position: center; /* Center the sky PNG */
}

#city {
  width: 100%; /* Same width as #main */
  height: 100%; /* Same height as #main */
  position: relative;
}

/* Building 1 styles - LEFT BUILDING */
#building1 {
  width: 23.4%; /* 192px / 820px (original width) */
  height: 93.75%; /* 960px / 1024px (original height) */
  position: absolute;
  bottom: 0;
  left: 15.6%; /* 128px / 820px (original width) */
}

#building1 > div {
  width: 100%;
  height: 20%; /* Each apartment is 192px / 960px (original height) */
  position: absolute;
}

#building1 #apt1 { bottom: 0; }
#building1 #apt2 { bottom: 20%; }
#building1 #apt3 { bottom: 40%; }
#building1 #apt4 { bottom: 60%; }
#building1 #apt5 { bottom: 80%; }

/* Middle space styles */
#middle {
  width: 22%; /* 180px / 820px (original width) */
  height: 93.75%; /* 960px / 1024px (original height) */
  position: absolute;
  bottom: 0;
  left: 39%; /* 320px / 820px (original width) */
}

#middle > div {
  width: 100%;
  height: 20%; /* Each middle space is 192px / 960px (original height) */
  position: absolute;
}

#middle #middleSpace1 { bottom: 0; }
#middle #middleSpace2 { bottom: 20%; }
#middle #middleSpace3 { bottom: 40%; }
#middle #middleSpace4 { bottom: 60%; }
#middle #middleSpace5 { bottom: 80%; }

/* Building 2 styles - RIGHT BUILDING */
#building2 {
  width: 23.4%; /* 192px / 820px (original width) */
  height: 93.75%; /* 960px / 1024px (original height) */
  position: absolute;
  bottom: 0;
  left: 61%; /* 500px / 820px (original width) */
}

#building2 > div {
  width: 100%;
  height: 20%; /* Each apartment is 192px / 960px (original height) */
  position: absolute;
}

#building2 #apt1 { bottom: 0; }
#building2 #apt2 { bottom: 20%; }
#building2 #apt3 { bottom: 40%; }
#building2 #apt4 { bottom: 60%; }
#building2 #apt5 { bottom: 80%; }

/* Ensure proper positioning for nested elements */
.wall, .people, .border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Ensure they are above the parent div */
  background-size: cover; /* Ensure GIFs fill the divs */
}