*{
    box-sizing: border-box;
}
.header{
    text-align: center;
    color: whitesmoke;
    background: rgb(48, 47, 47);
}
h1{
    width: 100vw;
}
.sideBar{
    min-width: 150px;
    height: 100vh;
}
h4{
    padding: 5%;
    text-align: center;
    color: whitesmoke;
}
.col-3{
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    background: grey;
    float: left;
    width: 25%;

}
.cityName{
    padding: 2% 5%;
    border-radius: 5%;
    border-bottom: 10px solid white;
}
.card{
    color: white;
    text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}

.rain{
    opacity:0.7;
    background-image: url(./images/Rain-Background.jpg);
}
.clear{
    background-image: url(./images/clearSky.jpg);
}
.snow{
    background-image: url(./images/snow.jpeg);
}
.thunderstorm{
    background-image: url(./images/thunderstorm.jpg)
}
.drizzle{
    background-image: url(./images/drizzle.jpg);
}
.foggy{
    background-image: url(./images/foggy.jpg);
}
.clouds{
    background-image: url(./images/clouds.jpg);
}