/* @import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=Henny+Penny&family=Manufacturing+Consent&family=MonteCarlo&family=Peralta&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=Henny+Penny&family=Manufacturing+Consent&family=MonteCarlo&display=swap');
*, *:before, *:after {
	--circle: 340px;
	--ridge-size: 70px;
	--ridge-offset: 20px;
	--ridge-blur: 24px;
	--ridge-spread: 14px;
	--degree: 20deg;
	--inner-ring: calc(var(--circle) - 55px);
	--radius: calc(  ((var(--circle) / 2) + var(--ridge-offset))   *-1  );
	--circumference: calc(var(--circle) * pi);
}

.game-title h1 {
    position: relative;
    z-index: 1;
}
.game-title h1 a {
    font-size: 58px;
    line-height: 58px;
}
.icon.star::before {
    content: "\e28b";
}
.game-title span.icon::before {
    color: var(--medred);
    font-size: 42px;
}
p.pageSubhead {
    font-size: 16px;
	z-index: 1;
    position: relative;
    margin-bottom: 0;
	height: 36px;
    line-height: 18px;
}
p.pageSubhead.finish .result {
    display: none;
}
p.pageSubhead.finish .result.show {
    display: block;
    font-size: 20px;
    line-height: 1;
    z-index: 1;
    position: relative;
    margin: 0;
	padding-top: 8px;
}
p.pageSubhead.finish .result.show::before,
p.pageSubhead.finish .result.show::after {
	margin: 0 5px;
}
p.pageSubhead.finish .result-correct::before,
p.pageSubhead.finish .result-correct::after {
	content: "\f091";
}
p.pageSubhead.finish .result-incorrect::before,
p.pageSubhead.finish .result-incorrect::after {
	content: "\f165";
}
p.pageSubhead.finish .result-incorrect::after {
    transform: scaleX(-1);
    display: inline-block;
}
.rebus {
    display: flex;
/*     flex-direction: column; */
    flex-flow: wrap;
    align-items: center;
	row-gap: 10px;
	column-gap: 20px;
    justify-content: center;
/* 	width: calc(var(--circle) - 85px); */
	width: calc(var(--circle) - 115px);
    z-index: 1;
    position: relative;
/* 	row-gap: 15%; */
/*     column-gap: 10%; */
}
.rebus .item {
	display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 5px;
	height: 54px;
}
.rebus .item span:not(.answered) {
	color: black;
}
.item span.blank {
    display: inline-block;
    width: 61px;
    height: 60px;
  	border: 3px solid black;
    border-radius: 10px;
} 
.rebus .item.answered {
    position:relative;
    font-size: 36px;
	animation-duration: .5s;
	animation-timing-function: ease-in;
	animation-name: pop;
    border: 3px solid;
    border-radius: 10px;
	padding: 5px;
} 
.rebus span.icon.answered {
    position:relative;
    font-size: 36px;
	animation-duration: .5s;
	animation-timing-function: ease-in;
	animation-name: pop;
    border: 3px solid ;
    border-radius: 10px;
    padding: 5px;
} 

/* form */
form#choices {
    display: flex;
    flex-direction: row;
	justify-content: space-evenly;
    width: 100%;
	z-index: 1;
    position: relative;
}
form#choices .item {
	padding: 5px;
	border: 3px solid;
    border-radius: 10px;
}
form#choices .item span.icon {
	font-size: 36px;
	color: black;
}
form#choices .item.selected {
    color: unset;
    text-shadow: none;
}
form#choices .item.selected.color-red {
    color: var(--ch-salmon);
    background: var(--ch-salmon);
}
form#choices .item.selected.color-orange {
    color: var(--ch-orange);
    background: var(--ch-orange);
}
form#choices .item.selected.color-green {
    color: var(--ch-green);
    background: var(--ch-green);
}
form#choices .item.selected.color-blue {
    color: var(--ch-blue);
    background: var(--ch-blue);
}
form#choices .item.selected.color-purple {
    color: var(--ch-purple);
    background: var(--ch-purple);
}
form#choices .item.selected.color-pink {
    color: var(--ch-pink);
    background: var(--ch-pink);
}
form#choices .item.selected.color-brown {
    color: var(--ch-brown);
    background: var(--ch-brown);
}
form#choices .item.selected.color-coral {
    color: var(--ch-coral);
    background: var(--ch-coral);
}
form#choices .item.selected.color-dkblue {
    color: var(--ch-dkblue);
    background: var(--ch-dkblue);
}
form#choices .item.selected.color-turquoise {
    color: var(--ch-turquoise);
    background: var(--ch-turquoise);
}
form#choices .item.selected span {
    color: white;
}

/* solutions */
.solutions {
	z-index: 1;
    position: relative;
}
.finish-inner p {
	margin: 0 auto 30px;
}
.finish-inner p.answer {
    font-family: "Arvo", serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
	animation-duration: .5s;
    animation-timing-function: ease-in;
    animation-name: pop;
}
.finish-inner p.result {
    font-size: 18px;
    line-height: 1;
}
.finish-inner p.thank-you {
    font-size: 16px;
    line-height: 18px;
    width: 100%;
}

/* bottle cap */
.bottle-cap {
	width: var(--circle);
	height: var(--circle);
	border-radius: 50%; 
	background: unset;
	position: relative;
	margin: 10px auto 15px;
	box-shadow: inset 0 0 30px 25px rgba(0, 0, 0, 0.7);
	box-shadow: inset 0 0 var(--ridge-blur) var(--ridge-spread) rgba(0, 0, 0, 0.8);
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bottle-cap::before {
    content: '';
    position: absolute;
	height: var(--inner-ring);
    width: var(--inner-ring);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 5px 0px rgba(0, 0, 0, 0.2);
}
.bottle-cap .ridge {
	width: var(--ridge-size); 
	height: var(--ridge-size);
	background-color: white; 
	border-radius: 50%; 
	position: absolute; 
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
}
.bottle-cap p.game-name {
	font-size: 16px;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}
.bottle-cap .ridge.ridge-1 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 0))translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-2 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 1)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-3 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 2)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-4 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 3)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-5 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 4)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-6 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 5)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-7 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 6)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-8 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 7)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-9 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 8)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-10 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 9)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-11 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 10)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-12 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 11)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-13 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 12)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-14 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 13)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-15 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 14)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-16 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 15)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-17 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 16)) translateY(var(--radius)); 
}
.bottle-cap .ridge.ridge-18 {
	transform: translate(-50%, -50%) rotate(calc(var(--degree) * 17)) translateY(var(--radius)); 
}

/* fonts */
.font-gothic {
	font-family: "Manufacturing Consent", system-ui;
}
.font-serif {
    font-family: "Arvo", serif;
}
.font-script {
    font-family: "MonteCarlo", cursive;
}
.font-fun {
    font-family: "Henny Penny", system-ui;
}
.font-greek {
    font-family: "Caesar Dressing", system-ui;
}
.font-cowboy {
    font-family: "Peralta", serif;
}
.font-sans-serif {
    font-family: inherit;
	font-weight: 700;
}

/* sizes */
.size-xs {
	font-size: 28px;
}
.size-sm {
	font-size: 32px;
}
.size-md {
	font-size: 38px;
}
.size-lg {
	font-size: 44px;
}
.size-xl {
	font-size: 50px;
}

/* colors */
.color-red {
	color: var(--ch-salmon);
}
.color-orange {
	color: var(--ch-orange);
}
.color-green {
	color: var(--ch-green);
}
.color-blue {
	color: var(--ch-blue);
}
.color-purple {
	color: var(--ch-purple);
}
.color-pink {
	color: var(--ch-pink);
}
.color-brown {
	color: var(--ch-brown);
}
.color-coral {
	color: var(--ch-coral);
}
.color-dkblue {
	color: var(--ch-dkblue);
}
.color-turquoise {
	color: var(--ch-turquoise);
}

@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeOut {
	0% {opacity:1;}
    99% { opacity: 0.01; width: 100%; height: 100%;}
    100% { opacity: 0; width: 0; height: 0;}
}

@media only screen and (min-height: 641px) and (max-height: 728px) {
	*, *:before, *:after {
		--circle: 290px;
		--ridge-size: 66px;
		--ridge-offset: 22px;
		--ridge-blur: 18px;
		--ridge-spread: 10px;
		--inner-ring: calc(var(--circle) - 35px);
	}
/* 
    .game-title h1 a {
        font-size: 40px;
        line-height: 40px;
    }
 */
    .game-title span.icon::before {
        font-size: 34px;
    }
	.bottle-cap {
		margin: 10px auto;
	}
	.bottle-cap p.game-name {
		font-size: 14px;
		bottom: 18px;
	}
	.rebus {
		column-gap: 14px;
		width: calc(var(--circle) - 95px);
		max-height: calc(var(--circle) - 75px);
	}
	.rebus .item {
		height: 50px;
	}
	.item span.blank {
		width: 53.5px;
		height: 52.5px;
		border-width: 3px;
	}
	.rebus span.icon.answered {
		font-size: 28px;
		border-width: 2px;
		padding: 3px;
	}
	form#choices .item span.icon {
		font-size: 30px;
	}
    .buttons button {
        padding: 8px 20px;
    }
    .finish-inner p {
		margin: 0 auto 15px;
	}
/* sizes */
	.size-xs {
		font-size: 22px;
	}
	.size-sm {
		font-size: 26px;
	}
	.size-md {
		font-size: 30px;
	}
	.size-lg {
		font-size: 34px;
	}
	.size-xl {
		font-size: 38px;
	}

}

@media only screen and ((max-width: 380px) or (max-height: 640px)) {
	*, *:before, *:after {
		--circle: 250px;
		--ridge-size: 58px;
		--ridge-offset: 20px;
		--ridge-blur: 18px;
		--ridge-spread: 10px;
		--inner-ring: calc(var(--circle) - 35px);
	}
    .game-title h1 a {
        font-size: 40px;
        line-height: 40px;
    }
    .game-title span.icon::before {
        font-size: 34px;
    }
	p.pageSubhead {
		font-size: 14px;
	}
	p.pageSubhead.finish .result.show {
		font-size: 18px;
	}
	.bottle-cap {
		margin: 5px auto;
	}
	.bottle-cap p.game-name {
		font-size: 12px;
		bottom: 18px;
	}
	.rebus {
		column-gap: 14px;
		row-gap: 0;
		width: calc(var(--circle) - 75px);
		max-height: calc(var(--circle) - 75px);
	}
	.rebus .item {
		height: 50px;
	}
	.item span.blank {
		width: 45px;
		height: 44px;
		border-width: 2px;
	}
	.rebus span.icon.answered {
		font-size: 28px;
		border-width: 2px;
		padding: 3px;
	}
	form#choices .item {
        border-width: 2px;
        padding: 3px;
	}
	form#choices .item span.icon {
		font-size: 28px;
	}
/* 
    .buttons button {
        padding: 6px 20px;
        font-size: 14px;
        line-height: 1;
    }
 */
    .finish-inner p {
		margin: 0 auto 15px;
	}
	.finish-inner p.answer {
		font-size: 18px;
	}
	.finish-inner p.result {
		font-size: 14px;
	}
	.finish-inner p.thank-you {
		font-size: 14px;
		line-height: 16px;
		padding: 5px 10px;
	}
/* sizes */
	.size-xs {
		font-size: 18px;
	}
	.size-sm {
		font-size: 22px;
	}
	.size-md {
		font-size: 26px;
	}
	.size-lg {
		font-size: 30px;
	}
	.size-xl {
		font-size: 34px;
	}

}

/* testing */
.link-1 {
    background: var(--ch-coral);
}
.link-2 {
    background: var(--ch-dkblue);
}
.link-3 {
    background: var(--ch-salmon);
}
.link-4 {
    background: var(--ch-blue);
}
.link-5 {
    background: var(--ch-pink);
}
.link-6 {
    background: var(--ch-purple);
}
.link-7 {
    background: var(--ch-brown);
}
.link-8 {
    background: var(--ch-turquoise);
}
.link-9 {
    background: var(--ch-green);
}
.link-10 {
    background: var(--ch-blue);
}