:root {
    --current-card-color: #5faf00; /* Initial color */
}

.card {
	width: calc(100vw - 2em); /* Full width with margin */
	height: calc(100vh - 2em); /* Full height with margin */
	perspective: 1000px;
	z-index: 10;
}

.content {
	width: 100%;
	height: 100%;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	transition: transform 1s;
	transform-style: preserve-3d;
}

.card.flipped .content {
	transform: rotateY(180deg);
	transition: transform 0.5s;
}

.front, .back {
	position: absolute;
	border-radius: 5px;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 100%;
}
  
.front {
	background: #585858;
	color: var(--current-card-color);
	font-size: 8vw;
	font-weight: bold;
}
  
.back {
	background: var(--current-card-color);
	color: #585858;
	transform: rotateY(180deg);
	font-size: 6vw;
}

.buffer {
	flex: 1;
	display: flex;
}

.front-card-text, .back-card-text {
	flex: 2;
	display: flex;
	justify-content: center; 
	align-items: center; 
}

.front-pills, .back-pills {
	flex: 1;
	display: flex;
	justify-content: right; 
	align-items: flex-end;
	width: 100%;
	margin-bottom: 0.04em;
}

.pill {
    display: inline-block;
    margin: 10px;

	backface-visibility: hidden;
	padding: 1vw;
	border-radius: 1.5vw;
    font-size: 3vw;
    margin-bottom: 2vw;
    margin-right: 2.5vw;
	position: relative;
}

.front-pills > .pill {
	background: var(--current-card-color); 
	color: #585858;
}

.back-pills > .pill {
	background: #585858;
	color: var(--current-card-color);
}