.pim-pam-pet-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
}

.ppp-question-card {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-width) * 3.5);
	flex-direction: row;
	color: #000000;
	height: calc(var(--percentage-height) * 15);
	box-shadow: 0px 0px calc(var(--percentage-width) * 1) 0px rgba(0, 0, 0, 0.37);
	z-index: 1;
	width: 100%;
	background-color: white;
}

.ppp-game-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: calc(var(--percentage-height) * 85);
	margin-top: calc(var(--percentage-height) * 3);
}

.ppp-left-col{
	position: absolute;
	left: calc(var(--percentage-width) * 10);
	height: calc(var(--percentage-height) * 80);
}

.ppp-logo {
	left: calc(var(--percentage-width) * 8);
	width: calc(var(--percentage-width) * 16);
}

.pim-pam-pet-container .button-container {
	display: flex;
	flex-direction: column;
	right: calc(var(--percentage-width) * 76);
}

.pim-pam-pet-container .button-container .button {
	width: calc(var(--percentage-width) * 11);
	font-size: calc(var(--percentage-width) * 2);
	margin-left: calc(var(--percentage-width) * 1);
	margin-right: calc(var(--percentage-width) * 1);
	background-color: var(--illi-green);
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(var(--percentage-height) * 5);
	flex-shrink: 0;
}

.pim-pam-pet-container .button-container .button p{
	height: 1.25em;
}

.pim-pam-pet-container .button-container .button i {
	display: flex;
	margin-right: calc(var(--percentage-width) * 1);
}

.pim-pam-pet-container .button-container .button:focus {
	outline: none;
}

.pim-pam-pet-container .button-container .button:focus::before {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-green);
	content: "";
	position: absolute;
	width: calc(var(--percentage-width) * 14);
	height: calc(calc(var(--percentage-height) * 5) + calc(var(--percentage-width) * 3));
	background: var(--illi-light-green);
	border-radius: calc(var(--percentage-width) * 1);
	z-index: 1;
}

.pim-pam-pet-container .button.locked {
	background-color: var(--illi-gray);
}

.pim-pam-pet-container .button.locked:focus::before {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-lighter-gray);
}

.pim-pam-pet-container .button.regenerate {
	background-color: var(--illi-yellow);
}

.pim-pam-pet-container .button.regenerate:focus::before {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-yellow);
	background: var(--illi-light-yellow);
}

.pim-pam-pet-container .button.pimpampet-pause{
  background-color: var(--illi-black);
}

.pim-pam-pet-container .button.pimpampet-pause:focus::before{
  border: calc(var(--percentage-width) * 0.3) solid var(--illi-gray);
  /*background: var(--illi-gray);*/
}

/*-- Letter rotator --*/
.ppp-rotator {
	margin-right: calc(var(--percentage-width) * 37);
}

.ppp-rotator-letters,
.ppp-rotator-deksel {
	position: absolute;
	width: calc(var(--percentage-width) * 35);
	margin-top: calc(var(--percentage-width) * 4.5);
}

/*.ppp-rotator-deksel */
.animation {
	/*animation: rotate-animation 1.5s cubic-bezier(.25,.46,.45,.94) infinite;*/

	animation-name: rotate-animation;
	animation-duration: 3s;

	animation-timing-function: cubic-bezier(.25, .46, .45, .94);
	animation-fill-mode: forwards;
	/*animation-iteration-count: infinite;*/
}

@keyframes rotate-animation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360);
	}
}

.ppp-right-col{
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	right: calc(var(--percentage-width) * 5);
	height: calc(var(--percentage-height) * 70);
}


.letter-text {
	/* position: absolute; */
	color: black;
	font-size: calc(var(--percentage-width) * 4);
	/* margin: calc(var(--percentage-height) * 8) calc(var(--percentage-width) * 1); */
	right: calc(var(--percentage-width) * 6);
}

.letter-box {
	width: calc(var(--percentage-width) * 16);
	display: flex;
	justify-content: center;
	height: calc(var(--percentage-width) * 20);
	border-radius: calc(var(--percentage-width) * 5);
	background-color: #FFFFFF;
	color: black;
	right: calc(var(--percentage-width) * 10);
	/* position: absolute; */
	/* margin-top: calc(var(--percentage-width) * 10); */
	border: calc(var(--percentage-width) * 0.1) solid black
}

.ppp-letter {
	display: none;
	font-size: calc(var(--percentage-width) * 15);
	justify-content: center;
	align-items: center;
	/* position: relative; */

}

.fade-in {
	opacity: 0;
	transform: translateY(-50px);
	animation: fadeIn 0.5s cubic-bezier(.45, .05, .55, .95) forwards;
	display: inline-block;
}

@keyframes fadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-out {
	opacity: 1;
	transform: translateY(50px);
	animation: fadeOut 0.5s cubic-bezier(.45, .05, .55, .95) forwards;
	display: inline-block;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		transform: translateY(0);
	}
}

.pim-pam-pet-container .letter-slot {
	width: calc(var(--percentage-width) * 20);
	display: flex;
	justify-content: center;
	height: calc(var(--percentage-width) * 20);
	overflow: hidden;
	border-radius: calc(var(--percentage-width) * 5);
	margin: calc(var(--percentage-width) * 3);
	background-color: #006dcc;
	color: white;
	position: absolute;

}

.pim-pam-pet-container .letter-slot img {
	display: none;
	width: 100%;
	animation: spin 0.4s linear infinite;
	object-fit: cover;
}

@keyframes spin {
	0% {
		object-position: 100% 0%;
	}

	100% {
		transform: 100% 100%;
	}
}