body { 
  background-color: #b0c4de;
  background: url('') no-repeat center center fixed; 
  background-size: cover;
  font-size: 100%;
}

#outer-box	{
	background-color: rgba(255,255,255,.7);
	color: 666;
	padding: 40px;
	margin-top: 20px;
	border-radius: 20px;
	font-family: "Nunito Sans", sans-serif;
}

#weather-main {
	color: #333;
	border-left: 2px #324b93 solid;
	border-right: 2px #324b93 solid;
}

#city, #country {
	font-size: 3em;
}

#date	{
	font-size: 2em;
	margin-top: 1.5em;

}

#time	{
	font-size: 2em;
}

#temperature {
	font-size: 8em;
	font-weight: bold;
	color: #324b93;
}

#degree {
	font-size: 3em;
	color: #324b93;
	font-weight: bold;
	position: relative;
  top: -33px;
}

#icon {
	position: relative;
  top: -40px;
}

#description {
	font-size: 3em;
}

.button {
	margin-top: 10px;
	font-size: 1.5em;
}

#weather-detail {
	padding-left: 40px;
	font-size: 2em;
}

@media screen and (max-width: 768px) {
    
	#outer-box	{
		padding: 20px 0 0 0;
		margin-top: 0;
		border-radius: 0;
	}


	#city, #country {
		font-size: 2em;
		line-height: 1em;
	}

	#date, #time	{
		font-size: 1.5em;
		margin-top: 0;
	}

  #weather-main {
  	margin: 10px 0 20px 0;
  	padding-bottom: 20px;
		border-left: none;
		border-right: none;
		border-top: 1px #324b93 solid;
		border-bottom: 1px #324b93 solid;
	}

	#description {
		font-size: 2em;
	}

	#weather-detail {
		padding-left: 0;
		padding-bottom: 20px;
		font-size: 1.5em;
		text-align: center;
	}

	.detail {
		line-height: 1em;
	}

}