@keyframes rotate {
	0% {
		background-color: white;
		transform: rotateZ(0deg) scale(1);
	}
	100% {
		background-color: pink;
		transform: rotateZ(720deg) scale(1.5);
	}
}

@keyframes rotate-mobile {
	0% {
		background-color: palevioletred;
		transform: rotateZ(0deg) scale(1);
	}
	100% {
		background-color: white;
		transform: rotateZ(720deg) scale(1.5);
	}	
}

@keyframes done {
	0% {
		z-index: 999;
	}
	10% {
		transform: scale(1.2);
	}
	20% {
		transform: scale(1);
	}
	30% {
		transform: scale(1.3);
	}
	40% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.4);
	}
	60% {
		transform: scale(1);
	}
	100% {
		transform: scale(10);
	};
}

body {
	background-color: palevioletred;

	& aside {
		display: flex;
		justify-content: center;
		align-items: center;	

		& img.emoji {
			width: clamp(100px, 50vw, 500px);
		}

		& img.emoji.done {
			animation: done 2s ease-in-out forwards;
		}
	}

	& main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		& h1 {
			font-size: 4vw;
		}

		& h1.name-none {
			display: none;
		}

		& .wait {
			position: relative;
			width: 100%;
			height: 500px;

			& .yes {
				position: absolute;
				top: 50px;
				left: 30px;
				
				display: flex;
				align-items: center;
				padding: 20px;

				color: rgb(186, 0, 0);
				font-size: clamp(10px, 2vw, 40px );
				border: 2px solid red;
				border-radius: 20px;

				& .yes-sign {
					display: flex;
					height: 100%;
					align-items: center;
					margin-left: 5px;
					color: rgb(226, 39, 158);
				}
			}

			& .yes:hover {
				background-color: white;
			}

			& .yes.done {
				animation: rotate 1.5s ease-in-out infinite alternate;
			}

			& .no {
				position: absolute;
				top: 50px;		
				right: 30px;

				display: flex;
				align-items: center;
				padding: 20px;

				color: gray;
				opacity: 0.6;
			font-size: clamp(8px, 1.5vw, 30px );
				border: 2px solid gray;
				border-radius: 20px;					

				& .no-sign {
					display: flex;
					height: 100%;
					align-items: center;
					margin-left: 5px;
					color: black;
				}

				transition: all 0.2s linear;
			}

			& .no:hover {
				opacity: 0.3;
			}

			& .no.bottom-left {
				opacity: 0.1;
				top: auto;
				right: auto;
				bottom: 0px;
				left: 0px;
			}	
			
			& .no.bottom-left:hover {
				opacity: 0;
			}

			& .no.bottom-right {
				opacity: 0.1;
				top: auto;
				left: auto;
				bottom: 0px;
				right: 0px;
			}

			& .no.bottom-right:hover {
				opacity: 0;
			}

			& .no.top {
				opacity: 0.1;
				bottom: auto;
				left: auto;
				top: 0px;
				right: 0px;
			}

			& .no.top:hover {
				opacity: 0;
			}
		}

		& .wait.done {
			& .no {
				opacity: 0;
			}

			& .no:hover {
				opacity: 0;
			}
		}
	}
}

@media (hover: none), (pointer: coarse) {
	body {
		& main {
			& .wait {
				& .yes:hover {
					background-color: palevioletred;
				}
				& .yes.done {
					animation: rotate-mobile 1.5s ease-in-out infinite alternate;
				}
				& .no:hover {
					opacity: 0.6;
				}
				& .no.bottom-left:hover {
					opacity: 0.1;
				}
				& .no.bottom-right:hover {
					opacity: 0.1;
				}
				& .no.top:hover {
					opacity: 0.1;
				}				
			}
		}
	}
} 

@media(max-width: 250px){
	body {
		& main {
			& .wait {
				& .yes {
					left: 2px;
				}
				& .no {
					right: 2px;
				}
			}
		}
	}
}