html,
body {
    min-width: 400px;
    height: 100vh;
}

.main{
    background: #2980B9;
    background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
    background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
    min-width: 400px;
    height: 100%;
}

.bodyPluie {
    background: rgb(128,128,128);
    background: linear-gradient(90deg, rgba(128,128,128,1) 14%, rgba(105,105,105,1) 47%, rgba(54,58,66,1) 100%);
    transition: all ease-in-out 0,3s;
}

.bodyMitk {
    background: rgb(242,242,243);
    background: linear-gradient(90deg, rgba(242,242,243,1) 8%, rgba(237,237,237,1) 36%, rgba(164,166,169,1) 100%);
    transition: all ease-in-out 0,3s;
}

.bodyClouds {
    background: rgb(224,227,233);
    background: linear-gradient(90deg, rgba(224,227,233,1) 8%, rgba(208,212,219,1) 36%, rgba(132,136,142,1) 100%);
    transition: all ease-in-out 0,3s;
}

.bodySun{
    background: #2980B9;
    background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
    background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
}


#ville {
    text-transform: capitalize;
    font-size: 1.5em;
}

#temperature {
    font-size: 4em;
}

#changer {
    background: rgba(178, 223, 251, .3);
    cursor: pointer;
}

#mode {
    border: 1px;
    border-radius: 15px;
    padding: 15px;
    cursor: pointer;
    border-radius: 15px;
}

.dark {
    color: #ffffff;
}

.dark button {
    background: #144098;
    color: #fff;
}