@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100&display=swap');

body {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-family: 'Saira Condensed', sans-serif;
	height: 100vh;
	justify-content: space-between;
	margin: 0;
	max-width: 100vw;
	text-align: center;
	width: 100vw;
}

header h1 {
	border-bottom: 1px solid rgba(100, 100, 100, 0.6);
	color: rgba(100, 100, 100, 0.6);
	margin-top: 0;
	padding: 0 20px;
}

header img {
	height: 84px;
	width: 130px;
}

figure {
	max-width: 95vw;
	margin: 0;
	position: relative;
}

figure > picture {
	max-width: 1600px;
	width: 100%;
}

figure > picture > img {
	max-width: 100%;
}

@media only screen and (min-width: 800px) {
	figure {
		max-width: 85vw;
	}
}

footer {
	border-top: 1px solid rgba(100, 100, 100, 0.3);
	margin-top: 20px;
}

footer p {
	margin-top: 0.4em;
	padding: 0 40px;
}

.weather-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 1em 0;
}

.weather-wrapper > div {
	flex: 1 1 50%;
}

.weather-direction {
	display: flex;
	justify-content: center;
}

.weather-circle {
	align-items: center;
	border-radius: 50%;
	border: 1px dotted black;
	display: flex;
	height: 56px;
	justify-content: center;
	width: 56px;
}

.weather-arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 50px solid black;
}