@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap');

html {
	height:100%;
	margin:0;
}
body {
	overflow:hidden;
	background-color:#fff;
	height:100%;
	margin:0;
	font-family:'Oxygen',sans-serif;
	font-weight:700;
}
.aqi {
	max-width:960px;
	display:flex;
	flex-direction:column;
	margin:0 auto;
}
@media (orientation:portrait),(max-width:1060px) {
	.aqi {
		width:360px;
	}
}
.logo {
	width:360px;
}
img {
	margin:10px;
}
.logotitle {
	vertical-align:top;
	text-align:center;
	margin:30px 0;
	display:inline-block;
	font-size:52px;
	color:#fff;
	line-height:1;
	text-shadow:0 0 1px #777;
}
.outer {
	height:580px;
	width:960px;
	border-radius:40px;
	background-color:rgba(255,255,255,.8);
}
@media (orientation:portrait),(max-width:1060px) {
	.outer {
		height:1200px;
		width:360px;
	}
}
.inner {
	height:580px;
	width:360px;
	float:left;
	border-radius:42px;
	background-color:#2e368f;
	margin:0;
	padding:0;
}
.info {
	height:580px;
	width:360px;
	text-align:center;
}
.aqimain {
	height:495px;
	width:360px;
	background-color:#fff;
	border-radius:40px;
	display:inline-block;
	padding:10px 0;
}
.aqititle {
	font-size:24px;
	text-transform:uppercase;
	margin:20px 0 0;
}
#aqinumber {
	margin:0;
	font-size:124px;
}
.aqikind {
	margin:-20px 0 0 0;
	font-size:15px;
}
.advisory {
	font-size:32px;
	text-transform:uppercase;
}
.time {
	font-weight:400;
	font-size:20px;
	margin:5px;
}
.temphumid {
	margin-top:-95px;
	width:100%;
	text-align:center;
	font-size:25px;
	color:#fff;
}
.temphumid > img {
	margin:15px 5px -5px 20px;
	height:30px;
}
.response {
	float:right;
	height:540px;
	width:540px;
	padding:20px;
}
@media (orientation:portrait),(max-width:1060px) {
	.response {
		width:320px;
		position:absolute;
		top:830px;
		padding-top:40px;
	}
}
.resptitle {
	font-size:24px;
	text-transform:uppercase;
	margin:10px 0;
}
.respheader {
	font-size:15px;
	margin-bottom:0;
}
.respinfo {
	font-size:15px;
	font-weight:400;
	margin-top:0;
}