/* body:has(a.class:hover) */


a {
	display: inline-block;
	text-decoration: none;
}

body {
	font-family: "Poppins", sans-serif;
	letter-spacing: 1.2;
	background-color: #ffffff;
	width: 100vw;
	height: 100vh;
}

.wrapper {
	text-align: center;
}

h1 {
	font-weight: 500;
	padding: 5rem;
}

em {
	font-weight: 200;
}

/* shy */
.button__shy {
	position: relative;
	margin: 5rem 10rem;
	width: 10rem;
	height: 5rem;
}

.button__shy__cover {
	background-color: rgba(255, 255, 255, 0.8);
	width: 10rem;
	height: 5rem;
	border-radius: 10px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	transition: transform .3s cubic-bezier(0.42, 0, 0.58, 1);
	font-size: 14px;
}

.button__shy__cover:hover {
	transform-origin: left;
	transform: translateY(65%);
}

.button__shy__cover:hover+.button__shy__link {
	box-shadow: 0 0 100px rgba(255, 53, 228, 0.9);
}

.button__shy__link {
	color: rgb(204, 3, 164);
	background-color: rgb(255, 245, 254);
	border-radius: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: .8rem;
	padding: .5rem 2rem;
	font-weight: 100;
}

/* playful */
.button__playful__link {
	background-color: rgb(59, 152, 247);
	color: rgb(255, 255, 255);
	padding: 4rem 0;
	border-radius: 100%;
	width: 12%;
	transition: transform 1s ease, width .5s ease;
	font-family: "Rubik Bubbles", system-ui;
	font-size: 2rem;
}

.button__playful__link:hover {
	transform: scaleY(500%);
	width: 50%;
	animation: changeColor .5s ease-in-out infinite;
	border: none;
}

@keyframes changeColor {
	0% {
		background-color: rgb(246, 247, 59);
	}

	50% {
		background-color: rgb(247, 60, 59);
	}

	100% {
		background-color: rgb(154, 59, 247);
	}
}

/* angry */
.button__angry__link {
	background-color: white;
	color: rgb(0, 0, 0);
	padding: 1rem 2rem;
	border: black 1px solid;
	position: absolute;
	top: 40%;
	right: 25%;
}

.button__angry__link:hover {
	background-color: rgb(255, 0, 0);
	text-transform: uppercase;
	scale: 5;
	font-weight: 900;
	color: transparent;
	border: black 10px solid;
	animation: changeDegree .1s infinite;
}


.button__angry__link:hover::after {
	content: "!%@$@";
	/* Add the new text when hovered */
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	font-size: inherit;
}

@keyframes changeDegree {
	0% {
		transform: translateX(-5px) rotate(-5deg);
	}

	20% {
		transform: translateX(5px) rotate(5deg);
	}

	40% {
		transform:  rotate(-3deg);
	}

	60% {
		transform: translateX(4px) rotate(3deg);
	}

	80% {
		transform: translateX(-2px) rotate(-2deg);
	}

	100% {
		transform: translateX(2px) rotate(2deg);
	}
}

/* calm */
/* Button container */
.button__calm {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
	/* Positioning the button */
}

.button__calm__link {
	color: #ffffff;
	background: #a79880;
	/* Soft blue gradient */
	padding: 15px 50px;
	border-radius: 50px;
	text-transform: uppercase;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	transition: transform 2s ease, opacity 2s ease;
	/* Smooth transition for hover */
	position: absolute;
	opacity: 100%;
	bottom: 30%;
	left: 10%;
	font-family: "Italiana", sans-serif;
}

.button__calm__link:hover {
	transform: translateY(100%);
	text-transform: none;
	opacity: 30%;
}

/* Focus effect to maintain calmness */
.button__calm__link:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(161, 196, 253, 0.7);
	/* Soft focus shadow */
}

/* fake */
/* Fake button container */
.button__fake__link {
	padding: 15px 30px;
	color: white;
	background-color: #6b01bc;
	border-radius: 25px;
	text-align: center;
	opacity: 1;
	position: absolute;
	bottom: 10%;
	right: 10%;
	transition: transform .1s ease;
}

.button__fake__link:hover {
	transform: translate3d(-500px, -500px, 135px);
	background-color: #ffffff;
	box-shadow: 0 0 5px rgba(177, 0, 221, 0.7);
	color: #6b01bc;
}