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

html {
	font-size:	17px;
}

body {
	margin:			0px 0px 0px 0px;
	padding:		0px 0px 0px 0px;
	box-sizing:		border-box;
	font-family:		'Nunito', sans-serif;
	min-height:		100vh;
}

div.pricing {
	display:		grid;
	grid-template-columns:	auto;
	grid-template-rows:	auto auto auto auto auto auto;
	grid-auto-flow:		column;
	gap:			0rem;

	&>div {
		display:	contents;
		&>div {
			border-left:	1px solid gray;
			border-top:	1px solid gray;
			padding:	0.5rem;
		}
		/*
		&>div:last-child {
			border-right:	1px solid gray;
		}
		*/
		&>div:last-child {
			border-bottom:	1px solid gray;
		}
	}

	&>div:nth-child(2) {
		&>div:first-child {
			background-color:	#ead6d6;
		}
	}

	&>div:nth-child(3) {
		&>div:first-child {
			background-color:	#fff395;
		}
	}
	&>div:nth-child(4) {
		&>div:first-child {
			background-color:	#bfe6bf;
		}
	}
	&>div {
		&>div:first-child {
			font-weight:		bold;
		}
	}


	&>div:first-child {
		&>div {
			background-color:	#eaeaea;
		}
	}

	&>div:last-child {
		&>div {
			border-right:	1px solid gray;
		}
	}

}

/*
@media (max-width: 768px) {
	div.pricing {
		grid-template-columns:	auto auto;
		&>div:first-child {
			&>div {
				display:	none;
			}
		}
		&>div:not(first-child) {
			&>div:first-child {
				grid-row:	span 5;
			}
		}
		&>div > div,
		&>div:last-child > div,
		&>div > div:last-child {
			border:	0px solid gray;
		}
		&>div > div,
		&>div > div:last-child {
			border-bottom:	1px solid gray;
		}
	}

}
*/

body {
	padding:	0px;
	margin:		0px;
	display:	grid;
	grid-template-columns: auto 1fr;
	grid-template-rows:	auto 1fr auto;


	&>* {
		border:			0px solid red;
		padding:		0.5rem;
	}
	&>*:nth-child(3) {
		grid-column:	1 / -1;
	}

	&>header {
		padding-left:	5vw;
	}
	&>nav {
		padding-right:	5vw;
	}
	&>main {
		padding-left:	5vw;
		padding-right:	5vw;
	}

	&>main > article {
	}

	&>header, &> nav {
		background-color: #497eb6;
		color:		white;
		a {
			color:		white;
		}
		border:		0px solid white;
		display:	grid;
	}

	&>nav ul {
		display:	flex;
		list-style:	none;
		padding:	0px;
		margin:		0px;
		gap:		0.5rem;
		flex-wrap:	wrap;
		align-items:	center;
		align-content:	center;
		border:		0px solid yellow;
	}

	@media (max-width: 768px) {
		&>nav ul {
			display:	grid;
		}
		&>header {
			padding-left:	1vw;
		}
		&>nav {
			padding-right:	1vw;
		}
		&>main {
			padding-left:	1vw;
			padding-right:	1vw;
		}
	}

	&>header > h1 {
		border-right:	1px solid white;
		padding-right:	1rem;
		align-self:		center;
	}

	&>footer {
		grid-column:	1 / -1;
		font-weight:	bold;
		font-size:	small;
		text-align:	center;
	}

	button, input {
		font-size:	1rem;
	}

	&>main code {
		white-space:	pre-wrap;
	}
}

@media (max-width: 768px) {
	body {
		grid-template-columns:	auto auto;
	}
	html {
		font-size:	14px;
	}
}