#temp-condition {
    position: absolute; /* Make it absolute for precise positioning */
    top: 10px; /* Set top margin to position it near the top */
    right: 10px; /* Set left margin to position it near the top left */
    display: flex; /* Flexbox for row layout */
    align-items: flex-start; /* Align items to the top */
    gap: 15px; /* Space between icon and text */
    z-index: 1; /* Ensures it's on top of other elements */
}

#weather-icon {
    width: 110px; /* Adjust size of weather icon */
    height: 110px;
    display: inline-block; /* Keeps it inline with text */
}

#temp-condition > div {
    display: flex;
    flex-direction: column; /* Stack temperature, condition, and wind speed in columns */
    justify-content: flex-start; /* Align text content to the top */
    align-items: flex-start; /* Align text to the left of each column */
    color: #ff5722;
}

#temp {
    font-size: 2.5em; /* Adjust font size */
    font-weight: bold;
    color: #ff5722; /* Temperature color */
    font-weight: bold;
}

#condition {
    font-size: 1.5em; /* Font size for the condition */
    color: #ff5722;
    font-weight: bold;
    text-align: left;
}

#wind-speed {
    font-size: 1.25em;
    font-weight: bold;
    color: blue; /* Optional: color of wind speed */
}