/* -------------------------------------------------------- */
body {
	padding: 1% 0%;
	background-color: rgb(170, 187, 204, 0.05);
	color: rgb(52, 58, 64);
	overflow: hidden;
}
#outer_container {
	background-color: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
	max-width: 1280px;
	position: relative;
}

/* -------------- Header ------------------------------------------ */
header {
	background-color: rgb(38, 121, 201);
	color: #ffffff;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
#controls a {
  display: inline-block;
}
#controls a i {
	color: #ffffff;
}

/* -------------- Main ------------------------------------------ */
#main {
  max-width: 1280px;
}
#canvas_container {
  	height: auto;
	padding: 0%;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
/*
#inner_container {
	height: 55%;
	overflow-y: auto;
}
*/
#inner_container img {
	box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	max-width: 100%;
	height: auto;
	margin: 20px 0px;
}
ol li {
	margin-bottom: 0.8rem;
}

/* -------------------------------------------------------- */
.btn-move-down:active {
  transform: translateY(4px);
	transition: 0.3s;
}
.text-just {
	text-align: justify;
}

/* -------------- Scroll Bars ------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: rgb(109, 117, 125, 0.7);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(109, 117, 125, 0.8);
}
::-webkit-scrollbar-thumb:active {
  background-color: rgb(109, 117, 125);
}


/* */
body {
	box-sizing: border-box;
}
@font-face {
	font-family: "Literata";
	src: url("../../lib/css/fonts/Literata-VariableFont.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("../../lib/css/fonts/SourceSans3-VariableFont.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal italic;
	font-display: swap;
}


.font-display {
	font-family: 'Literata', Georgia, serif;
}

.font-body {
	font-family: 'Source Sans 3', system-ui, sans-serif;
}

.word-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.word-card:hover:not(.matched):not(.selected):not(.wrong) {
	transform: translateY(-2px);
}

.word-card.selected {
	transform: scale(1.02);
	box-shadow: 0 0 0 3px currentColor;
}

.word-card.matched {
	opacity: 0.6;
	pointer-events: none;
}

.word-card.wrong {
	pointer-events: none;
	opacity: 0.4;
}

.word-card.correct-flash {
	animation: correctPulse 0.6s ease-out;
}

.word-card.wrong-flash {
	animation: wrongShake 0.5s ease-out;
}

@keyframes correctPulse {
	0% {
		transform: scale(1); }
	50% {
		transform: scale(1.05); }
	100% {
		transform: scale(1); }
}

@keyframes wrongShake {
	0%, 100% {
		transform: translateX(0); }
	20%, 60% {
		transform: translateX(-5px); }
	40%, 80% {
		transform: translateX(5px); }
}

.language-tag {
	font-size: 0.65rem !important;
	letter-spacing: 0.05em !important;
}

.note-card {
	animation: fadeSlideIn 0.4s ease-out;
}

@keyframes fadeSlideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.progress-fill {
	transition: width 0.5s ease-out;
}
.celebration {
	animation: celebrationBounce 0.8s ease-out;
}
@keyframes celebrationBounce {
	0% {
		transform: scale(0.8); opacity: 0; }
	50% {
		transform: scale(1.1); }
	100% {
		transform: scale(1); opacity: 1; }
}

.note-card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}