*{
    margin: 0px;
    padding: 0px;
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;  
}

body{
    display: flex;
    background-image: url(img/pexels-njeromin-12734294.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(2px);
    border-radius: 0px;
}

main{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}
main *{
    border-radius: 25px;
}

/* search section */
.search-bar{
    width: 100%;
    height: fit-content;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px 0px;
    margin-top: 10px;
}
#search-inp{
    width: 25%;
    min-width: 15%;
    height: 1rem;
    padding: 10px 10px;
    margin: 0px auto;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 1px;
    border: 1.5px solid silver;
    outline: 2cm;
    box-shadow: 0px 0px 15px 2px darkgray;
    background: transparent;
    color: whitesmoke;
    cursor: auto;
}
#search-inp::-webkit-input-placeholder{
    color: whitesmoke;
    background: transparent;
}
#search-inp:hover{
    border: 1.5px solid silver;
    outline: 1.5cm;
    box-shadow: 0px 0px 20px 1px rgb(0, 24, 41);
    transition: 1.5s;
    background: transparent;
}
#search-icon{
    width: fit-content;
    height: 1.5rem;
    cursor: pointer;
    margin-left: 5px;
    color: whitesmoke;
}

/* last-update */
.last-upd{
    width: 99.9%;
    height: fit-content;
    position: sticky;
    top: 96.5vh;
    background: gray;
    border: 1px solid;
    border-radius: 0.1px;
    text-align: right;
    margin-top: 20px;
}
.last-upd p{
    margin: 3px 2px;
    margin-right: 10px;
}

/* section - a start */
.section-a{
    width: 100h;
    height: fit-content;
    display: flex;
    position: relative;
    top: -60px;
    margin: 20px 20px auto;
    margin-bottom: 10px;
    border: 2px solid silver;
    box-shadow: 0px 0px 5px silver;
    padding: 2px;
}

/* section-a divided into two parts */
.div-a1, .div-a2{
    width: 50%;
    height: fit-content;
    padding: 5px 3px;
}
.div-a1{
    display: inline;
}

/* div-a1 divided into to areas 1 and 2 */
.a1-area1,.a1-area2{
    height: fit-content;
    border: 0px;
    color: #ffffff;
}
.a1-area1{
    display: flex;
    margin-bottom: 5px;
    background: transparent;
}

/* area-1 has divided into two parts in 1a and 1b */
.area-1a,.area-1b{
    width: 50%;
    border: 1.5px solid silver;
    box-shadow: 0px 0px 4px silver;
}
.area-1a{
    margin-right: 5px;
    padding: 20px;
}

/* area-1a has divided into two sub parts date... and temp-cloud */
.date-container{
    padding: 0;
}

/* date... divided into two parts day.. and month.. */
.day-container{
    margin-top: -10px;
    font-size: 5rem;
    font-family: "Fleur De Leah", cursive;
    font-weight: 400;
    font-style: normal;
}
.month-date-container{
    margin-top: -10px;
    font-size: 1.5rem;
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;
}

/* temp-cloud divided into two parts temp-container and cloud-container */
.temp-cloud{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 5px;
}
/* temp-container */
.temp-container{
    width: 40%;
    height: 100%;
}
.temp{
    font-size: 2.5rem;
}
.cloud-type{
    font-size: 1.5rem;
}
/* cloud-container */
.cloud-container{
    width: 200px;
    height: 10rem;
    position: relative;
    top: -15px;
}
.cloud-container img{
   width: 100%;
   height: 100%;
   margin: 0px auto;
   background: transparent;
}

.area-1b{
    background: transparent;
    display: inline; 

}
.wind-humi{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
    text-align: left;
}
.keys p , .values p{
    margin-top: 2.5px;
}

.sun-set-rise{
    width: 100%;
    height: 7rem;
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.sun-rise, .sun-set{
    width: 50%;
    border:none;
    text-align: center;
    margin-top: 15px;
}
.sun-set-rise img{
    width: 50%;
    height: 50%;
    justify-content: center;
    align-items: center;
}

.a1-area2{
    height: fit-content;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.a1-area2 div{
    width: 8.5%;
    height: fit-content;
    border: 1px solid silver;
    border-radius: 11px;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 2px;
    box-shadow: 0px 0px 4px silver;
}
.a2divimg img{
    width: 100%;
    height: 5rem;
}

/* section-a div-a2 start */
.div-a2{
    display: inline;
    justify-content: center;
    align-items: center;
    text-align: center;   
}
.searched-loc{
    width: 100%;
    height: fit-content;
    margin-top: 15px;
}
.loc-name{
    height: 5rem;
    line-height: 5rem;
    padding: 5px;
    font-size: 3rem;
    font-weight: 400;
    -webkit-text-stroke: 0.5px rgb(206, 206, 206);
    text-shadow: 1.5px 3.5px 8px lightcyan;
}
.loc-name:hover{
    width: fit-content;
    margin: 0px auto;
    text-align: center;
    transition: 3s;
    transform: rotate(360deg);
    letter-spacing: 5px;
    text-shadow: 1.5px 3.5px 5px;
}

.loc-info{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 25px;
}
.loc-info p{
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 10px 0px;
    padding: 0px;
    -webkit-text-stroke: 0.5px rgb(206, 206, 206);
}
.loc-info-title, .loc-info-data{
    text-align: left;
}
.loc-info-data{
    -webkit-text-stroke: 0.5px rgb(25, 95, 217);
}
.loc-info-data:hover{
    font-weight: 350;
    transition: 2.5s;
    color: silver;
    text-shadow: 1.5px 2.5px 3px black;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
    /* transform: scaleY(2); */
}