@import "main.css";

html::-webkit-scrollbar{
	height:0;
	width:0;
}

:is(.preloader, .prefetching){
	height:100vh;
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:8px;
	background-color:var(--c_p);
	position:fixed;
	top:0;
	left:0;
}

:is(.preloader, .prefetching) > span{
	display:block;
	padding-right:24px;
	background-image:var(--loader_svg_0);
	background-position:right center;
	background-size:contain;
	background-repeat:no-repeat;
	font-size:var(--fs_4);
}

:is(.preloader, .prefetching) ~ *{
	display:none !important;
}

.preloader{
	z-index:100;
}

.prefetching{
	z-index:1;
}

.nav-bar{
	height:64px;
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	background-color:var(--c_p);
	padding:8px 64px;
	box-sizing:border-box;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
}

.nav-bar > div{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.website-name{
	font-size:var(--fs_8);
	letter-spacing:-1px;
}

.website-name > span{
	font-weight:700;
}

main > section{
	padding:64px 128px;
	box-sizing:border-box;
}

.weather-img{
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}

.search-bar{
	height:48px;
	width:calc(8px * 6);
	background-color:var(--c_t);
	position:fixed;
	top:8px;
	right:64px;
	z-index:11;
	overflow:hidden;
	transition:all 350ms ease-in-out;
}

.search-bar.active{
	background-color:var(--c_0);
	width:calc(8px * 80);
	overflow:visible;
}

.search-bar > input{
	outline:none;
	width:100%;
	height:100%;
	font-family:var(--fs_p);
	font-size:var(--fs_4);
	color:var(--c_f0);
	background-color:var(--c_t);
	border:none;
	padding:0 60px 0 12px;
	box-sizing:border-box;
}

.search-bar > input::placeholder{
	color:var(--c_f0);
	opacity:0.7;
}

.search-bar > button{
	outline:none;
	cursor: pointer;
	height:48px;
	width:48px;
	background-color:var(--c_t);
	border:none;
	padding:0;
	position:absolute;
	top:0;
	right:0;
}

.search-bar > button > span{
	--size:22;
	--color:var(--c_f0);
}

.search-bar > button.fetching{
	background-image:var(--loader_svg_0);
	background-position:center;
	background-size:22px;
	background-repeat:no-repeat;
}

.search-bar > button.fetching > span{
	--size:0;
}

.search-bar > div{
	width:100%;
	min-height:0;
	height:auto;
	background-color:var(--c_p);
	box-sizing:border-box;
	position:absolute;
	top:calc(64px - 8px);
	left:0;
}

.search-bar > div.result{
	padding:8px;
	box-shadow: 4px 4px 8px 1px hsl(0 0% 0% / 8%);
}

.search-bar > div > div{
	cursor: pointer;
	border-bottom:1px solid var(--c_0);
	padding:8px 0;
}

.search-bar > div > div:active{
	background-color:var(--c_0);
}

.search-bar > div > div > span{
	display:block;
}

.search-bar > div > div > span:first-child{
	font-size:var(--fs_4);
}

.search-bar > div > div > span:last-child{
	font-size:var(--fs_2);
	color:var(--c_4);
}

.section-2{
	padding-top:calc(64px + 32px);
}

.location-box > h2{
	margin:0;
	font-size:24px;
	font-weight:400;
}

.location-box > span{
	font-size:var(--fs_2);
}

.cw-box{
	padding:64px 0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.cw-box > div:nth-child(1){
	margin-bottom:16px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:16px;
}

.cw-box > div:nth-child(1) > div:nth-child(1){
	height:64px;
	width:64px;
}

.cw-box > div:nth-child(1) > div:nth-child(2){
	font-size:64px;
	position: relative;
}

.cw-box > div:nth-child(1) > div:nth-child(2) > span:nth-child(2){
	display:block;
	font-size:var(--fs_4);
	position:absolute;
	top:0;
	right:-24px;
}

.cw-box > div:nth-child(3){
	font-size:var(--fs_2);
}

.cw-box > span:nth-child(4){
	margin-top:32px;
	font-size:var(--fs_5);
}

.seven-box{
	display:grid;
	grid-template:auto / repeat(7, auto);
	justify-content:center;
	justify-items:center;
}

.seven-box > div{
	height:128px;
	width:128px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:16px;
	border-right:1px solid var(--c_1);
	box-sizing:border-box;
}

.seven-box > div:last-child{
	border-right-width:0;
}

.seven-box > div > span:last-child{
	font-size:var(--fs_2);
}

.aqi-box{
	margin-top:32px;
}

.aqi-box > span:nth-child(1){
	margin-bottom:8px;
	display:block;
	font-weight:bold;
}

.aqi-box > div:nth-child(2){
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
}

.aqi-box > div:nth-child(2) > span{
	font-size:var(--fs_2);
}	

.aqi-box > div:nth-child(2) > meter{
	margin:2px 0 0;
	height:4px;
	width:100%;
}

.aqi-box > div:nth-child(2) > meter::-webkit-meter-bar{
	height:4px;
	border:0;
	border-radius:0;
	background-color:var(--c_3);
}

.aqi-box > div:nth-child(2) > meter::-webkit-meter-optimum-value{
    transition:all 350ms ease-in-out;
}

.aqi-box > div:nth-child(2) > meter[value="1"]::-webkit-meter-optimum-value{
	background-image:linear-gradient(to right, var(--c_aqi-1) 100%, transparent 0%);
}

.aqi-box > div:nth-child(2) > meter[value="2"]::-webkit-meter-optimum-value{
	background-image:linear-gradient(to right, var(--c_aqi-1), var(--c_aqi-2));
}

.aqi-box > div:nth-child(2) > meter[value="3"]::-webkit-meter-optimum-value{
	background-image:linear-gradient(to right, var(--c_aqi-1), var(--c_aqi-2), var(--c_aqi-3));
}

.aqi-box > div:nth-child(2) > meter[value="4"]::-webkit-meter-optimum-value{
	background-image:linear-gradient(to right, var(--c_aqi-1), var(--c_aqi-2), var(--c_aqi-3), var(--c_aqi-4));
}

.aqi-box > div:nth-child(2) > meter[value="5"]::-webkit-meter-optimum-value{
	background-image:linear-gradient(to right, var(--c_aqi-1), var(--c_aqi-2), var(--c_aqi-3), var(--c_aqi-4), var(--c_aqi-5));
}

.aqi-box > div:nth-child(2) > meter[value="6"]::-webkit-meter-optimum-value{
	background-image:linear-gradient(to right, var(--c_aqi-1), var(--c_aqi-2), var(--c_aqi-3), var(--c_aqi-4), var(--c_aqi-5), var(--c_aqi-6));
}

.aqi-box > div:nth-child(3) > span{
	display:inline-block;
	font-size:var(--fs_2);
	font-weight:bold;
}

.aqi-box > div:nth-child(3) > span:first-child{
	padding-right:16px;
	border-right:1px solid var(--c_1);
}

.aqi-box > div:nth-child(3) > span > span:first-child{
	font-weight:normal;
}

.section-3, .section-4{
	margin:0 64px 64px;
	padding:64px;
	background-color:var(--c_0);
}

.section-3 > h3{
	margin:0 0 32px;
	font-size:20px;
}

.hourly-datetime{
	font-size:var(--fs_2);
}

.section-3 > div:nth-child(3){
	margin:16px 0 32px;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	gap:8px;
}

.section-3 > div:nth-child(3) > div:nth-child(1){
	height:48px;
	width:48px;
}

.section-3 > div:nth-child(3) > div:nth-child(2){
	margin-right:32px;
	font-size:32px;
	position:relative;
}

.section-3 > div:nth-child(3) > div:nth-child(2) > sup{
	font-size:var(--fs_3);
	position:absolute;
	top:0;
	right:-24px;
}

.section-3 > div:nth-child(3) > div:nth-child(3){
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	font-size:var(--fs_2);
}

.six-box{
	margin-top:32px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.six-box > div{
	height:48px;
	width:128px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	padding:24px;
	box-sizing:border-box;	
}

.six-box > div:nth-child(even){
	background-color:var(--c_1);
}

.six-box > div:nth-child(odd){
	background-color:var(--c_2);
}

.six-box > div:nth-child(1){
	order:1;
}

.six-box > div:nth-child(6){
	order:2;
}

.six-box > div:nth-child(7){
	order:3;
}

.six-box > div:nth-child(1){
	background-color:var(--c_t);
}

.six-box > div > span:nth-child(2){
	font-size:var(--fs_2);
}

.hour-range-box{
	margin-top:calc(32px + 8px);
}

.hour-range-box > div{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	padding:0 6px;
	box-sizing:border-box;
}

.hour-range-box > div > span{
	user-select: none;
	display:inline-block;
	height:8px;
	width:1px;
	background-color:var(--c_4);
	position:relative;
}

.hour-range-box > div > span::before{
	content:attr(label);
	display:block;
	width:12px;
	text-align:center;
	font-size:var(--fs_1);
	position:absolute;
	top:-14px;
	right:-6px;
}

.hour-range-box > input{
	outline:none;
	appearance:none;
	margin:0;
	height:4px;
	width:100%;
	background-color:var(--c_3);
	background-image:linear-gradient(to right, var(--c_2) 10%, transparent 0%);
}

.hour-range-box > input::-webkit-slider-thumb{
	appearance:none;
	height:12px;
	width:12px;
	background-color:var(--c_2);
}

.section-4 > h3 {
    margin: 0 0 32px;
    font-size: 20px;
}

.days-box{
	display:grid;
	grid-template:auto / repeat(7, auto);
	justify-content:center;
	place-items:center;
}

.days-box > button{
	user-select:none;
	outline:none;
	cursor: pointer;
	width:calc(8px * 16);
	height:128px;
	border:none;
	border-right:1px solid var(--c_1);
	background-color:var(--c_t);
	padding:8px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:8px;
	font-family:var(--ff_p);
	box-sizing:border-box;
}

.days-box > button:last-child{
	border-right:0;
}

.days-box > button.active{
	background-color:var(--c_3);
}

.days-box > button > span:nth-child(1){
	font-size:var(--fs_4);
}

.days-box > button > span:nth-child(3){
	font-size:var(--fs_2);
}

.days-box > button > div{
	height: 48px;
    width: 48px;
}

.footer{
	width:100%;
	height:64px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
}

.dac{
	user-select: none;
	display: flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.dac > span:first-child{
	font-size:var(--fs_1);
}

.dac > span:last-child{
	font-size:var(--fs_3);
}

@media screen and (min-width:320px) and (max-width:480px) and (orientation:portrait){

	.nav-bar{
		padding:8px 16px;
	}

	main > section{
		padding:64px 32px;
	}

	.search-bar{
		right:16px;
	}

	.search-bar.active{
		width:calc(100% - 32px);
	}

	.search-bar > div.result{
		box-shadow: 0 12px 8px -4px hsl(0 0% 0% / 8%);
	}

	.seven-box{
		grid-template:repeat(7, auto) / 100%;
	}

	.seven-box > div{
		height:48px;
		width:100%;
		flex-direction:row-reverse;
		justify-content:space-between;
		padding:0 16px;
		border-right:none;
		border-bottom:1px solid var(--c_1);
	}

	.seven-box > div:last-child{
		border-bottom-width:0;
	}

	.seven-box > div > span:last-child{
		font-size:var(--fs_4);
	}

	.section-3, .section-4{
		margin:0 16px 16px;
		padding:32px 16px;
	}

	.section-3 > h3{
		margin:0 0 16px;
	}

	.six-box{
		flex-wrap:wrap;
		justify-content:flex-start;
		gap:8px;
	}

	.six-box > div{
		width:calc(100% / 2 - 4px);
	}

	.six-box > div:nth-child(1){
		display:none;
	}

	.days-box{
		justify-content:flex-start;
		padding-bottom:8px;
		overflow-x:scroll;
		overflow-y:hidden;
	}

	.days-box::-webkit-scrollbar{
		height:4px;
		background-color:var(--c_3);
	}

	.days-box::-webkit-scrollbar-thumb{
		background-color:var(--c_2);
	}

	.days-box > button{
		width:calc(8px * 12);
	}

}

@media screen and (min-width:768px) and (max-width:820px) and (orientation:portrait){

	.nav-bar{
		padding:8px 32px;
	}

	main > section{
		padding:64px 64px;
	}

	.search-bar{
		right:32px;
	}

	.search-bar.active{
		width:calc(100% - 64px);
	}

	.seven-box{
		grid-template:repeat(7, auto) / 100%;
	}

	.seven-box > div{
		height:48px;
		width:100%;
		flex-direction:row-reverse;
		justify-content:space-between;
		padding:0 16px;
		border-right:none;
		border-bottom:1px solid var(--c_1);
	}

	.seven-box > div:last-child{
		border-bottom-width:0;
	}

	.seven-box > div > span:last-child{
		font-size:var(--fs_4);
	}

	.section-3, .section-4{
		margin:0 32px 32px;
		padding:32px 32px;
	}

	.section-3 > h3{
		margin:0 0 16px;
	}

	.six-box{
		flex-wrap:wrap;
		justify-content:flex-start;
		gap:8px;
	}

	.six-box > div{
		width:calc(100% / 2 - 4px);
	}

	.six-box > div:nth-child(1){
		display:none;
	}

	.days-box{
		justify-content:flex-start;
		padding-bottom:8px;
		overflow-x:scroll;
		overflow-y:hidden;
	}

	.days-box::-webkit-scrollbar{
		height:4px;
		background-color:var(--c_3);
	}

	.days-box::-webkit-scrollbar-thumb{
		background-color:var(--c_2);
	}

	.days-box > button{
		width:calc(8px * 12);
	}

}