body
{
	font-family : 'Trebuchet MS';
	background-color: #ddeeff;
	margin : 0 100px;
	text-align : center;
}

h2
{
	text-align : center;
	font-size : 40px;
}

div.box
{
	text-align : center;
	margin : 30px 20px 30px;
	padding : 20px;
	border-radius : 30px;
	background-color : #bbddff;
	width : 300px;
	display : inline-block;
	height : 150px;
	vertical-align: bottom;
}

div.box div.title
{
	font-size : 12px;
}

div.box div.value
{
	margin : 5px 0 15px;
}

div.box.weather div.value
{
	font-size : 30px;
	margin-top : 30px;
}

div.box.temperature div.value
{
	font-size : 100px;
}

div.box.wind div.value
{
	font-size : 30px;
	margin-top : 30px;
}

div.box.humidity_pressure div.value
{
	font-size : 40px;
}

div.box.sun div.value
{
	font-size : 40px;
}

div.footer
{
	margin : 30px 0 20px;
}

a
{
	color : #55aaff;
	text-decoration: none;
}

a:hover
{
	color : #000000;
}

@media only screen and (max-device-width : 667px)
{
	div.box
	{
		width : 90%;
		height : auto;
		display : block;
	}
	
	div.box div.title
	{
		font-size : 15px;
	}
	
	div.box div.value
	{
		margin : 5px 0 15px;
		padding : 0 10px;
	}
	
	div.box.weather div.value
	{
		font-size : 40px;
		margin-top : 5px;
	}
	
	div.box.temperature div.value
	{
		font-size : 100px;
	}
	
	div.box.wind div.value
	{
		font-size : 40px;
		margin-top : 5px;
	}
	
	div.box.humidity_pressure div.value
	{
		font-size : 40px;
	}
	
	div.box.sun div.value
	{
		font-size : 40px;
	}
	
	div.footer
	{
		margin : 30px 0 20px;
		font-size : 20px;
	}
}