body {
    background-color: #44AAD9;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Just Another Hand', cursive;
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
}

.text-container {
    position: relative;
    text-align: center;
    z-index: 10;
    color: white;
    /* Keep counters (like lowercase "a") crisper to better match Figma. */
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: geometricPrecision;
    transform: translateY(-5vh);
}

.subtitle {
    font-size: 128px;
    margin: 0 0 10px 0;
}

h1 {
    font-size: 192px;
    margin: 0;
    white-space: nowrap;
}

img {
    position: absolute;
    height: auto;
    max-width: none;
}

/* Z-order: Cloud (front) > 5 > 1 > 4 > 2 > 6 > 3 (back) */
/* Positions and sizes based on 960x540 Figma canvas */
img[src="Images/image 3.png"] {
    left: 38.02vw;
    top: 55.37vh;
    width: 63.03vw;  /* 605.07 / 960 */
    z-index: 1;
}

img[src="Images/image 6.png"] {
    left: -12.29vw;
    top: 33.15vh;
    width: 36.88vw;  /* 354 / 960 */
    z-index: 2;
}

img[src="Images/image 2.png"] {
    left: 75.73vw;
    top: 63.33vh;
    width: 28.02vw;  /* 269 / 960 */
    z-index: 3;
}

img[src="Images/image 4.png"] {
    left: -3.85vw;
    top: 65.19vh;
    width: 35.10vw;  /* 337 / 960 */
    z-index: 4;
}

img[src="Images/image 1.png"] {
    left: 17vw;
    top: 70.37vh;
    width: 36.88vw;  /* 354 / 960 */
    z-index: 5;
}

img[src="Images/image 5.png"] {
    left: 38.02vw;
    top: 73.52vh;
    width: 28.23vw;  /* 271 / 960 */
    z-index: 6;
}

img[src="Images/cloud.png"] {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 7;
}