@media (max-width: 1440px) {
    .atributos{
        left: 80%;
    }
}
@media (max-width: 1024px) {
    .atributos{
        left: 75%;
    }
    .clima{
        width: 300px;
        height: 175px;
    }
    .clima .sol{
        width: 75px;
        height: 75px;
    }
    .clima .sol .raios{
        width: 8px;
        height: 35px;
    }
    .clima .sol .raios:nth-child(1){
        top: -40px;
        left: 35px;
    }
    .clima .sol .raios:nth-child(2){
        top: -22.5px;
        right: -10px;
    }
    .clima .sol .raios:nth-child(3){
        top: 22px;
        right: -25px;
    }
    .clima .sol .raios:nth-child(4){
        bottom: -22.5px;
        right: -10px;
    }
    .clima .sol .raios:nth-child(5){
        bottom: -40px;
        left: 35px;
    }
    .clima .sol .raios:nth-child(6){
        bottom: -22.5px;
        left: -10px;
    }
    .clima .sol .raios:nth-child(7){
        top: 22px;
        left: -25px;
    }
    .clima .sol .raios:nth-child(8){
        top: -22.5px;
        left: -10px;
    }
    .clima .nuvem-1 {
        width: 175px;
        height: 175px;
        left: 0;
    }
    .clima .nuvem-2{
        width: 125px;
        height: 125px;
        left: 150px;
    }
}
@media (max-width: 768px) {
    .toggle-wrapper{
        left: 15%;
    }
    .clima {
        width: 250px;
        height: 125px;
    }
    .clima .sol {
        width: 50px;
        height: 50px;
        right: 100px;
    }
    .clima .sol .raios{
        width: 6px;
        height: 30px;
    }
    .clima .sol .raios:nth-child(1){
        top: -35px;
        left: 23px;
    }
    .clima .sol .raios:nth-child(2){
        top: -22.5px;
        right: -10px;
    }
    .clima .sol .raios:nth-child(3){
        top: 13px;
        right: -22px;
    }
    .clima .sol .raios:nth-child(4){
        bottom: -22.5px;
        right: -10px;
    }
    .clima .sol .raios:nth-child(5){
        bottom: -35px;
        left: 23px;
    }
    .clima .sol .raios:nth-child(6){
        bottom: -22.5px;
        left: -10px;
    }
    .clima .sol .raios:nth-child(7){
        top: 13px;
        left: -22px;
    }
    .clima .sol .raios:nth-child(8){
        top: -22.5px;
        left: -10px;
    }
    .clima .nuvem-1 {
        width: 125px;
        height: 125px;
    }
    .clima .nuvem-2 {
        width: 75px;
        height: 75px;
        left: 100px;
    }
    .atributos{
        left: 70%;
    }
}
@media (max-width: 425px) {
    .toggle-wrapper {
        top: 85%;
        left: 30%;
    }
    .atributos {
        left: 40%;
    }
    .clima {
        width: 125px;
        height: 100px;
    }
    .clima .sol {
        right: 140px;
    }
    .clima .sol .raios {
        width: 4px;
        height: 25px;
    }
    .clima .sol .raios:nth-child(1){
        top: -30px;
        left: 23px;
    }
    .clima .sol .raios:nth-child(2){
        top: -18.5px;
        right: -7px;
    }
    .clima .sol .raios:nth-child(3){
        top: 13px;
        right: -18px;
    }
    .clima .sol .raios:nth-child(4){
        bottom: -18.5px;
        right: -7px;
    }
    .clima .sol .raios:nth-child(5){
        bottom: -30px;
        left: 23px;
    }
    .clima .sol .raios:nth-child(6){
        bottom: -18.5px;
        left: -7px;
    }
    .clima .sol .raios:nth-child(7){
        top: 13px;
        left: -18px;
    }
    .clima .sol .raios:nth-child(8){
        top: -18.5px;
        left: -7px;
    }
    .clima .nuvem-1 {
        width: 75px;
        height: 75px;
        display: none;
    }
    .clima .nuvem-2 {
        width: 25px;
        height: 25px;
        left: 65px;
        display: none;
    }
}