.weather-icon {
    height: 120px;
    width: 120px;
    display: block;
    /* Other styles here */
    object-fit: cover;
}

.forecast-icon {
    margin: 0 auto;
}

.now-icon {
    height: 200px;
    width: 200px;
    padding-top: 10%;
    padding-bottom: 10%;
}

.sunny {
    background: url('../img/weather/icons/sonne.png');
}
.cloudy {
    background: url('../img/weather/icons/wolke_sonne.png');
}
.overcast {
    background: url('../img/weather/icons/bewoelkt.png');
}

.weather-container {
    display: block;
    height: calc(100vh - 20vh);
}

.weather-sonne {
    background-image: url("../img/weather/background/himmel_klar.png");
    background-color: #cccccc;
    background-size: cover;
}

.weather-wolke_sonne {
    background-image: url("../img/weather/background/himmel_wolken.png");
    background-color: #cccccc;
    background-size: cover;
}

.weather-bewoelkt {
    background-image: url("../img/weather/background/himmel_wolken.png");
    background-color: #cccccc;
    background-size: cover;
}

.weather-bewWWWoelkt::before {
	background-image: url("../img/weather/background/himmel_wolken.png");
	background-color: #fff;
	background-size: cover;
	content: ' ';
	opacity: 0.5;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
    /* https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity */
}

.weather-regen {
    background-image: url("../img/weather/background/wolke_regen.png");
    background-color: #cccccc;
    background-size: cover;
}

.weather-left,
.weather-right {
    display: block;
    width: 50%;
    float: left;
    position:relative;
    overflow: hidden;
    /* padding: 20px;*/
}

.weather-now {
    float:left;
    display: flex;
    width: calc(100% - 6vw);
    margin: 8vh auto;
    background: rgba(2, 51, 93, .22);
    border-radius: 10px;
    color: #fff;
}

.weather-now h1 {
    text-align: center;
    /* text-shadow: 2px 2px 22px #fff; */
    padding-left: 1vw;
    padding-right: 1vw;
}

.weather-forecast {
    float: left;
    width: 100%;
    display: flex;
}

.forecast-1h,
.forecast-2h,
.forecast-3h {
    float: left;
    width: 25%;
    padding: 20px 35px;
    background: rgba(2, 51, 93, .22);
    margin: 0 auto;
    max-width:fit-content;
    min-width: 123px;
    text-align: center;
    border-radius: 10px;
    color: #fff;
}


.weather-now,
.forecast-1h {
    margin-left: 3vw;
}

.weather-now,
.forecast-3h {
    margin-right: 3vw;
}

.weather-centered {
    margin-right: 25vw;
    margin-left: 25vw;
}

.weather-now-centered {
    margin: 0 5vw;
}

.weather-now-centered h1 {
    text-align: center;
}

.place-time {
    padding-left: 50px;
    margin: auto 0;
}

.weather-footer {
    /*padding-left: 15px;
    padding-top: 15px;*/
    font-size: large;
    background-color: #02335d;
    color: #fff;
    height: 5vh;
}

.weather-footer h2 {
    padding-top: 15px;
    padding-left: 15px;
    margin: auto;
}

#placetitle {
    font-size: 10vh;
    text-shadow: 2px 2px 13px #fff;
}