.fade-out {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.fade-in {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
}

.page-title {
	font-size:calc(0.33vw + 1.5rem);
	text-align: center;
	margin-top: 0;
}

.subtitle {
	font-size:calc(0.33vw + 1.2rem);
	text-align: center;
	margin: 0 auto 20px auto;
}

li {
	margin-bottom: 35px;
}

.hidden {
	display:none;
}

.displayed {
	display:block;
}

.display-flex {
	display:flex;
}


/* Input fields */
.form-container {
	max-width: 400px;
    justify-content: space-between; /* Distribute space between pairs and button */
    align-items: flex-end; /* Align items to the bottom in the container */
    width: auto; /* Adjust the width as needed */
	margin: 10px auto 10px auto;
	padding: 20px 15px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	line-height: 1.5rem;
}

.extra-margin-top {
	margin-top: 30px;
}

.label-select-pair {
    display: flex;
    flex-direction: column; /* Stack label and select vertically within the pair */
    align-items: flex-start; /* Align items to the left */
    width: 30%; /* Each pair occupies 45% of the container's width, leaving a small gap */
    margin: 0 10px; /* Optional spacing between pairs */
}

label {
	font-size: 1em;
	font-weight: bold;
	padding-bottom: 5px;
}
		
select {
	z-index: 2;
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-right: 30px;
	cursor: pointer;
}


.my-button {
	z-index: 2;
	margin: auto;
    padding: 10px 20px;
    font-size: 1rem;
	font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 20px;
    color: white;
    transition: background-color 0.3s ease-in-out;
}

.green-button {
	background-color: #16d702;
}

.green-button:hover {
	background-color: #06b700;
}

.red-button {
	background-color: #eb0000;
}

.red-button:hover {
	background-color: #cb0000;
}



/* Progress Bar */
.progress-container {
	width: 100%;
	max-width: 400px;
	height: 1rem;
	margin: 20px auto 0 auto;
	border-radius: 0.6rem;
	background: #ffffff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.progress-container .progress {
  height: 100%;
  width: 0;
  border-radius: 0.6rem;
  background: #16d702;
  transition: width 0.3s ease;
}



/* Card Styles */
.card {
	width: 80%;
	max-width: 350px;
    height: 13rem;
    perspective: 1000px;
    margin: 30px auto 60px auto;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}

.front,
.back {
	z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
	flex-direction: column;
	cursor: pointer;
    justify-content: center;
	text-align: center;
    align-items: center;
    backface-visibility: hidden;
	font-weight: bold;
	border: 20px solid #fff; 
	border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	transition: transform 0.6s ease-in-out;
	padding: 0 20px;
	left: -40px;
}

.front {
    background-color: #333;
	color: #0cf;
	font-size: 2em;
    transform: rotateY(0deg);
}

.side1-text {
	margin-top: 3.5rem;	
}

.speaker {
	margin-top:auto;
	margin-bottom: 10px;
}

.speaker img {
	z-index: 3;
	width: 1em;
	height: 1em;
	padding: 0.1em;
}

.back {
    background-color: #e4e4e9;
	color: #000;
	font-size: 1.5em;
	line-height: 1.3em;
    transform: rotateY(180deg);
}

.card.flip .front,
.card.flip .back {
    transform: rotateY(-180deg);
}

.card.flip .back {
    transform: rotateY(0deg);
}

.is-success-container {
    width: 300px;
	margin: 0 auto;
}

.is-success-container p {
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
}

.is-success-buttons-container {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding-top: 10px;
}

.is-success-buttons-container label {
	font-size:1.3em;
	padding: 10px;
}


.is-success-button {
    padding: 10px 50px;
	font-size: 1.3em;
}


canvas {
	z-index: 0;
	position: absolute;
    display: block;
}