@import url('https://fonts.googleapis.com/css2?family=Lato&family=Cherry+Bomb+One&display=swap');
@keyframes bounceOutDown {20% {transform: translate3d(0, 10px, 0) scaleY(0.985);} 40%,45% {  opacity: 1;  transform: translate3d(0, -20px,0) scaleY(0.9);} to {opacity: 0;  transform: translate3d(0, 2000px, 0) scaleY(3);}}
.bounceOutDown {animation-name: bounceOutDown}

@keyframes fadeOutLeftBig {from {opacity: 1;} to {opacity: 0;  transform: translate3d(-2000px, 0, 0);}}
.fadeOutLeftBig {animation-name: fadeOutLeftBig}

@keyframes bounceInDown{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}
.bounceInDown{animation-name:bounceInDown}

@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}
.fadeIn{animation-name: fadeIn;}

#navContent, .splash, .failure, .final, .gameplay, .block-free-game {height:414px; width: 690px}
#navContent{
	font-family: 'Lato', sans-serif;
	font-size:18px;
	position:relative;
	overflow:hidden;
	margin:30px auto 0 auto;
}

.splash{
	background:url('img/splash.png');
	overflow: auto;
}
.splash > p{	
    position: absolute;
    width: 160px;
    left: 6%;
    bottom: 2%;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
}
.splash-btn{
	width: 80px;
    position: absolute;
    z-index: 10;
    bottom: 46px;
    right: 55px;
}
[class*='-btn'] span{
	color: #dee680;
	cursor: pointer;
}
[class*='-btn'] span:hover{
	color: #d3a7e5;
	transition: .5s ease;
}
#start:hover{
	box-shadow: inset 0px -30px 25px -25px rgba(73, 184, 50,0.7);
	transition: .5s ease;
}
#start{
	height:35px;
	width:130px;
	color: #fff;
	line-height: 35px;
	font-weight: bold;
    font-size: 26px;
	background-color: #eed36f;
    border: 3px solid #f3cb13;
	cursor:pointer;
	border-radius: 7px;
	position: absolute;
	bottom: 9%;	left: 47%;}

.splash-panel{
	display:none;
	background-color: #FFF;
	border: 5px solid #7f5301;
	padding:12px;
	box-shadow: 10px 10px 22px 0px rgba(0,0,0,0.75);
	position: absolute;
	z-index: 12;
	left: 90px;
	bottom: 110px;
	width:420px;  
	height:225px;
	text-align: left;
	line-height: 28px;
}
.splash-panel span{font-size: 30px; display: block; font-weight: bold; padding-bottom: 15px}
.splash-panel em{
	background-color: #ffe8a7;
    padding: 1px 5px;
    font-style: normal;
    font-size: 12px;
    border: 1px solid #ebdd9a;
    color: #8f6924;
}
#lesson-panel em, #didyouknow-panel em{font-size: 18px}
.gameplay{
	background: url('img/gameplay.png');
 } 
.progression{
 	width: 136px;
 	height:24px;
	display:block;
	background-color:#fff;
	border-radius: 10px;
	position: absolute;
	color:#356600;
	font-weight: bold;
	font-size: 14px;
	line-height: 26px;
 }
 .score, .hearts{left: 30px}
 .score{bottom: 65px}
 .hearts {bottom: 30px}

#glass{width: 65px;
    position: absolute;
    top: 33%;
    left: 62%}
.question-container {
	font-size: 38px;
	font-variant: all-small-caps;
	position: absolute;
	width: 350px;
	left: 32%;
	top: 78.9%;
	color: #f0e612;
	cursor: pointer;
 }

 /*Addendum*/
.syllable-span {
    padding: 0.5rem 0.75rem;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.syllable-span:hover {
    background-color: #77903d;
    border-color: #d5fc7d;
    transform: translateY(-2px);
}
.syllable-span.selected-correct {
    background-color: #dcfce7;
    border-color: #4ade80;
    color: #166534;
    cursor: default;
    transform: scale(1.05);
}
.syllable-span.selected-incorrect {
    background-color: #ffe4e6; 
    border-color: #fda4af;
    color: #881337; 
    cursor: default;
    animation: shake 0.5s;
}
.syllable-span.actual-correct {
    background-color: #dcfce7 !important;
    border-color: #4ade80 !important;
    color: #166534 !important;
    cursor: default;
}
.syllable-span.disabled {
    cursor: default;
}
 .syllable-span.disabled:hover {
    background-color: transparent;
    border-color: transparent;
    transform: none;
}
/*Fin addendum*/

.good-feedback, .bad-feedback {
	width: 340px;
	height: 102px;
	font-family: "Cherry Bomb One", system-ui;
	font-size: 50px;
	color: white;
	text-shadow: 1px 1px 8px rgba(150, 150, 150, 1);
	position: absolute;
	top: 130px;
	left: 111px;
	display: none;
}
.failure{
	background:url('img/failure.png');
	overflow: auto;
}
.failure p{
	font-size: 31px;
	font-family: "Cherry Bomb One", system-ui;
	color: white;
	text-shadow: 1px 1px 8px rgba(150, 150, 150, 1);
	width: 450px;
	position: absolute;
	top: 22%;
	left: 19%;
}
.failure b{
	color: #4ade80;
	font-size:32px;
	position: absolute;
	top: 65%;
	left: 43%;
}
.failure-btn{
	position: absolute;
	bottom: 20px;
	right: 39%;
}