#weather-container {
    position: fixed;
    top: var(--half-margin);
    left: var(--one-quarter-margin);
    width: 12rem;
    height: 8rem;

    display: grid;
    grid-template-areas:
            "icon weather weather"
            "icon temperature temperature"
            "location location refresh";
    grid-template-rows: 2.5rem 2.5rem 3rem;
    grid-template-columns: 6rem 3.5rem 2.5rem;

    border: #BFCBD9 1px solid;
    border-radius: 0.5rem;
    background: #3498db;
    box-shadow: 11px 11px 22px #bebebe,
    -11px -11px 22px #ffffff;

}

#weather-container p {
    margin: auto;
    color: #ecf0f1;
    text-align: center;
}

#weather-container .left {
    grid-area: icon;
    display: flex;
    justify-content: end;
    align-items: center;
}

#weather-container .left img {
    visibility: hidden;
    width: 5rem;
}

#weather-container .right-top {
    grid-area: weather;
    margin: auto auto 1px auto;
}

#weather-container .right-bottom {
    grid-area: temperature;
    margin: 1px auto auto auto;
}

#weather-container .bottom-left {
    grid-area: location;
    padding: 1rem 0;
    border-top: #bdc3c7 1px dashed;
    line-height: 1rem;
}

#weather-container .bottom-right {
    grid-area: refresh;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 0;
    border-top: #bdc3c7 1px dashed;
}

#weather-container .bottom-right img {
    width: 1.5rem;
    height: 1.5rem;
    margin: auto 0;
}

#weather-container .bottom-right img:hover {
    width: 2rem;
    height: 2rem;
}