/* ----------------------------------------------------
Stylesheet for Tenki - Weather App [A freeCodeCamp Project ]
version 1.0
author: Bonface Mudiri
email: tastywebapps@gmail.com
webpage: https://www.linkedin.com/in/bonface/
-------------------------------------------------------*/


@import url('https://fonts.googleapis.com/css?family=Bungee+Inline');
@import url('https://fonts.googleapis.com/css?family=Basic');


*{
	margin: 0;
	padding: 0;
}

body{
	color: #fff;
	font-family: 'Basic', 'sans-serif';
}

.area-timezone{
	margin-left: auto;
}

.top{
	top: 0;
	width: 100%;
	height: 50px;
	background-color:   #011b4a;
	position: fixed;
	left: 0;
	right: 0;
	line-height: 50px;
	text-align: center;
	font-family: 'Bungee Inline', cursive;
	color: orange;
	font-size: 20px;
}

.bottom{
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color:   #011b4a;
	position: fixed;
	color: #fff;
	text-align: center;
	padding: 3px;
	left: 0;
	right: 0;
}

.middle{
	background-color:   #011b4a; /*#3498DB;*/
	position: absolute;
	top: 50px;
	bottom: 50px;
	left: 0;
	right: 0;
	overflow: auto;

}
.cloud-icon{
	height: 120px;
	width: 120px;
}
.area-timezone{
	text-align: center;
	font-size: 20px;
	padding: 8px;
}
.cloud-icon{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#Cloud{
	text-align: center;
	font-size: : 500px;
}

.fa{
	color: white;
}

.fa-heart{
	color: red;
}
.fa-free-code-camp{
	color: green;
}
.fa-thermometer-half{
	color: orange;
}
.forecast-row{
	font-size: 13px;
    text-align: center;
    margin-top: 3px;

}
.fa-map-marker{
	font-size: 50px;
	color: orange;
}

.fa-tachometer{
	color: #1bc8ef;
}

.fa-flag-checkered{
	color: #1bc8ef;

}

.fa-tint{
	color: #1bc8ef;

}


.area-timezone{
	margin-top: 10px;
}
#Address{
  color:  #fff; /*#2c3e50; */
  font-size: 20px;
}


.forecast-summary{
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
	color:  #fff;
	font-size: 16px;
}

.temperature{
	font-size: 32px;
	font-weight: bold;
	text-align: center;
}
.current-state{
	font-size: 28px;
	font-weight: bold;
	text-align: center;
}

#Degrees{
	display: none;
}
.btn-outline-warning{
	border: 3px solid orange;
	color: #fff;
	transition: all ease 0.7s;
	letter-spacing: 2px;
}
.btn-outline-warning:hover{
	background-color: orange;
	border: none;
	letter-spacing: 3px;
}

.btn-convert{
	background-color: orange;
	transition: all ease 0.9s;
    letter-spacing: 2px;
    color: #fff;
}

.current-state h2{
	font-size: 18px;
}

.share-text{
	display: block; 
    font-size: 28px;
    text-align: center;
	padding-top: 100px;

}
.bottom a {
	transition: all ease-in 0.9s;
}
.bottom a:hover{
	color: orange;
	letter-spacing: 2px;
}

@media screen and (max-width: 480px){

	.top{
		font-size: 15px;
	}
	.btn-outline-warning{
		border: 2px solid orange;
	}
	.fa-map-marker{
		font-size: 35px;
	}
	.share-text{
		font-size: 25px;
    }
    .bottom{
    	font-size: 13px;
    }
    #Address{
	  font-size: 18px;
	}
	.temperature{
	font-size: 28px;
    }


}