body {
    background-color: skyblue;
    text-align:center;

}

.spacer {
    margin-top: 40em; /* Adjusts the space; each 'em' is roughly the height of one line. */
}

.container {
    position: relative;
    width: 250px; /* Set a specific width for the container */
    height: 150px; /* Set a specific height for the container */
}

.rounded-rectangle {
    position: absolute;
    width: 200px; /* Width of the rectangle */
    height: 100px; /* Height of the rectangle */
    border-radius: 20px; /* Roundness of the corners */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

/* Positioning for Rectangle 1 */
.rounded-rectangle:first-child {
    top: 10px; /* Distance from the top of the container */
    left: 10px; /* Distance from the left of the container */
}

/* Positioning for Rectangle 2 */
.rounded-rectangle:last-child {
    top: 50px; /* Distance from the top of the container, adjusted for overlap */
    left: 50px; /* Distance from the left of the container, adjusted for overlap */
}

.rectangle-link, .inline-link {
    color: #FFD700; /* Changes link color to gold */
    text-decoration: none; /* Removes the underline */
}

.inline-link:hover {
    text-decoration: underline; /* Adds underline on hover for better UX */
}
