:root {
	--preview-gap: 2rem;
}


.font-picker-container h1,
.font-picker-container p {
	font-family: sans-serif;
}

/*When To Use Which Font*/
.which-font-container {
	max-width: 80%;
	text-align: center;
	margin: 0 auto;
}

.when-to-use-which-font-card {
	flex: 1 1 360px;
	background-color: hsl(0 0% 100%);
	padding: 2rem;
	gap: 1rem;
	border: 1px solid hsl(0 0% 90%);
	justify-items: center;
	text-align: center;
}

.when-to-use-which-font-card h2 {
	padding-bottom: var(--space-sm);
}

/*Font Picker*/

.font-picker-container {
	display: flex;
	flex-wrap: wrap;
	max-width: 80%;
	margin: 1rem auto;
	background-color: hsl(0 0% 100%);
	border: 1px solid hsl(0 0% 90%);
}

.font-picker-card {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
}

.select-wrapper {
	display: flex;
	margin: 0.25rem;
}

.controls {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	padding: 2rem;
	max-width: 360px;
	font-size: 1.25rem;
	font-weight: 600;
}

#preview-area {
	width: 360px;
	padding: 2rem;
}

.controls select {
	width: 7rem;
}

.controls button {
	width: 2rem;
}

#font-preview-h1 {
	margin: 1rem auto;
	max-width: 80%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1rem;
}

#font-preview-h1 div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: hsl(0 0% 100%);
	padding: 2rem;
	border: 1px solid hsl(0 0% 90%);
}

#font-preview-h1 div h1 {
	font-size: 1.75rem;
}

#font-preview-h1 div p {
	padding-bottom: 0.5rem;
}

#font-preview-p {
	display: flex;
	flex-wrap: wrap;
	margin: 0.5rem auto;
	max-width: calc(80% + 1rem);
}

#font-preview-p div {
	flex: 1 1 300px;
	background-color: hsl(0 0% 100%);
	padding: 2rem;
	border: 1px solid hsl(0 0% 90%);
	margin: 0.5rem;
}

#font-preview-p h2 {
	text-align: center;
	padding-bottom: 0.5rem;
}

.second-controls {
	background-color: hsl(0 0% 100%);
	border: 1px solid hsl(0 0% 90%);
	max-width: 80%;
	margin: 0 auto;
}

.font-tool-hero-container {
	height: calc(100vh - 128px);
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 400px) {

	.which-font-container,
	.font-picker-container,
	.controls,
	#font-preview-h1,
	#font-preview-p {
		max-width: 100%;
		margin-inline: 0.5rem;
	}

	.font-h1-p-section h1 {
		font-size: 1.75rem;
	}

	#main-heading {
		font-size: 1.5rem;
	}

	#font-preview-p div {
		margin-inline: 0;
	}
}

@media screen and (max-width: 1892px) {

	.font-picker-container>div:nth-child(2) {
		display: none;
	}
}

@media screen and (max-width: 1129px) {
	.font-tool-hero {
		min-width: 360px;
		max-width: 95%;
		height: auto;
	}

	.font-tool-hero-container {
		height: auto;
		padding-top: 1rem;
		padding-bottom: 2rem;
	}
}