body, html {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack color blocks vertically */
}

.color-block {
    height: 100px; /* Adjust height as needed */
    width: 100%;
}

.red {
    background-color: red;
	height: 100px; /* Fixed height for the red block */
}

.white {
    background-color: white;
    flex: 1; /* Allows the white block to expand as needed */
    display: flex;
    align-items: center; /* Centers content vertically within the white block */
    justify-content: center; /* Centers content horizontally within the white block */
    padding: 20px; /* Add padding if needed */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}

.blue {
    background-color: blue;
height: 100px; /* Fixed height for the red block */
}

.text-container {
    text-align: center; /* Centers text horizontally within the container */
}

.hello-world {
    font-size: 4rem; /* Large font size for the main text */
    font-weight: bold;
    color: black; /* Adjust text color if needed */
    margin: 0; /* Removes default margin for better spacing */
}

.subtext {
    font-size: 1rem; /* Smaller font size for the additional text */
    color: black; /* Adjust text color if needed */
    margin: 0; /* Removes default margin for better spacing */
    margin-top: 10px; /* Adds space between the two lines of text */
}

.container {
    width: 300px; /* Adjust width as needed */
    margin: 20px auto; /* Center the container horizontally with some margin */
    text-align: center; /* Center-aligns text and image */
    border: 1px solid #ccc; /* Optional border for better visibility */
    padding: 20px; /* Padding inside the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for a subtle 3D effect */
    border-radius: 8px; /* Optional rounded corners */
}

.name {
    font-size: 1.5rem; /* Larger font size for the name */
    margin: 0 0 10px 0; /* Margin below the name */
}

.picture {
    max-width: 100%; /* Ensure the image fits within the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%; /* Optional: Make the image circular */
    margin-bottom: 10px; /* Margin below the image */
}

.stay-text {
    font-size: 1rem; /* Smaller font size for the "Stay here" text */
    margin: 0; /* Remove default margin */
}