body{
    text-align: center;
    background-color: rgb(185, 218, 248);
}

.bodyMaxWe{
    max-width: 800px;
    background-color: aliceblue;
    padding: 35px;
    margin:60px auto;
    border-radius: 25px;
    box-shadow: 0px 30px 50px rgb(97, 92, 92);
    transform: skew(-4deg);
}
form{
    margin: 30px;
}
img {
    height: 45px;
    width: 45px;
}
#button{
    height: 40px;
    width: 40px;
    padding: 0;
    margin: 10px;
    border-radius: 100%;
    background-color: field;
    box-shadow: 0px 30px 50px rgb(97, 92, 92);
    cursor: pointer;
    position: relative;
    color: gray;
    font-size: 12px;
    
}

.current-temperature-value{
    font-size: 30px;
}
 .mainIMG{
    height: 75px;
    width: 75px;
    position: relative;
}
.CitySearcher{
    width: 300px;
    height: 25px;
    font-size: 16px;
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0px 17px 30px rgb(97, 92, 92);
}
#magnit{
    font-size: 25px;
    color: blue;
    padding: 5px;
}
.NameOfCity{
    margin-left: 50px;
    margin-top: 25px;
}
.degree{
    margin-right: 60px;
}
.weatherInfo{
    display: flex;
}
.firstLine{
    margin-top: 20px;
    margin-bottom: 20px;
}
.mainFirstSection{
    display: flex;
    justify-content:space-between;
}
.CondiTion {
    max-width: 650px;
    background-color: rgb(158, 187, 212);
    padding: 25px;
    margin:60px auto;
    border-radius: 25px;
    box-shadow: 0px 30px 50px rgb(97, 92, 92);
}
.sunCondition {
    max-width: 260px;
    background-color: rgb(158, 187, 212);
    padding: 25px;
    margin:60px auto;
    border-radius: 25px;
    box-shadow: 0px 30px 50px rgb(97, 92, 92);
}
ul{
    padding: 0px;
    list-style-type: none;
}
ul .CondiTionGrib{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
ul .sunConditionGrid{
    display: flex;
    justify-content: space-between;
}
ul .dailyWeather{
    display: flex;
    justify-content:space-between;
    overflow:hidden;
    
}
.fiGure {
    font-size: 16px;
    max-width: 25%;
    background-color: rgba(127, 162, 192, 0.61);
    border-bottom: 7px solid rgb(243, 234, 234);;
    border-right: 7px solid rgb(240, 233, 233);
    padding: 25px;
    margin:5px auto;
    border-radius: 25px;
    box-shadow: 0px 30px 50px rgb(97, 92, 92);
    transform:skew(20deg);
}
.fiGure:hover {
    transform: scale(1.2);
    z-index: index;
}