*, *:before, *:after {
	--anim-delay: 1s;
}

/* page */
/* 
.game-title span.icon::after {
	content: "\f10d";
}
 */
.game-title span.icon::before {
    color: var(--ch-dkblue);
}


/* gameboard */
.board,
.solutions {
/*     overflow: scroll; */
	overflow-y: auto;
	overflow-x: hidden;
	height: 300px;
    height: calc(100% - 200px);
}
.line {
    font-family: "Arvo", serif;
    text-align: center;
    margin: 15px auto;
    font-size: 18px;
}
.line span.blank:before {
	content: "";
    border-bottom: 2px solid;
    width: 40px;
    display: inline-block;
}

.direction {
    grid-column: 1 / 3;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 600;

}
.selections:not(.demo) {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    width: 80%;
	margin-bottom: 20px;
}
.selections:not(.demo) .item span {
    text-transform: capitalize;
    font-family: "Arvo", serif;
    text-align: center;
/*     font-size: 18px; */
    font-size: 28px;
}
.selections .item span::before {
	content: "";
	height: 28px;
	width: 28px;
	display: block;
	background: lightgray;
	border-radius: 28px;
}
.selections.demo .item span {
    padding: 5px 10px;
    border-radius: 15px;
    display: inline-block;
}
.selections.demo .item span::before {
	display: inline-block;
	height: unset;
    width: unset;
    padding-right: 5px;
}
.selections .item span::before, 
.selections .item span a::before, 
.selections .item span.choice::before, 
.selections .item span.choice a::before {
    padding-right: 0;
}
.selections .item span.correct::before, 
.selections .item span.incorrect::before {
	background: unset;
}

.buttons {
	margin-bottom: 15px;
	
}

/* solutions */
.solutions {
    font-size: 18px;
}
span.uline {
	content: "";
    border-bottom: 2px solid;
    font-weight: 700;
}
.ans {
	opacity: 0;
	transform: translateX(-100%);
	animation: slideIn 1s ease forwards; /* Apply animation to all elements */
	margin-bottom: 20px;
	display: flex;
    flex-direction: column;
}
.ans span {
    line-height: 22px;
}
.ans span.correctword {
    color: green;
}
.ans:nth-child(1) {
	animation-delay: calc(var(--anim-delay) * 0);
}

.ans:nth-child(2) {
	animation-delay: calc(var(--anim-delay) * 1);
}

.ans:nth-child(3) {
	animation-delay: calc(var(--anim-delay) * 2);
}

.ans:nth-child(4) {
	animation-delay: calc(var(--anim-delay) * 3);
}
.finish-inner .result {
	opacity: 0;
	transform: translateX(-100%);
	animation: slideIn 1.5s ease forwards; /* Apply animation to all elements */
	animation-delay: calc(var(--anim-delay) * 4);
}
.finish-inner .thank-you {
	opacity: 0;
	transform: translateX(-100%);
	animation: slideIn 1.5s ease forwards; /* Apply animation to all elements */
	animation-delay: calc(var(--anim-delay) * 5.5);
}

@keyframes slideIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}


/* testing */
.link-1 {
    background: var(--ch-pink);
}
.link-2 {
    background: var(--ch-blue);
}
.link-3 {
    background: var(--ch-salmon);
}
.link-4 {
    background: var(--ch-dkblue);
}
.link-5 {
    background: var(--ch-coral);
}
@media only screen and ((max-width: 360px) or (max-height: 640px)) {
	.buttons button {
		min-width: unset;
	}
	.solutions {
		font-size: 16px;
	}
	.ans {
		margin-bottom: 10px;
	}
	.ans span {
		line-height: 20px;
	}
	.finish-inner p.result.show {
		margin: 10px auto;
	}
    p.thank-you {
        margin-top: 10px;
        width: 100%;
    }

}