/* Widget */

#widget {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.widget-column {
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

#widget-time,
#widget-weather {
    font-size: 3.5em;
}

#widget-date,
#widget-location {
    font-size: 1.6em;
}

#widget-weather-circle {
    position: absolute;
}


/* Phone */

@media screen and (max-width: 800px) {
    #widget {
        margin-top: 50px;
        display: flex;
        justify-content: center;
    }
}


/* Desktop */

@media screen and (min-width: 800px) {
    #widget {
        grid-area: widget;
        margin-left: auto;
    }
}