@import 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap';*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Comic Sans MS,sans-serif
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    font-size:16px;
    background-image: url("rain_wallpaper1.jpg") ;
    background-size: cover;
    background-color: #636ba5;
}
::selection{
    color:#fff;
    background:#2c4974
}
.wrapper{
    width:400px;
    background:#fff;
    border-radius:7px;
    box-shadow:7px 7px 20px rgba(0,0,0,.05)
}
.wrapper header{
    display:flex;
    font-size:1.31em;
    font-weight:500;
    color:#43affc;
    padding:16px 15px;
    align-items:center;
    border-bottom:1px solid #ccc
}
header i{
    font-size:0;
    cursor:pointer;
    margin-right:8px
}
.wrapper.active header i{
    margin-left:5px;
    font-size:1.45em
}
.wrapper .input-part{
    margin:20px 25px 30px
}
.wrapper.active .input-part{
    display:none
}
.input-part .info-txt{
    display:none;
    font-size:1.06em;
    text-align:center;
    padding:12px 10px;
    border-radius:7px;
    margin-bottom:15px
}
.input-part .info-txt.error{
    color:#721c24;
    display:block;
    background:#f8d7da;
    border:1px solid #f5c6cb
}
.input-part .info-txt.pending{
    color:#0c5460;
    display:block;
    background:#d1ecf1;
    border:1px solid #bee5eb
}
.input-part :where(input,button){
    width:100%;height:55px;
    border:none;
    outline:none;
    font-size:1.12em;
    border-radius:7px
}
.input-part input{
    text-align:center;
    padding:0 15px;
    border:1px solid #ccc
}
.input-part input:is(:focus,:valid){
    border:2px solid #43affc
}
.input-part input::placeholder{
    color:#bfbfbf
}
.input-part .separator{
    height:1px;
    width:100%;
    margin:25px 0;
    background:#ccc;
    display:flex;
    align-items:center;
    justify-content:center
}
.separator::before{
    content:"or";
    color:#b3b3b3;
    font-size:1.18em;
    padding:0 15px;
    background:#fff
}
.input-part button{
    color:#fff;
    cursor:pointer;
    background:#43affc;
    transition:.3s ease
}
.input-part button:hover{
    background:#1d9ffc
}
.wrapper .weather-part{
    display:none;
    margin:30px 0 0;
    align-items:center;
    justify-content:center;
    flex-direction:column
}
.wrapper.active .weather-part{
    display:flex
}
.weather-part img{
    max-width:125px
}
.weather-part .temp{
    display:flex;
    font-weight:500;
    font-size:4.5em
}
.weather-part .temp .numb{
    font-weight:600
}
.weather-part .temp .deg{
    font-size:.55em;
    display:block;
    margin:10px 5px 0 0
}
.weather-part .weather{
    font-size:21px;
    text-align:center;
    margin:-5px 20px 15px
}
.weather-part .location{
    display:flex;
    font-size:19px;
    padding:0 20px;
    text-align:center;
    margin-bottom:30px;
    align-items:flex-start
}
.location i{
    font-size:22px;
    margin:3px 5px 0 0
}
.weather-part .bottom-details{
    display:flex;
    width:100%;
    justify-content:space-between;
    border-top:1px solid #ccc
}
.bottom-details .column{
    display:flex;
    width:100%;
    padding:15px 0;
    align-items:center;
    justify-content:center
}
.column i{
    color:#5dbbff;
    font-size:2.5em
}
.column.humidity{
    border-left:1px solid #ccc
}
.column .details{
    margin-left:3px
}
.details .temp,.humidity span{
    font-size:1.12em;
    font-weight:500;
    margin-top:-3px
}
.details .temp .deg{
    margin:0;
    font-size:.95em;
    padding:0 2px 0 1px
}
.column .details p{
    font-size:.87em;
    margin-top:-6px
}
.humidity i{
    font-size:2.37em
}
@media(max-width:500px){body{padding:0 10px;font-size:14px}.wrapper{width:330px}

.wrapper header{
    font-size:1.4em;
    padding:14px 20px
}
.input-part :where(input,button){
    height:52px;
    font-size:1.06em
}
.input-part .separator{
    margin:23px 0
}
.separator::before{
    padding:0 12px
}
.input-part :where(input,button){
    font-size:1.28em
}
.weather-part img{
    max-width:118px
}
.weather-part .location{
    margin-bottom:25px
}

.bottom-details .column{
    padding:12px 0;}
}