*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

img, svg {
    display: block;
    max-width: 100%;
}

#creative {
    position: relative;
    display: flex;
    flex-direction: column;
    color: #000;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* container-type: size; -- REMOVED */
    height: 100%; /* Ensure #creative fills the viewport height */
}

#footer {
    display: flex;
    gap: 2em;
    position: absolute;
    color: #fff;
    opacity: 0; /* Note: You'll likely have JS to change this */
}

/* --- REPLACEMENT FOR @container (orientation: portrait) --- */
@media (orientation: portrait) {
    #footer {
        bottom: 0;
        left: 0;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 2.5em 1em 1em;
        font-size: clamp(24px, 5vw, 96px); /* Replaced 5cqi with 5vw */
        background: linear-gradient(0deg,rgba(51, 51, 51, 1) 30%, rgba(51, 51, 51, 0.68) 75%, rgba(51, 51, 51, 0) 100%);
    }
}

/* --- REPLACEMENT FOR @container (orientation: landscape) --- */
@media (orientation: landscape) {
    #footer {
        right: 0;
        top: 0;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        padding: 1em 1.5em 1em 2.5em;
        font-size: clamp(24px, 5vh, 96px); /* Replaced 5cqb with 5vh */
        background: linear-gradient(-90deg,rgba(51, 51, 51, 1) 25%, rgba(51, 51, 51, 0.68) 80%, rgba(51, 51, 51, 0) 100%);
    }
}

#temperature, #uv {
    display: flex;
    align-items: center;
    gap: 0.25em;
}

#uvContainer {
    display: flex;
    flex-direction: column;
}

#footer svg {
    height: 1.5em;
    width: auto;
    flex-shrink: 0;
}