@keyframes float {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(2px, -2px) scale(1.01); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

/* Desktop */
body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: #000;
    color: #eee;
    opacity: 60%;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.clock,
.weather {
    font-size: 15rem;
}

.container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view {
    position: absolute;
    text-align: center;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.view.active {
    opacity: 1;
    transform: scale(1);
}

#battery,
#date {
    font-size: 3rem;
    opacity: 0.8;
}

.condition {
    height: 11rem;
    width: 11rem;
}

#location {
    font-size: 3rem;
}

#temp,
#uv,
#hl {
    font-size: 2rem;
    opacity: 0.8;
}

#date,
#time,
#battery,
#location,
#condition,
#temp,
#uv,
#hl {
    animation: float 1s ease-in-out infinite, fade 1s ease-in-out infinite;
}

/* Tablet */
@media (max-width: 840px) {
    .clock,
    .weather {
        font-size: 10rem;
    }

    .condition {
        height: 7.5rem;
        width: 7.5rem;
    }

    #battery,
    #date,
    #location {
        font-size: 2rem;
    }

    #temp,
    #uv,
    #hl {
        font-size: 2rem;
    }
}

/* Phone */

@media (max-width: 430px) {
    .clock,
    .weather {
        font-size: 5rem;
    }

    .condition {
        height: 4rem;
        width: 4rem;
    }

    #battery,
    #date,
    #location {
        font-size: 1.5rem;
    }

    #temp,
    #uv,
    #hl {
        font-size: 1rem;
    }
}