body {
    background-color: black;
    color: white;
    text-align: center;
    background-attachment: fixed;
}

.day {
    background-color: #30405a;

}

.night {
    background-color: #333333;
}

.invisible {
    opacity: 0;
}

#weatherText {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

#searchBar {
    background-color: #323A47;
    vertical-align: auto;
    align-content: center;
    height: 50px;
    width: 20%;
}

h1 {
    font-size: 60px
}

#cloudDiv {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
}

.cloud {
    border-radius: 0 0 50% 0;
    height: 200px;
    width: 100%;
    position: fixed;
    top: -300px;
    left: 50%;
    transform: translate(-50%, -50%);
}

#cloud1 {
    filter: url(#cloudFilter1);
}

#cloud2 {
    filter: url(#cloudFilter2);
}

#cloud3 {
    filter: url(#cloudFilter3);
}

.lightCloud#cloud1{
    box-shadow: 0px 300px 50px 0px white;
}
.lightCloud#cloud2{
    box-shadow: 0px 300px 50px -50px rgb(161, 161, 161);
}
.lightCloud#cloud3{
    box-shadow: 0px 300px 50px -100px rgb(105, 105, 105);
}

.moderateCloud#cloud1{
    box-shadow: 0px 300px 50px 50px white;
}
.moderateCloud#cloud2{
    box-shadow: 0px 300px 50px 0px rgb(161, 161, 161);
}
.moderateCloud#cloud3{
    box-shadow: 0px 300px 50px -50px rgb(105, 105, 105);
}

.heavyCloud#cloud1{
    box-shadow: 0px 300px 50px 100px white;
}
.heavyCloud#cloud2{
    box-shadow: 0px 300px 100px 50px rgb(161, 161, 161);
}
.heavyCloud#cloud3{
    box-shadow: 0px 300px 100px -50px rgb(105, 105, 105);
}