body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(227, 224, 224);
    padding: 0 70px;
    box-shadow: 0px 0px 10px 1px rgb(235,110,76);
}

.search{
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 2px solid; */
    width: 49%;
}

#searchBar{
    padding: 11px 20px;
    border-radius: 8px 0 0 8px;
    border: none;
    width: 100%;
    background-color: rgb(255,255,255);
    font-size: 18px;
}
#searchBar:active{
    border: none;
}
#searchBtn{
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 9px 15px 12px 15px;
    width: 30%;
    background-color: rgb(72,72,74);
    color: rgb(255,255,255);
    font-weight: bolder;
    cursor: pointer;
    transition: all ease 0.2s;
    letter-spacing: 2px;
    font-size: 18px;
    font-family: "Fredoka", sans-serif;
}
#searchBtn:active{
    transform: scale(0.985);
}


.sideBar{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
}
.sideBar i{
    cursor: pointer;
    color: rgb(91,91,93);
}
#diffWeather{
    padding: 10px;
    border-radius: 10px;
    border: none;
    background-color: rgb(236,236,237);
    color: rgb(91,91,93);
    font-size: 15px;
    font-family: "Fredoka", sans-serif;
    cursor: pointer;
    transition: all ease 0.1s;
}
#diffWeather:active{
    transform: scale(0.988);
}


.button-box {
    /* border: 2px solid; */
	width: 100%;
    padding: 1px;
	margin: 25px auto;
	position: relative;
	border-radius: 10px;
	background: rgb(210, 210, 218);
}

.toggle-btn {
	padding: 10px 10px;
	cursor: pointer;
    color: rgb(91,91,93);
	background: transparent;
	border: 0;
	outline: none;
	position: relative;
	text-align: center;
    font-family: "Fredoka", sans-serif;
}

#btn {
	left: 0;
	top: 4px;
	position: absolute;
	width: 49%;
	height: 78%;
    /* margin: 5px; */
	background: rgb(255,255,255);
	border-radius: 10px;
	transition: .5s;
    margin-left: 3px;
}

#container{
    display: grid;
    grid-template-columns: 3fr 4fr;
}
.mainData{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* border: 2px solid;    */
    height: 75%;
    width: 80%;
    margin: auto;
    font-family: "Fredoka", sans-serif;
}
.data{
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 50px;
}

.data #loading{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Fredoka", sans-serif;
}

.data h1{
    margin: 0;
}
.data #date{
    margin: 0 0 20px 0;
}
.data .errorDiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.data .errorDiv img{
    width: 97%;
}
.data .errorDiv p{
    position: relative;
    top: -95px;
    font-family: "Fredoka", sans-serif;
}

#forecastContainer{
    height: 240px;
}
#forecastContainer .errorDiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    height: 200px;
    box-shadow: none;
}
#forecastContainer img{
    width: 60%;
    height: 90%;
}
#forecastContainer .errorDiv p{
    position: relative;
    top: -55px;
    font-family: "Fredoka", sans-serif;
}
#forecastContainer .loading{
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Fredoka", sans-serif; 
}


.mapouter{
    height: 400px;
    /* border: 2px solid; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapouter .gmap_canvas{
    width: 90%;
    height: 85% ;
    box-shadow: 3px 3px 10px 1px grey;
}

.mapouter .gmap_canvas iframe{
    width: 100%;
    height: 100%;
}

.location{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.location #placeName,#countryName{
    font-size: 40px;
    letter-spacing: 2px;
    font-weight: 600;
}
.location #placeName{
    color: rgb(235,110,76);
}

.temperature{
    font-size: 50px;
    font-weight: 600;
    margin: 1px;
}
.temperature i{
    font-size: 35px;
}

.feelsLike{
    font-size: 18px;
    margin: 5px 0 40px 0;
}

table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    margin-top: 2px;
    font-size: 14px;
    overflow: hidden;
    font-family: "Fredoka", sans-serif;
}

table td{
    padding: 9px;
    padding-left: 15px;
}
table tbody tr{
    border-left: 3px solid rgb(235,110,76);
}
table i{
    color: rgb(0, 128, 255);
}

/* forecast Container */

#forecastContainer{
    width: 95%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    /* gap: 10px;    */
}

#forecastContainer>div{
    text-align: center;
    width: 13%;
    box-shadow: 0px 0px 10px 2px rgb(227, 224, 224);
    border-radius: 10px;
    color: rgb(0, 0, 0);
    font-family: "Fredoka", sans-serif;
}

#forecastContainer>div i{
    font-size: 45px;
}

#forecastContainer>div .currDay{
    font-size: 20px;
    font-weight: bolder;    
} 
#forecastContainer>div .maxTemp{
    font-size: 23px;
    margin: 10px;
}
#forecastContainer>div .minTemp{
    font-size: 20px;
    margin: 13px 0 25px 0;
}

#forecastContainer #forecastHeading{
    color: rgb(235,110,76);
    font-family: "Fredoka", sans-serif;
    box-shadow: none;
    margin: 0 30px;
    font-size: 26px;
    width: 15%;
}