.mainboutondiv {
	position: absolute;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	height: 70vh;
	margin-right: 5vh;
	margin-top: 15vh;
}
.mainboutondiv span {
	margin: auto;
}

.requirements {
	width: 2vh;
	height: 2vh;
	font-size: 2vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(24, 24, 24);
	color: white;
	border-radius: 50%;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 2vh;
	text-align: center;
	padding: 0.3vh;
}
.requirementsflex {
	display: flex;
	width: 100%;
}

/* =========== COLOR =========== */
.bathroom_color {
	background-color: #D0CECE;
	border-color: #2E6CA4;
	outline-color: #2E6CA4;
}
.bathroom_color_image {
	filter: brightness(0) saturate(100%) invert(36%) sepia(38%) saturate(786%) hue-rotate(166deg) brightness(101%) contrast(98%); /* blue */
}

.boutondiv_topright_charisma {
	margin-right: 0;
	margin-left: auto;
  
  
	display: flex;
	align-items: center;
	position: relative;
  }


  #mainButton_topright_gym {
	background-color: #d0cece;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #2e6ca4;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
  }
  #mainButton_topright_gym:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
  }
  
  #mainButton_topright_gym span {
	display: none;
  }
  #mainButton_topright_gym:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: #2e6ca4;
  }
  
  #mainButton_topright_gym img {
	margin-right: 0;
	padding: 1.5vh;
	z-index: 1;
	height: 95%;
	margin-left: auto;
	filter: invert(34%) sepia(90%) saturate(396%) hue-rotate(167deg) brightness(92%) contrast(94%);
  }
  
  #mainButton_topright_gym > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
  
	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;
  
	background-color: rgb(24, 24, 24);
	color: white;
  
	transition: opacity 0.1s ease;
  }
  #mainButton_topright_gym:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
  }


  #mainButton_topright_prison {
    background-color: #d0cece;
    border: none;
    width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
    cursor: pointer;
    outline: solid 0.67vh #2e6ca4;
    display: flex;
    flex-direction: row-reverse;
    z-index: 3;
    box-sizing: border-box;
    transition: all 0.3s ease;
    overflow: hidden;
	}
  #mainButton_topright_prison:hover {
    background-color: gray;
    width: 30.67vh;
    border-radius: 10vh;
    transition: all 0.3s ease;
  }
  
  #mainButton_topright_prison span {
	display: none;
  }
  #mainButton_topright_prison:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: #2e6ca4;
  }
  
  #mainButton_topright_prison img {
	margin-right: 0;
	padding: 1.5vh;
	z-index: 1;
	height: 95%;
	margin-left: auto;
	filter: invert(34%) sepia(90%) saturate(396%) hue-rotate(167deg) brightness(92%) contrast(94%);
  }
  
  #mainButton_topright_prison > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
  
	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;
  
	background-color: rgb(24, 24, 24);
	color: white;
  
	transition: opacity 0.1s ease;
  }
  #mainButton_topright_prison:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
  }

.cherie_color {
	background-color: #bf0000;
	border-color: #ede8ed;
	outline-color: #ede8ed;
}

.elfie_color {
	background-color: #7030a0;
	border-color: #deb04c;
	outline-color: #deb04c;
}
.elfie_color_image {
	filter: brightness(0) saturate(100%) invert(71%) sepia(58%) saturate(421%) hue-rotate(1deg) brightness(91%) contrast(93%);
}

.lana_color {
	background-color: #012060;
	border-color: #be3ae8;
	outline-color: #be3ae8;
}
.lana_color_image {
	filter: brightness(0) saturate(100%) invert(51%) sepia(77%) saturate(6344%) hue-rotate(268deg) brightness(92%) contrast(97%);
}

.livingroom_color {
	background-color: #333f50;
	border-color: #4472c4;
	outline-color: #4472c4;
}
.livingroom_color_image {
	filter: brightness(0) saturate(100%) invert(44%) sepia(98%) saturate(358%) hue-rotate(179deg) brightness(82%) contrast(96%);
}

.gabbieexterior_color {
	background-color: #f6c5a4;
	border-color: #452121;
	outline-color: #452121;
}
.gabbieexterior_color_image {
	filter: brightness(0) saturate(100%) invert(11%) sepia(24%) saturate(1547%) hue-rotate(314deg) brightness(104%) contrast(88%);
}

.kitchen_color {
	background-color: #5e3e3e;
	border-color: #f2a36e;
	outline-color: #f2a36e;
}
.kitchen_color_image {
	filter: brightness(0) saturate(100%) invert(92%) sepia(7%) saturate(6012%) hue-rotate(309deg) brightness(97%) contrast(96%);
}

/* =========== top right slider =========== */
/* MC ROOM */
.boutondiv_topright {
	margin-right: 0;
	margin-left: auto;
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_topright {
	background-color: #203864;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #d7a103;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright span {
	display: none;
}
#mainButton_topright:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}

#mainButton_topright img {
	margin-right: 0;
	margin-left: auto;
	filter: brightness(0) saturate(100%) invert(78%) sepia(48%) saturate(4047%) hue-rotate(5deg) brightness(91%) contrast(98%);
	border-radius: 50%;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

/* =========== bottom left slider =========== */
.boutondiv_bottomleft {
	position: relative;
	display: flex;
	align-items: center;
	position: relative;
}

#sliderButton_bottomleft {
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline-style: solid;
	outline-width: 0.67vh;
	display: flex;
	flex-direction: row;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#sliderButton_bottomleft:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#sliderButton_bottomleft span {
	display: none;
	margin: auto;
}
#sliderButton_bottomleft:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}

#sliderButton_bottomleft img {
	margin-right: auto;
	margin-left: 0;
	border-radius: 50%;
	padding: 1.5vh;
	z-index: 1;
}

#sliderButton_bottomleft > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#sliderButton_bottomleft:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

.sliderGirlicon {
	position: absolute;
	border-radius: 50%;
	width: 6vh;

	aspect-ratio: 1;
	top: -2vh;
	left: -2vh;
	z-index: 4;
}
.sliderGirlicon > img {
	height: 100%;
	border-radius: 50%;
	border-style: solid;
	border-width: 0.67vh;
}

.sliderGirlicon2 {
	position: absolute;
	border-radius: 50%;
	width: 6vh;

	aspect-ratio: 1;
	top: -1.3vh;
	z-index: 4;
}
.sliderGirlicon2 > img {
	height: 100%;
	border-radius: 50%;
	border-style: solid;
	border-width: 0.67vh;
}

.boutondiv_right {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_right {
	background-color: #203864;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: none;
	background-size: cover;
	z-index: 3;
	outline: solid 0.67vh #d7a103;
	margin-left: auto;
	margin-right: 0;
	display: flex;
	transition: all 0.3s ease;
}
#mainButton_right:hover {
	background-color: gray;
	transition: all 0.3s ease;
}

#mainButton_right img {
	margin-right: 0;
	margin-left: auto;
	max-width: 13.33vh;
	border-radius: 50%;
	padding: 1.5vh;
	filter: invert(78%) sepia(48%) saturate(4047%) hue-rotate(5deg) brightness(91%) contrast(98%);
	z-index: 1;
}

.placeholder_right {
	width: 2.67vh;
	height: 13.33vh;
	visibility: hidden;
}

.small-buttons_right {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_right {
	outline: solid 0.67vh #d7a103;
	background-color: #203864;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_right:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_right:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_right img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_right:nth-child(1) {
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_right:nth-child(2) {
	margin-bottom: 2.67vh;
	transform-origin: right;
}
.small-button_right:nth-child(3) {
	transform-origin: top right;
}

/* Keyframes for pop-in animation */
@keyframes popIn {
	0% {
		opacity: 0;
		transform: translateX(6.67vh) scale(0);
	} to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}
/* Keyframes for pop-out animation */
@keyframes popOut {
	0% {
		opacity: 1;
		transform: translateX(0) scale(1);
	} to {
		opacity: 0;
		transform: translateX(6.67vh) scale(0);
	}
}

/* Define the 'in' and 'out' states using classes */
.animate-in {
	animation: popIn 0.3s forwards;
}

.animate-out {
	animation: popOut 0.3s forwards;
}

.small-button_right span {
	display: none;
	color: #d7a103;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_right:hover span {
	display: block;
}

#mainButton_topright:hover ~ .boutondiv_right .small-buttons_right,
#mainButton_bottomright:hover ~ .boutondiv_right .small-buttons_right {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.boutondiv_bottomright {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_bottomright {
	background-color: #203864;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #d7a103;
	z-index: 3;
	pointer-events: none;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}

.textNA {
	text-align: center;
	margin: auto;
	padding: 1.5vh;
	color: #deb23f;
}



/* CHERIE ROOM */
.boutondiv_topright_cherie {
	margin-right: 0;
	margin-left: auto;
	display: flex;
	align-items: center;
	position: relative;
}
.bouton_bonusScenes {
    position: relative; /* Required for positioning */
    border-radius: 10vh;
    overflow: hidden; /* Ensures the spinning effect stays within the button */
    z-index: 1; /* Make sure the button is on top */
	padding: 0.67vh;
	transition: 0.3s ease;
	left: 0.67vh;
}

.bouton_bonusScenes::before {
    content: '';
    position: absolute;
    top: -50%; /* Position it above */
    left: -50%; /* Center it */
    width: 200%; /* Make it large enough to cover the button */
    height: 220%; /* Make it large enough to cover the button */
    background: conic-gradient(
        red, orange, yellow, green, blue, indigo, violet, red /* Rainbow gradient */
    );
    animation: spin 2s linear infinite; /* Slower spinning animation when not hovering */
    z-index: -1; /* Place behind the button */
}

.bouton_bonusScenes:hover::before {
    animation: spin 1s linear infinite; /* Faster spinning on hover */
}

.bouton_bonusScenes #mainButton_topright_cherie {
	outline: 0px;
}

.bouton_bonusScenes #mainButton_topright_lana {
	outline: 0px;
}

.bouton_bonusScenes #mainButton_topright_elfie {
	outline: 0px;
}

.bouton_bonusScenes #mainButton_topright_gabbie {
	outline: 0px;
}

.bouton_bonusScenes #mainButton_topright_angela {
	outline: 0px;
}

.bouton_bonusScenes #mainButton_topright_mia {
	outline: 0px;
}

.bouton_bonusScenes #mainButton_topright_chanel {
	outline: 0px;
}



@keyframes spin {
    from {
        transform: rotate(0deg); /* Start position */
    }
    to {
        transform: rotate(360deg); /* End position */
    }
}

.bouton_bonusScenes:hover {
    /* Optional: Add a hover effect for the button itself */
	transition: 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Optional glow on hover */
}

#bonusImg {
	margin-bottom: 0.5vh !important;
}

#mainButton_topright_cherie {
	background-color: #bf0000;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #ede8ed;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright_cherie:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright_cherie span {
	display: none;
}
#mainButton_topright_cherie:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: white;
}

#mainButton_topright_cherie img {
	margin-right: 0;
	margin-left: auto;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright_cherie > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright_cherie:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

.boutondiv_right_cherie {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_right_cherie {
	background-color: #bf0000;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: none;
	background-size: cover;
	z-index: 3;
	outline: solid 0.67vh #ede8ed;
	margin-left: auto;
	margin-right: 0;
	display: flex;
	transition: all 0.3s ease;
}
#mainButton_right_cherie:hover {
	background-color: gray;
	transition: all 0.3s ease;
}

#mainButton_right_cherie img {
	margin-right: 0;
	margin-left: auto;
	max-width: 13.33vh;
	border-radius: 50%;
	padding: 1.5vh;
	filter: invert(97%) sepia(9%) saturate(182%) hue-rotate(237deg) brightness(92%) contrast(102%);
	z-index: 1;
}

.placeholder_right_cherie {
	width: 2.67vh;
	height: 13.33vh;
	visibility: hidden;
}

.small-buttons_right_cherie {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_right_cherie {
	outline: solid 0.67vh #ede8ed;
	background-color: #bf0000;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_right_cherie:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_right_cherie:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_right_cherie img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_right_cherie:nth-child(1) {
	outline: solid 0.67vh #ede8ed;
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_right_cherie:nth-child(2) {
	outline: solid 0.67vh #ede8ed;
	transform-origin: top right;
}

.small-button_right_cherie span {
	display: none;
	color: #ede8ed;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_right_cherie:hover span {
	display: block;
}

#mainButton_topright_cherie:hover ~ .boutondiv_right_cherie .small-buttons_right_cherie,
#mainButton_bottomright_cherie:hover ~ .boutondiv_right_cherie .small-buttons_right_cherie {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.boutondiv_bottomright_cherie {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_bottomright_cherie {
	background-color: #bf0000;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	z-index: 3;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}

.textNAcherie {
	text-align: center;
	margin: auto;
	padding: 1.5vh;
	color: #ede8ed;
}



/* GABBIE ROOM */
.boutondiv_topright_gabbie {
	margin-right: 0;
	margin-left: auto;


	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_topright_gabbie {
	background-color: #6d322c;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #deb23f;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright_gabbie:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright_gabbie span {
	display: none;
}
#mainButton_topright_gabbie:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: #deb23f;
}

#mainButton_topright_gabbie img {
	margin-right: 0;
	margin-left: auto;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright_gabbie > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright_gabbie:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

.small-buttons_topright_gabbie {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_topright_gabbie {
	outline: solid 0.67vh #deb23f;
	background-color: #6d322c;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_topright_gabbie:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_topright_gabbie:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_topright_gabbie img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_topright_gabbie:nth-child(1) {
	outline: solid 0.67vh #deb23f;
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_topright_gabbie:nth-child(2) {
	outline: solid 0.67vh #deb23f;
	transform-origin: top right;
}

.small-button_topright_gabbie span {
	display: none;
	color: #deb23f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_topright_gabbie:hover span {
	display: block;
}

.boutondiv_right_gabbie {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_right_gabbie {
	background-color: #6d322c;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: none;
	background-size: cover;
	z-index: 3;
	outline: solid 0.67vh #deb23f;
	margin-left: auto;
	margin-right: 0;
	display: flex;
	transition: all 0.3s ease;
}
#mainButton_right_gabbie:hover {
	background-color: gray;
	transition: all 0.3s ease;
}

#mainButton_right_gabbie img {
	margin-right: 0;
	margin-left: auto;
	max-width: 13.33vh;
	border-radius: 50%;
	padding: 1.5vh;
	filter: invert(81%) sepia(57%) saturate(652%) hue-rotate(338deg) brightness(97%) contrast(79%);
	z-index: 1;
}

.placeholder_right_gabbie {
	width: 2.67vh;
	height: 13.33vh;
	visibility: hidden;
}

.small-buttons_right_gabbie {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_right_gabbie {
	outline: solid 0.67vh #deb23f;
	background-color: #6d322c;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_right_gabbie:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_right_gabbie:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_right_gabbie img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_right_gabbie:nth-child(1) {
	outline: solid 0.67vh #deb23f;
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_right_gabbie:nth-child(2) {
	outline: solid 0.67vh #deb23f;
	transform-origin: top right;
}

.small-button_right_gabbie span {
	display: none;
	color: #deb23f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_right_gabbie:hover span {
	display: block;
}

#mainButton_topright_gabbie:hover ~ .boutondiv_right_gabbie .small-buttons_right_gabbie,
#mainButton_bottomright_gabbie:hover ~ .boutondiv_right_gabbie .small-buttons_right_gabbie {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.boutondiv_bottomright_gabbie {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_bottomright_gabbie {
	background-color: #6d322c;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	z-index: 3;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}



/* ELFIE ROOM */
.boutondiv_topright_elfie {
	margin-right: 0;
	margin-left: auto;


	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_topright_elfie {
	background-color: #7030a0;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #deb04c;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright_elfie:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright_elfie span {
	display: none;
}
#mainButton_topright_elfie:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: #deb04c;
}

#mainButton_topright_elfie img {
	margin-right: 0;
	margin-left: auto;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright_elfie > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright_elfie:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

.boutondiv_right_elfie {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_right_elfie {
	background-color: #7030a0;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: none;
	background-size: cover;
	z-index: 3;
	outline: solid 0.67vh #deb04c;
	margin-left: auto;
	margin-right: 0;
	display: flex;
	transition: all 0.3s ease;
}
#mainButton_right_elfie:hover {
	background-color: gray;
	transition: all 0.3s ease;
}

#mainButton_right_elfie img {
	margin-right: 0;
	margin-left: auto;
	max-width: 13.33vh;
	border-radius: 50%;
	padding: 1.5vh;
	filter: invert(71%) sepia(58%) saturate(421%) hue-rotate(1deg) brightness(91%) contrast(93%);
	z-index: 1;
}

.placeholder_right_elfie {
	width: 2.67vh;
	height: 13.33vh;
	visibility: hidden;
}

.small-buttons_right_elfie {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_right_elfie {
	outline: solid 0.67vh #deb04c;
	background-color: #7030a0;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_right_elfie:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_right_elfie:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_right_elfie img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_right_elfie:nth-child(1) {
	outline: solid 0.67vh #deb04c;
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_right_elfie:nth-child(2) {
	outline: solid 0.67vh #deb04c;
	transform-origin: top right;
}

.small-button_right_elfie span {
	display: none;
	color: #deb04c;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_right_elfie:hover span {
	display: block;
}

#mainButton_topright_elfie:hover ~ .boutondiv_right_elfie .small-buttons_right_elfie,
#mainButton_bottomright_elfie:hover ~ .boutondiv_right_elfie .small-buttons_right_elfie {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.boutondiv_bottomright_elfie {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_bottomright_elfie {
	background-color: #7030a0;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	z-index: 3;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}

.textNAelfie {
	text-align: center;
	margin: auto;
	padding: 1.5vh;
	color: #deb04c;
}



/* LANA ROOM */
.boutondiv_topright_lana {
	margin-right: 0;
	margin-left: auto;


	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_topright_lana {
	background-color: #012060;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #be3ae8;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright_lana:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright_lana span {
	display: none;
}
#mainButton_topright_lana:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: #be3ae8;
}

#mainButton_topright_lana img {
	margin-right: 0;
	margin-left: auto;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright_lana > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright_lana:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

.boutondiv_right_lana {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_right_lana {
	background-color: #012060;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: none;
	background-size: cover;
	z-index: 3;
	outline: solid 0.67vh #be3ae8;
	margin-left: auto;
	margin-right: 0;
	display: flex;
	transition: all 0.3s ease;
}
#mainButton_right_lana:hover {
	background-color: gray;
	transition: all 0.3s ease;
}

#mainButton_right_lana img {
	margin-right: 0;
	margin-left: auto;
	max-width: 13.33vh;
	border-radius: 50%;
	padding: 1.5vh;
	filter: invert(51%) sepia(77%) saturate(6344%) hue-rotate(268deg) brightness(92%) contrast(97%);
	z-index: 1;
}

.placeholder_right_lana {
	width: 2.67vh;
	height: 13.33vh;
	visibility: hidden;
}

.small-buttons_right_lana {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_right_lana {
	outline: solid 0.67vh #be3ae8;
	background-color: #012060;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_right_lana:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_right_lana:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_right_lana img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_right_lana:nth-child(1) {
	outline: solid 0.67vh #be3ae8;
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_right_lana:nth-child(2) {
	outline: solid 0.67vh #be3ae8;
	transform-origin: top right;
}

.small-button_right_lana span {
	display: none;
	color: #be3ae8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_right_lana:hover span {
	display: block;
}

#mainButton_topright_lana:hover ~ .boutondiv_right_lana .small-buttons_right_lana,
#mainButton_bottomright_lana:hover ~ .boutondiv_right_lana .small-buttons_right_lana {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.boutondiv_bottomright_lana {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_bottomright_lana {
	background-color: #012060;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	z-index: 3;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}

.textNAlana {
	text-align: center;
	margin: auto;
	padding: 1.5vh;
	color: #be3ae8;
}



/* ANGELA ROOM */
.boutondiv_topright_angela {
	margin-right: 0;
	margin-left: auto;
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_topright_angela {
	background-color: #f9d642;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #4e5d2c;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright_angela:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright_angela span {
	display: none;
}
#mainButton_topright_angela:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: #4e5d2c;
}

#mainButton_topright_angela img {
	margin-right: 0;
	margin-left: auto;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright_angela > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright_angela:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

#mainButton_bottomright_angela {
	background-color: #f9d642;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	z-index: 3;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}
/* Mia Room ----------------------*/

.boutondiv_topright_mia {
	margin-right: 0;
	margin-left: auto;
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_topright_mia {
	background-color: #5e3e3e;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #f2a36e;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright_mia:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright_mia span {
	display: none;
}
#mainButton_topright_mia:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: white;
}

#mainButton_topright_mia img {
	margin-right: 0;
	margin-left: auto;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright_mia > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright_mia:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

.boutondiv_right_mia {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_right_mia {
	background-color: #5e3e3e;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: none;
	background-size: cover;
	z-index: 3;
	outline: solid 0.67vh #f2a36e;
	margin-left: auto;
	margin-right: 0;
	display: flex;
	transition: all 0.3s ease;
}
#mainButton_right_mia:hover {
	background-color: gray;
	transition: all 0.3s ease;
}

#mainButton_right_mia img {
	margin-right: 0;
	margin-left: auto;
	max-width: 13.33vh;
	border-radius: 50%;
	padding: 1.5vh;
	filter: invert(97%) sepia(9%) saturate(182%) hue-rotate(237deg) brightness(92%) contrast(102%);
	z-index: 1;
}

.placeholder_right_mia {
	width: 2.67vh;
	height: 13.33vh;
	visibility: hidden;
}

.small-buttons_right_mia {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_right_mia {
	outline: solid 0.67vh #f2a36e;
	background-color: #5e3e3e;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_right_mia:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_right_mia:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_right_mia img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_right_mia:nth-child(1) {
	outline: solid 0.67vh #f2a36e;
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_right_mia:nth-child(2) {
	outline: solid 0.67vh #f2a36e;
	transform-origin: top right;
}

.small-button_right_mia span {
	display: none;
	color: #f2a36e;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_right_mia:hover span {
	display: block;
}

#mainButton_topright_mia:hover ~ .boutondiv_right_mia .small-buttons_right_mia,
#mainButton_bottomright_mia:hover ~ .boutondiv_right_mia .small-buttons_right_mia {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.boutondiv_bottomright_mia {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_bottomright_mia {
	background-color: #5e3e3e;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	z-index: 3;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}

.textNAmia {
	text-align: center;
	margin: auto;
	padding: 1.5vh;
	color: #f2a36e;
}






/* chanel Room ----------------------*/

.boutondiv_topright_chanel {
	margin-right: 0;
	margin-left: auto;
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_topright_chanel {
	background-color: #d0cece;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: solid 0.67vh #2e6ca4;
	display: flex;
	flex-direction: row-reverse;
	z-index: 3;
	box-sizing: border-box;
	transition: all 0.3s ease;
	overflow: hidden;
}
#mainButton_topright_chanel:hover {
	background-color: gray;
	width: 30.67vh;
	border-radius: 6.67vh;
	transition: all 0.3s ease;
}

#mainButton_topright_chanel span {
	display: none;
}
#mainButton_topright_chanel:hover span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
	color: white;
}

#mainButton_topright_chanel img {
	margin-right: 0;
	margin-left: auto;
	padding: 1.5vh;
	z-index: 1;
}

#mainButton_topright_chanel > .req {
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.2em;
	height: 1.5em;
	aspect-ratio: 1;
	border-radius: 50%;
	margin: auto 1em;

	background-color: rgb(24, 24, 24);
	color: white;

	transition: opacity 0.1s ease;
}
#mainButton_topright_chanel:hover > .req {
	transition: opacity 0.3s ease;
	opacity: 1;
}

.boutondiv_right_chanel {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_right_chanel {
	background-color: #d0cece;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	outline: none;
	background-size: cover;
	z-index: 3;
	outline: solid 0.67vh #2e6ca4;
	margin-left: auto;
	margin-right: 0;
	display: flex;
	transition: all 0.3s ease;
}
#mainButton_right_chanel:hover {
	background-color: gray;
	transition: all 0.3s ease;
}

#mainButton_right_chanel img {
	margin-right: 0;
	margin-left: auto;
	max-width: 13.33vh;
	border-radius: 50%;
	padding: 1.5vh;
	filter: invert(97%) sepia(9%) saturate(182%) hue-rotate(237deg) brightness(92%) contrast(102%);
	z-index: 1;
}

.placeholder_right_chanel {
	width: 2.67vh;
	height: 13.33vh;
	visibility: hidden;
}

.small-buttons_right_chanel {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 50%;
	right: 100%;
	transform: translateY(50%);
	opacity: 0;
	transition: opacity 0.3s linear;
}

.small-button_right_chanel {
	outline: solid 0.67vh #2e6ca4;
	background-color: #d0cece;
	border: none;
	width: 6.67vh;
	height: 6.67vh;
	cursor: pointer;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	border-radius: 3.33vh;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	flex-direction: row-reverse;
	overflow: hidden;
	z-index: 2;
	margin-left: auto;
	margin-right: 0;
}
.small-button_right_chanel:hover {
	width: 22vh;
	border-radius: 3.33vh;
	box-sizing: border-box;
	justify-content: flex-start;
	background-position: right center;
}
.small-button_right_chanel:hover::before {
	margin-right: 1.33vh;
	text-align: left;
	width: calc(100% - 8vh);
}

.small-button_right_chanel img {
	margin-right: 0;
	margin-left: auto;
	border-radius: 50%;
	max-width: 6.67vh;
	z-index: 1;
}

/* Individual background images for each small button */
.small-button_right_chanel:nth-child(1) {
	outline: solid 0.67vh #2e6ca4;
	margin-bottom: 2.67vh;
	transform-origin: bottom right;
}
.small-button_right_chanel:nth-child(2) {
	outline: solid 0.67vh #2e6ca4;
	transform-origin: top right;
}

.small-button_right_chanel span {
	display: none;
	color: #2e6ca4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 1.33vh;
}
.small-button_right_chanel:hover span {
	display: block;
}

#mainButton_topright_chanel:hover ~ .boutondiv_right_chanel .small-buttons_right_chanel,
#mainButton_bottomright_chanel:hover ~ .boutondiv_right_chanel .small-buttons_right_chanel {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.boutondiv_bottomright_chanel {
	display: flex;
	align-items: center;
	position: relative;
}

#mainButton_bottomright_chanel {
	background-color: #d0cece;
	border: none;
	width: 13.33vh;
	height: 13.33vh;
	border-radius: 6.67vh;
	cursor: pointer;
	z-index: 3;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: 0;
	transition: all 0.3s ease;
}

.textNAchanel {
	text-align: center;
	margin: auto;
	padding: 1.5vh;
	color: #2e6ca4;
}






/* GIRL SCENE IMAGE ------------ */
.GSIS_mainCont {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: row-reverse;
	margin-right: 29vh;
	margin-left: 53vh;
}
.GSIS_mainCont-GA {
	position: unset;
	margin-left: unset;
	margin-right: unset;
}

.GSIS_subCont {
	width: 35vh;
	height: 0;
	margin-top: 21vh;
	margin-left: -16vh;
	z-index: 10;
	position: relative;
}
.GSIS_subCont:nth-child(3) {
	margin-right: auto;
}
.GSIS_mainCont-GA > .GSIS_subCont {
	height: unset;
	margin-left: unset;
}

.GSIS_subCont > img {
	width: 100%;
}

.GSIS_subCont__visual-img {
	filter: drop-shadow(0 0 3vh black) drop-shadow(0 0 2vh black) drop-shadow(0 0 1vh black);
	transition: all 0.3s ease;

	pointer-events: none;
}

.GSIS_subCont__clip-img {
	position: absolute;
	top: 0;
	left: 0;

	cursor: pointer;
	opacity: 0;
}
/* .GSIS_subCont__clip-img[lust]:hover ~ .GSIS_subCont__visual-img {
	filter: drop-shadow(0 0 4vh purple) drop-shadow(0 0 2vh purple) drop-shadow(0 0 2vh purple);
} */
/* .GSIS_subCont__clip-img[trust]:hover ~ .GSIS_subCont__visual-img {
	filter: drop-shadow(0 0 4vh crimson) drop-shadow(0 0 2vh crimson) drop-shadow(0 0 2vh crimson);
} */
.GSIS_subCont__clip-img[main]:hover ~ .GSIS_subCont__visual-img {
	filter: drop-shadow(0 0 4vh var(--GSIS_color)) drop-shadow(0 0 2vh var(--GSIS_color)) drop-shadow(0 0 2vh var(--GSIS_color));
}
.GSIS_subCont__clip-img[transition]:hover ~ .GSIS_subCont__visual-img {
	filter: drop-shadow(0 0 4vh gold) drop-shadow(0 0 2vh gold) drop-shadow(0 0 2vh gold);
}

/* use CLIP_PATH_MAKER.html to make those */
.GSIS_subCont__clip-img{
	/* temporary vertial clip */
	clip-path: polygon(75% 0%, 75% 100%, 25% 100%, 25% 0%);
}
/* .GSIS_subCont__clip-img[cherie] {
	clip-path: polygon(50% 2.6%, 47.9% 2.8%, 51.6% 2.9%, 55.0% 3.6%, 59.4% 6.6%, 62.8% 9.6%, 64.2% 13.0%, 64.4% 16.2%, 66.7% 18.2%, 65.7% 20.0%, 68.7% 20.9%, 72.4% 23.3%, 75.1% 28.3%, 77.6% 31.1%, 79.4% 34.5%, 78.6% 36.1%, 76.7% 37.1%, 69.8% 38.7%, 63.9% 39.4%, 67.4% 41.3%, 71.2% 43.6%, 73.0% 45.8%, 73.7% 48.2%, 72.6% 50.6%, 70.1% 53.3%, 68.9% 56.4%, 68.7% 59.6%, 67.6% 62.7%, 67.3% 65.2%, 68.7% 67.9%, 70.3% 70.4%, 71.7% 72.7%, 71.5% 74.8%, 70.6% 77.4%, 69.2% 80.5%, 67.8% 83.2%, 67.8% 84.3%, 69.6% 85.9%, 70.6% 86.6%, 71.7% 87.0%, 71.7% 88.0%, 70.5% 93.5%, 70.5% 94.2%, 64.1% 95.1%, 60.0% 95.9%, 55.9% 95.8%, 51.1% 95.3%, 50% 95%);
}
.GSIS_subCont__clip-img[elfie] {
	clip-path: polygon(50% 2.8%, 48.6% 2.7%, 52.7% 2.7%, 55.7% 4.2%, 58.5% 7.3%, 59.8% 11.0%, 58.7% 14.2%, 58.4% 18.7%, 59.3% 19.6%, 61.7% 20.0%, 66.4% 21.2%, 68.0% 22.1%, 69.6% 25.8%, 69.6% 31.5%, 71.4% 35.5%, 73.5% 37.8%, 77.9% 50.1%, 79.2% 52.4%, 78.3% 54.8%, 75.3% 56.2%, 71.0% 55.3%, 70.3% 54.0%, 72.1% 52.3%, 71.4% 49.4%, 63.9% 61.6%, 63.7% 64.4%, 62.8% 66.0%, 63.3% 69.2%, 63.0% 70.8%, 60.1% 74.5%, 61.4% 77.5%, 62.6% 81.7%, 63.9% 86.2%, 63.7% 86.9%, 66.9% 89.3%, 67.3% 90.1%, 68.9% 95.6%, 59.6% 95.6%, 60.3% 91.9%, 57.8% 87.5%, 56.0% 87.1%, 54.3% 84.2%, 53.0% 85.5%, 53.6% 86.7%, 52.7% 87.7%, 52.3% 89.4%, 50% 90%);
}
.GSIS_subCont__clip-img[lana] {
	clip-path: polygon(50% 3.5%, 50.4% 3.2%, 56.8% 3.9%, 60.0% 5.8%, 63.7% 11.1%, 69.4% 17.5%, 69.8% 20.4%, 72.6% 21.5%, 71.9% 24.0%, 71.0% 26.1%, 67.8% 27.7%, 71.0% 29.8%, 64.4% 30.0%, 64.6% 31.3%, 64.2% 35.6%, 70.8% 38.3%, 76.7% 39.7%, 80.2% 42.0%, 83.1% 46.0%, 81.1% 49.4%, 78.8% 53.4%, 74.6% 59.9%, 72.1% 64.5%, 72.8% 66.9%, 76.2% 72.3%, 76.2% 76.7%, 74.4% 81.7%, 72.8% 84.9%, 75.1% 86.7%, 77.0% 88.3%, 76.7% 91.5%, 76.0% 93.8%, 75.1% 91.5%, 72.8% 90.8%, 70.5% 91.8%, 70.8% 93.6%, 64.4% 95.7%, 60.0% 95.3%, 53.0% 94.7%, 52.7% 93.7%, 57.7% 93.0%, 60.0% 90.4%, 58.5% 87.1%, 55.2% 81.8%, 50% 77.8%);
}
.GSIS_subCont__clip-img[mia] {
	clip-path: polygon(50% 0.7%, 60.5% 1.7%, 63.2% 4.6%, 60.0% 12.9%, 58.4% 14.4%, 62.8% 15.5%, 65.1% 17.1%, 66.7% 20.2%, 71.7% 23.6%, 73.1% 25.6%, 72.1% 27.8%, 72.8% 31.0%, 71.0% 34.2%, 72.8% 38.3%, 74.7% 43.4%, 74.9% 44.6%, 69.0% 53.8%, 68.5% 58.3%, 65.1% 64.3%, 64.6% 69.8%, 63.2% 77.0%, 59.4% 84.9%, 57.8% 89.7%, 57.7% 94.9%, 60.5% 95.9%, 60.5% 97.4%, 57.1% 98.0%, 50% 96.9%);
}
.GSIS_subCont__clip-img[chanel] {
	clip-path: polygon(50% 0.7%, 60.5% 1.7%, 63.2% 4.6%, 60.0% 12.9%, 58.4% 14.4%, 62.8% 15.5%, 65.1% 17.1%, 66.7% 20.2%, 71.7% 23.6%, 73.1% 25.6%, 72.1% 27.8%, 72.8% 31.0%, 71.0% 34.2%, 72.8% 38.3%, 74.7% 43.4%, 74.9% 44.6%, 69.0% 53.8%, 68.5% 58.3%, 65.1% 64.3%, 64.6% 69.8%, 63.2% 77.0%, 59.4% 84.9%, 57.8% 89.7%, 57.7% 94.9%, 60.5% 95.9%, 60.5% 97.4%, 57.1% 98.0%, 50% 96.9%);
}
.GSIS_subCont__clip-img[julia] {
	clip-path: polygon(50% 0.7%, 60.5% 1.7%, 63.2% 4.6%, 60.0% 12.9%, 58.4% 14.4%, 62.8% 15.5%, 65.1% 17.1%, 66.7% 20.2%, 71.7% 23.6%, 73.1% 25.6%, 72.1% 27.8%, 72.8% 31.0%, 71.0% 34.2%, 72.8% 38.3%, 74.7% 43.4%, 74.9% 44.6%, 69.0% 53.8%, 68.5% 58.3%, 65.1% 64.3%, 64.6% 69.8%, 63.2% 77.0%, 59.4% 84.9%, 57.8% 89.7%, 57.7% 94.9%, 60.5% 95.9%, 60.5% 97.4%, 57.1% 98.0%, 50% 96.9%);
}
.GSIS_subCont__clip-img[gabbie] {
	clip-path: polygon(50% 4.2%, 52.1% 4.1%, 55.9% 4.1%, 58.9% 5.4%, 61.2% 7.9%, 61.6% 11.0%, 59.6% 14.7%, 55.9% 17.1%, 55.0% 19.5%, 58.4% 20.6%, 63.9% 20.7%, 70.3% 21.3%, 74.6% 26.1%, 77.8% 30.6%, 81.1% 32.8%, 82.4% 34.3%, 81.9% 36.7%, 81.9% 37.7%, 77.8% 39.3%, 75.6% 39.0%, 70.8% 36.4%, 68.9% 33.0%, 67.6% 32.0%, 65.3% 33.2%, 66.7% 36.3%, 69.2% 37.6%, 74.0% 40.0%, 76.7% 42.4%, 79.5% 46.4%, 81.3% 49.6%, 81.5% 54.3%, 79.9% 60.0%, 78.5% 63.2%, 78.3% 64.7%, 76.9% 66.3%, 77.0% 69.0%, 78.3% 71.5%, 78.5% 75.3%, 77.8% 78.7%, 76.5% 85.1%, 76.9% 86.6%, 76.2% 89.1%, 76.7% 91.1%, 77.8% 93.0%, 78.1% 94.5%, 77.4% 96.0%, 75.6% 97.4%, 72.8% 97.7%, 68.9% 95.6%, 68.0% 92.9%, 67.6% 89.4%, 66.5% 87.8%, 67.1% 86.6%, 69.9% 83.6%, 68.0% 77.2%, 65.8% 73.6%, 66.2% 70.2%, 64.2% 67.0%, 64.4% 62.5%, 62.6% 57.1%, 62.1% 54.1%, 60.0% 53.5%, 54.8% 58.7%, 50.2% 62.5%, 50% 63.5%);
}
.GSIS_subCont__clip-img[angela] {
	clip-path: polygon(50% 3.3%, 52.3% 3.3%, 56.0% 3.9%, 61.0% 6.2%, 64.8% 10.1%, 66.7% 13.6%, 70.1% 15.8%, 74.7% 17.2%, 79.2% 19.2%, 81.0% 20.4%, 83.5% 26.5%, 84.3% 28.2%, 83.8% 29.2%, 83.8% 36.8%, 81.5% 40.9%, 77.8% 47.0%, 72.8% 52.2%, 67.1% 55.1%, 65.1% 56.3%, 63.5% 56.1%, 58.5% 60.0%, 56.6% 62.0%, 52.3% 64.3%, 50.7% 66.3%, 51.1% 67.7%, 54.1% 69.7%, 56.2% 72.0%, 56.6% 74.7%, 56.6% 77.4%, 56.9% 82.5%, 58.2% 83.4%, 60.3% 84.1%, 61.4% 85.1%, 61.2% 86.5%, 61.6% 87.7%, 62.6% 88.9%, 62.3% 89.5%, 64.6% 91.3%, 64.9% 92.9%, 64.1% 94.2%, 61.9% 95.3%, 60.1% 96.1%, 57.3% 96.7%, 52.1% 95.7%, 50% 96%);
} */

/* OTHER ------------ */
.girlscontainer {
	width: 72vh;
	height: 24vh;
	display: flex;
	position: absolute;
	margin: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1000;
}

.girlsimages {
	height: 20vh;
	border-radius: 50%;
	margin: 1vh;
	opacity: 0;
	transform: scale(0);
	position: relative;
	transition: all 0.5s ease;
	cursor: pointer;
}
.girlsimages:hover {
	transition: all 0.5s ease;
}

#imgcheriebutton {
	transform-origin: bottom right;
	transition: all 0.5s ease;
}

#imglanabutton {
	transform-origin: bottom;
	transition: all 0.5s ease;
}

#imgelfiebutton {
	transform-origin: bottom left;
	transition: all 0.5s ease;
}

#imgmiabutton {
	transform-origin: bottom left;
	transition: all 0.5s ease;
}

#imgchanelbutton {
	transform-origin: bottom left;
	transition: all 0.5s ease;
}

.exit-button {
	z-index: 5;
	position: absolute;
	margin: 3vmin;
	width: 24vmin;
	height: 24vmin;
	border-radius: 50%;
	margin: 3vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d0cece;
	border: 2vmin solid #2e6ca4;
	cursor: pointer;
	transition: transform 0.3s ease, background-color 0.3s ease;
}
.exit-button:hover {
	transform: translateY(-5px);
	background-color: gray;
}
.exit-button img {
	max-width: 80%;
	max-height: 80%;
	border-radius: 50%;
	filter: invert(34%) sepia(90%) saturate(396%) hue-rotate(167deg) brightness(92%) contrast(94%);
}

.UPGD_neon-text {
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
}

/* Header button */
.UPGD_header {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 19vh;
    top: 5vh;
	z-index: 15;
}

#UPGD_upgradeButton {
    text-transform: uppercase;
}

.UPGD_roman-numeral {
    font-size: 4.8vh;
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
    margin-right: 2vh;
    animation: UPGD_glowPulse 2s infinite;
}

#UPGD_upgradeButton {
    border: 0.3vh solid rgba(255, 0, 0, 0.4);
    padding: 1.8vh 3.6vh;
    font-size: 2vh;
    font-weight: bold;
    cursor: pointer;
    box-shadow: inset 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 1vh rgba(255, 0, 0, 0.4);
    border-radius: 0.8vh;
    transition: all 0.3s ease;
    position: relative;
    transform: scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
    animation: UPGD_glowPulse 2s infinite;
    color: white;
    overflow: hidden;
}

#UPGD_upgradeButton:hover {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1.5vh rgba(255, 0, 0, 0.6), 0 0 2vh rgba(255, 0, 0, 0.6);
    text-shadow: 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1.5vh rgba(255, 0, 0, 0.6), 0 0 2vh rgba(255, 0, 0, 0.6);
    animation: none;
}

@keyframes UPGD_glowPulse {
    0% {
        text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
    }
    50% {
        text-shadow: 0vh 0vh 1.6vh rgba(255, 0, 0, 0.8), 0vh 0vh 3.2vh rgba(255, 0, 0, 0.8), 0vh 0vh 4.8vh rgba(255, 0, 0, 0.8);
    }
    100% {
        text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
    }
}

/* Arrow styles */
.UPGD_arrow {
    font-size: 4vh;
    margin: 0 1vh;
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
    animation: UPGD_arrowAnimation 1s infinite alternate;
}

@keyframes UPGD_arrowAnimation {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-0.5vh);
    }
}

/* Popup for Upgrade Room */
.UPGD_popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9);
    padding: 3vh;
    border-radius: 1vh;
    box-shadow: 0 0 3vh rgba(255, 0, 0, 1);
    max-width: 60vh;
    width: 90%;
    animation: UPGD_fadeIn 0.3s ease-in-out;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    border: 0.3vh solid rgba(255, 0, 0, 0.4);
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
}

.UPGD_popup h3 {
    font-size: 2.8vh;
    margin-bottom: 1.5vh;
    animation: UPGD_glowPulse 2s infinite;
    margin-top: -0.1vh;
}

.UPGD_popup p {
    font-size: 1.8vh;
    margin-bottom: 1.5vh;
    animation: UPGD_glowPulse 2s infinite;
}

.UPGD_resource-section {
    display: flex;
    justify-content: center;
    gap: 2vh;
    margin-bottom: 2vh;
    flex-wrap: wrap;
}

.UPGD_resource-item {
    text-align: center;
    position: relative;
}

.UPGD_resource-item img {
    width: 6vh;
    height: 6vh;
    margin-bottom: 0.5vh;
    transition: transform 0.3s ease;
    animation: UPGD_glowPulse 2s infinite;
}

.UPGD_resource-item img:hover {
    transform: scale(1.1);
    animation: none;
}

.UPGD_resource-item p {
    font-size: 1.6vh;
    margin-top: 0.5vh;
    animation: UPGD_glowPulse 2s infinite;
}

.UPGD_upgrade-btn {
    border: 0.3vh solid rgba(255, 0, 0, 0.4);
    padding: 1.2vh 3vh;
    border-radius: 0.8vh;
    font-size: 2vh;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.5vh;
    background-color: rgba(0, 0, 0, 0.4);
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
    box-shadow: inset 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 1vh rgba(255, 0, 0, 0.4);
    animation: UPGD_glowPulse 2s infinite;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    width: fit-content;
    left: 50%; 
    right: 50%;
    transform: translateX(-50%);
    position: relative;
}

.UPGD_upgrade-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1.5vh rgba(255, 0, 0, 0.6), 0 0 2vh rgba(255, 0, 0, 0.6);
    text-shadow: 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1.5vh rgba(255, 0, 0, 0.6), 0 0 2vh rgba(255, 0, 0, 0.6);
    animation: none;
}

.UPGD_upgrade-btn:disabled {
    background-color: rgba(68, 68, 68, 0.4);
    cursor: not-allowed;
    animation: none;
}

.UPGD_close-btn {
    border: 0.3vh solid rgba(255, 0, 0, 0.4);
    background-color: rgba(68, 68, 68, 0.4);
    color: #fff;
    padding: 1vh 2vh;
    border-radius: 0.6vh;
    font-size: 1.6vh;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 2vh;
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
    animation: UPGD_glowPulse 2s infinite;
}

.UPGD_close-btn:hover {
    background-color: rgba(102, 102, 102, 0.4);
    transform: scale(1.05);
    animation: none;
}

/* Additional Info Section for Upgrade Benefits */
.UPGD_upgrade-benefits {
    background-color: rgba(255, 0, 0, 0.4);
    color: #fff;
    padding: 1.5vh;
    border-radius: 0.8vh;
    margin-top: 1.5vh;
    box-shadow: 0 0 1vh rgba(255, 0, 0, 0.7);
    animation: UPGD_glowPulse 2s infinite;
}

.UPGD_upgrade-benefits p {
    font-size: 1.6vh;
    font-weight: bold;
    margin: 0.8vh 0;
    text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
}

/* Roman numeral styling for the tier */
.UPGD_roman-numeral {
    font-size: 3.6vh;
    margin-right: 2vh;
    font-weight: bold;
}

/* Fade-in animation */
@keyframes UPGD_fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Upgrading animation */
@keyframes UPGD_upgradeAnimation {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        transform: translateY(-1vh);
        opacity: 1;
    }
}

.UPGD_upgrade-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4vh;
    margin-top: 1.5vh;
    animation: UPGD_upgradeAnimation 0.8s ease-out;
}

.UPGD_upgrade-arrow {
    margin-left: 1vh;
    font-size: 3vh;
    animation: UPGD_arrowAnimation 1s infinite alternate;
}

  /* Room Upgraded Text */
  .UPGD_room-upgraded-text {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 4vh;
        font-weight: bold;
        text-align: center;
        text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
        opacity: 0;
        animation: UPGD_fadeInText 0.8s ease-out forwards, UPGD_fadeOut 0.8s 3s ease-out forwards;
    }

    .UPGD_room-upgraded-text .UPGD_arrow {
        margin: 0 1vh;
        animation: UPGD_arrowAnimation 1s infinite alternate;
    }


    @keyframes UPGD_fadeInText {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes UPGD_showRoomUpgraded {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes UPGD_fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

/* Responsive styles */
@media (max-width: 48vh) {
    .UPGD_popup {
        padding: 2vh;
    }

    .UPGD_resource-item img {
        width: 4vh;
        height: 4vh;
    }

    .UPGD_resource-item p {
        font-size: 1.4vh;
    }

    .UPGD_upgrade-btn,
    .UPGD_close-btn {
        font-size: 1.6vh;
        padding: 0.8vh 2vh;
    }

    .UPGD_upgrade-benefits p {
        font-size: 1.4vh;
    }

    .UPGD_roman-numeral {
        font-size: 2.8vh;
    }

    .UPGD_upgrade-animation {
        font-size: 2vh;
    }

    .UPGD_upgrade-arrow {
        font-size: 2.4vh;
    }

    .UPGD_room-upgraded-text {
        font-size: 3vh;
    }
}

.UPGD_arrow {
  display: inline-block;
  animation: UPGD_arrowAnimation 1s infinite alternate;
}

@keyframes UPGD_arrowAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1vh);
  }
}

@keyframes UPGD_arrowAnimation2 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  35% {
    opacity: 1
  }
  100% {
    transform: translateY(-3.4vh);
    opacity: 0;
  }
}


 /* Close Button (X) */
 .UPGD_close-btn {
        position: absolute;
        top: -1vh;
        right: 1vh;
        font-size: 2.4vh;
        color: #fff;
        background-color: transparent;
        border: none;
        cursor: pointer;
        text-shadow: 0vh 0vh 0.8vh rgba(255, 0, 0, 0.4), 0vh 0vh 1.6vh rgba(255, 0, 0, 0.4), 0vh 0vh 2.4vh rgba(255, 0, 0, 0.4);
        animation: UPGD_glowPulse 2s infinite;
        font-weight: bold;
    }

    .UPGD_close-btn:hover {
        transform: scale(1.2);
        animation: none;
    }

    .UPGD_buttonArrow {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }
    #UPGD_upgradeButton:hover .UPGD_buttonArrow {
        position: absolute;
        font-size: 11vh;
        opacity: 0.6;
        z-index: -1;
        top: -3vh;
        animation: UPGD_arrowAnimation2 1.5s infinite ;
        transition: opacity 1s ease;
    }




	.bouton_evilScenes {
		position: relative; /* Required for positioning */
		border-radius: 10vh;
		z-index: 1; /* Make sure the button is on top */
		padding: 0.67vh;
		transition: 0.3s ease;
		left: 0.67vh;
	}
	
	.bouton_evilScenes::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: conic-gradient(
			red, orange, yellow, green, blue, indigo, violet, red
		);
		animation: spin 2s linear infinite;
		z-index: -1;
		/* Add this to constrain just the gradient background */
		clip-path: circle(50%);
		/* or alternatively */
		/* mask-image: radial-gradient(circle, black 50%, transparent 50%); */
	}
	@keyframes spin {
		from {
			transform: rotate(0deg); /* Start position */
		}
		to {
			transform: rotate(360deg); /* End position */
		}
	}
	.bouton_evilScenes:hover:before {
		animation: spin 1s linear infinite;
	}
	
	.bouton_evilScenes:hover {
		/* Optional: Add a hover effect for the button itself */
		transition: 0.3s ease;
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Optional glow on hover */
	}



	.bouton_evilScenes_div:hover {
		background-color: gray !important;
	}

	.bouton_evilScenes_text {
		width: 98%;
		position: absolute;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 1.7vh;
		font-weight: bold;
		text-transform: uppercase;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 0.5vh;
	}

	#evilImg {
		right: auto;
		height: 75%;
		top: 50%;
		left: 50%;
		position: relative;
		transform: translate(-50%, -50%);
		margin: auto;
	}

	.smallButton_evilScenes {
		position: absolute;
		width: 7.5vh;
		height: 7.5vh;
		border-radius: 4vh;
		cursor: pointer;
		transition: all 0.3s ease;
		z-index: 1000;
		opacity: 0;
		transition: opacity 0.3s;
		pointer-events: none;
		transform: scale(0);
    	transition: transform 0.3s;
	  }

	  .smallButton_evilScenes:hover {
		background-color: gray !important;
		transition: all 0.3s ease;
	  }

	  .smallButton_evilScenes.lana {
		background-color: #012060;
		outline: solid 0.5vh #be3ae8;
		transition: all 0.3s ease;
	  }
	  .smallButton_evilScenes.cherie {
		background-color: #bf0000;
		outline: solid 0.5vh #ede8ed;
		transition: all 0.3s ease;
	  }
	  .smallButton_evilScenes.elfie {
		background-color: #7030a0;
		outline: solid 0.5vh #deb04c;
		transition: all 0.3s ease;
	  }
	  .smallButton_evilScenes.mia {
		background-color: #5e3e3e;
		outline: solid 0.5vh #f2a36e;
		transition: all 0.3s ease;
	  }
	  .smallButton_evilScenes.angela {
		background-color: #f9d642;
		outline: solid 0.5vh #4e5d2c;
		transition: all 0.3s ease;
	  }
	  .smallButton_evilScenes.gabbie {
		background-color: #6d322c;
		outline: solid 0.5vh #deb23f;
		transition: all 0.3s ease;
	  }
	  .smallButton_evilScenes.chanel {
		background-color: #d0cece;
		outline: solid 0.5vh #2e6ca4;
		transition: all 0.3s ease;
	  }

	  .boutondiv_topright_lana #evilImg {
		filter: brightness(0) saturate(100%) invert(51%) sepia(77%) saturate(6344%) hue-rotate(268deg) brightness(92%) contrast(97%);
	  }
	  .boutondiv_topright_cherie #evilImg {
		filter: brightness(0) saturate(100%) invert(97%) sepia(9%) saturate(182%) hue-rotate(237deg) brightness(92%) contrast(102%);
	  }
	  .boutondiv_topright_elfie #evilImg {
		filter: brightness(0) saturate(100%) invert(73%) sepia(54%) saturate(491%) hue-rotate(355deg) brightness(92%) contrast(88%);
	  }
	  .boutondiv_topright_mia #evilImg {
		filter: brightness(0) saturate(100%) invert(86%) sepia(16%) saturate(4053%) hue-rotate(313deg) brightness(105%) contrast(90%);
	  }
	  .boutondiv_topright_angela #evilImg {
		filter: brightness(0) saturate(100%) invert(28%) sepia(71%) saturate(327%) hue-rotate(37deg) brightness(96%) contrast(86%);
	  }
	  .boutondiv_topright_gabbie #evilImg {
		filter: brightness(0) saturate(100%) invert(73%) sepia(93%) saturate(379%) hue-rotate(345deg) brightness(92%) contrast(87%);
	  }
	  .boutondiv_topright_chanel #evilImg {
		filter: brightness(0) saturate(100%) invert(37%) sepia(24%) saturate(1351%) hue-rotate(167deg) brightness(96%) contrast(92%);
	  }

	  
	  
	  #button1_evilScenes {
		right: 12.6vh;
		top: -4.8vh;
		transform-origin: bottom right; /* or any other position you want */
	  }
	  
	  #button2_evilScenes {
		right: 15.9vh;
		transform: translateY(-50%);
		transform-origin: right center;
	  }
	  
	  #button3_evilScenes {
		right: 12.6vh;
		top: 12vh;
		transform-origin: top right;
	  }

	  .corner-icon {
		position: absolute;
		top: -1vh;
		left: -1vh;
		width: 3.5vh;  /* Adjust size as needed */
		height: 3.5vh;  /* Adjust size as needed */
		z-index: 1;
	}