* {
    box-sizing: border-box;
  }
.result{
    width: 70%;
    margin-top: 25px;
}
.tempdiv{
    float: left;
    width: 40%;
    margin-top: 25px;
}
.condiv{
    float: left;
    width: 30%;
    margin-top: 25px;

}
.winddiv{
    float: left;
    width: 30%;
    margin-top: 25px;
}
.btn{
    background-color: #ffb300;
    width: 100%;
    height: 45px;
    border: #fdd835 ;
    margin-bottom: 10px;
    margin-top: 20px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition-duration: 0.4s;
}
.btn:hover{
    background-color: #fdd835;
    box-shadow: 0 2px 4px 0 rgba(73, 73, 73, 0.2), 0 2px 15px 0 rgba(80, 80, 80, 0.19);
}
.form{
    width: 100%;
    height: 45px;
    margin-top: 15px;
    background-color: rgb(255, 255, 255);
    border-color: rgb(228, 228, 228);
    font-weight: bolder;
    font-size: 16px;
    transition-duration: 0.4s;
    border-radius: 6px;
}
.form-1{
    width: 100%;
    height: 45px;
    margin-top:15px ;
    background-color: rgb(255, 255, 255);
    border-color: rgb(228, 228, 228);
    font-weight: bolder;
    font-size: 16px;
    transition-duration: 0.4s;
    border-radius: 6px;
}
.form:hover{
    box-shadow: 0 2px 4px 0 rgba(73, 73, 73, 0.2), 0 2px 15px 0 rgba(80, 80, 80, 0.19);

}
.card{
    margin: auto;
    width: 370px;
    margin: auto;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin-bottom: 10px;
    border-style: hidden;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0),0 2px 15px 0 rgba(80, 80, 80, 0.19) ;
     
}

.p-2 {
    padding: 10px;
}
.heading{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    margin: 8px ;
    font-weight: bolder;
}
.logo{
    
    height: 70px;
    width: 150px;
    margin-top: 18px;
    border-style: hidden;
    border-radius: 6px;
}
.result{
    position: absolute;
    text-align: left;
    margin-left: 30px;

}
.name{
    font-weight: bolder;
    font-size: 16px;
}
.last{
    font-size: 10px;
    color: rgba(0, 0, 0, 0.315);
}
.icons{
    width: 20px;

}
.anxtex{
    position: absolute;
    text-align: start;
}
.start{
    width: 100%;
}
.subani{
    position: fixed;
    top: 20px;
    animation-name: cloud;
    animation-duration: 46s;
    animation-iteration-count: infinite;

}
.subani1{
    position: fixed;
    left: 0px;
    top:40px;
    animation-name: cloud1;
    animation-duration: 70s;
    animation-iteration-count: infinite;

}
.subani2{
    position: fixed;
    right: 0px;
    top:40px;
    animation-name: cloud2;
    animation-duration: 70s;
    animation-iteration-count: infinite;

}

@keyframes cloud{
    0% {left:0px;}
    50% {left:60%;}
    100% {left:0px}
}
@keyframes cloud1{
    0% {left:10px;}
    50% {left:90%;}
    100% {left:10px}
}
@keyframes cloud2{
    0% {righ:0%;}
    50% {right:90%;}
    100% {right:0%}
}
@media(max-width:370px){
    .card{
        width: 90%;
    }
}
@media(max-width:450px){
    .tempdiv,.winddiv,.condiv{
        width: 90%;
    }
}