.top-container {
	padding: 1rem;
    text-wrap: pretty;
}

.description-container p {
	margin-top: 1rem;
	line-height: 1.5rem;
}

.main-side-container {
	grid-area: auto;
}
.level-content-container {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	justify-content: center;
	margin: 0 auto;
	scroll-margin-top: 48px;
	max-width: var(--max-width)
}

#datesContainer {
	position: relative;
}
#datesContainer a {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	align-items: center;
	gap: 3px;
	transform: translateY(-50%);
}
#datesContainer time + a {
	left: auto;
	right: 0;
}
#datesContainer img {
	width: 10px;
	height: auto;
}
#datesContainer img[alt*="Previous"] {
	transform: rotate(90deg);
}
#datesContainer img[alt*="Next"] {
	transform: rotate(-90deg);
}
#datesContainer time {
	display: block;
	text-align: center;
}
#datesContainer + p {
	margin: 1rem 0 2rem;
	font-size: 100%;
}

.answer-list-container {
	padding: 0 1rem;
}
.answer-list-container section + section {
	margin-top: 3rem;
}
.answer-list-container h3 {
	margin: 2rem 0 0.75rem;
	font-size: 120%;
}
cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 75%;
	line-height: 1;
}
#wordleAnswerSection {
	text-align: center;
}
#wordleAnswerSection h2 {
	text-wrap-style: pretty;
}
.wordle-answer-container {
	margin: 1rem 0;
}
#wordleAnswerSection .wordle-answer-container {
	margin: 1.75rem 0;
}
.wordle-answer-container p {
	font-size: 0.8125rem;
}
#wordleAnswerSection > p {
	text-align: left;
}
.wordle-answer-word-container, .shuffled-word-container {
	display: flex;
	align-items: center;
	justify-content: center;	
	gap: 0.25rem;
	margin-top: 0.25rem;
}
.wordle-answer-word-container label, .shuffled-word-container label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	cursor: pointer;
	user-select: none;
	border: 2px solid rgb(0 0 0 / 30%);
}
.wordle-answer-word-container label span, .shuffled-word-container label span {
	filter: blur(4px);
	font-weight: 600;
	transition: filter 0.21s ease-in-out; 
}
.wordle-answer-word-container label:has(input:checked) {
	--letter-bg: #3c813a;

	animation: flipReveal 0.4s ease-in-out forwards;
}
.wordle-answer-word-container label:has(input:checked) span {
	filter: blur(0);
}
@keyframes flipReveal {
	50% {
		transform: rotateX(90deg);
		border-color: rgb(0 0 0 / 30%);
		background-color: #fff;
	}
	50.1% {
		transform: rotateX(90deg);
		color: #fff;
		border: none;
		background-color: var(--letter-bg);
	}
	100% {
		color: #fff;
		border: none;
		background-color: var(--letter-bg);
		transform: rotateX(0deg);
	}
}
.wordle-answer-word-container input, .shuffled-word-container input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.shuffled-word-container {
	justify-content: left;
}
.shuffled-word-container label {
	--letter-bg: #b58f2a;

	gap: 3px;
	width: auto;
	height: auto;
	border-width: 1px;
	transition: border 0.21s ease-in-out; 
}
.shuffled-word-container label span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}
.shuffled-word-container label:has(input:checked) {
	border-color: transparent;
}
.shuffled-word-container label:has(input:checked) span {
	animation: flipReveal 0.4s ease-in-out forwards;
}
.shuffled-word-container label:has(input:checked) span {
	filter: blur(0);
}

/****** MEDIA BREAKPOINTS ******/
@media (min-width: 992px) {
	.top-container {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.level-header h2 {
		font-size: 1.5rem;
	}

	.answer-list-container > p {
		font-size: 100%;
	}
	
	.level-content-container {
		grid-template-areas: "towerAd answerList sideContainer";
		grid-gap: 2rem;
		grid-template-columns: 300px 1fr 300px;
	}

	.sticky-tower-ad {
		grid-area: towerAd;
	}
	.answer-list-container {
		grid-area: answerList;
		padding: 0;
	}
	.main-side-container {
		grid-area: sideContainer;
	}

	.level-content-container > div.square-ad {
		margin: 0 0 0 auto;
	}

	.level-content-container .main-side-container {
		margin: 0;
	}

	.answer-list-container > p {
		margin: 1.5rem 0;
	}
}