body{
	background-color: var(--gray_5);
	color: var(--gray_2);
	display: grid;
	font-family: 
		-apple-system, BlinkMacSystemFont, 
		'Segoe UI', 
		Roboto, 
		Helvetica, 
		Arial, 
		sans-serif;
	font-size: var(--m_font);
	grid-template-areas: "a" "b";
	grid-template-columns: 1fr min-content;
	grid-template-rows: min-content 1fr;
	height: calc(100vh - env(safe-area-inset-top));
	margin: 0;
	overflow: hidden;
	width: 100vw}
	#cover{
		-webkit-backdrop-filter: blur(2px);
		animation: loading 4s ease-in-out infinite;
		backdrop-filter: blur(2px);
		background-color: rgba(0,0,0,0.0);
		height: 100vh;
		position: absolute;
		width: 100vw;
		z-index: 300}
	#cover.off{
		display: none}
	@keyframes loading{
	  	0%,100%{
	    	-webkit-backdrop-filter: blur(2px);
	    	backdrop-filter: blur(2px);
	  	}
	  	50%{
	    	-webkit-backdrop-filter: blur(4px);
	    	backdrop-filter: blur(4px);
	  	}
	}
	#popup{
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		background-color: rgba(0,0,0,0.1);
		display: grid;
		grid-template-areas: "a";
		height: 100vh;
		overflow: hidden;
		place-items:center;
		position: absolute;
		width: 100vw;
		z-index: 200}
	#popup.off{
		display: none}
		#popup > *{
			 box-shadow: var(--shadow);
			display: grid;
			grid-area: a}
		#popup > *.off{
			display: none}
	#header{
		align-items: center;
		background-color: var(--green_1);
		box-sizing: border-box;
		display: grid;
		grid-area: a;
		grid-template-columns: min-content 1fr min-content;
		height: var(--header_height);
		padding: 0 var(--m_gap)}
		#header h1{
			color: var(--green_2);
			text-align: center}
		#header h1.yellow{
			color: var(--yellow_1)}
	#main{
		box-sizing: border-box;
		display: grid;
		grid-area: b;
		grid-auto-rows: min-content;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		grid-gap: var(--m_gap);
		height: cal(100vh - var(--header_height));
		overflow-y: scroll;
		padding:
			var(--l_gap) 
			var(--l_gap) 
			100px var(--l_gap)}
		#main .product{
			background-color: white;
			border-radius: var(--m_gap);
			box-shadow: var(--shadow);
			box-sizing: border-box;
			display: grid;
			grid-gap: var(--s_gap);
			grid-template-columns: 100%;
			padding: var(--s_gap)}
		#main .product.filled{
			background-color: var(--green_3)}
			#main .product > img{
				object-fit: cover;
				aspect-ratio: 9/10;
				border-radius: var(--m_gap);
				width: 100%}
			#main .product > div{
				background-color: var(--gray_3);
				border-radius: var(--m_gap);
				box-sizing: border-box;
				padding: var(--m_gap)}
			#main .product.filled > div{
				background-color: white}
				#main .product > div .a{
					color: var(--green_1);
					font-size: var(--l_font);
					font-weight: bold;
					margin: var(--xs_gap) 0}
				#main .product > div .b{
					margin: var(--s_gap) 0}
				#main .product > div .c{
					display: grid;
					font-size: var(--xs_font);
					margin: var(--m_gap) 0}
				#main .product > div .d{
					background-color: white;
					border-radius: var(--xs_gap);
					box-sizing: border-box;
					display: grid;
					margin-top: var(--xs_gap);
					height: var(--s_gap);
					padding: 2px}
				#progress{
					background-color: var(--green_1);
					border-radius: inherit}
				.filled #progress{
					background-color: var(--yellow_1)}