body {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: black;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.face-container {
	position: relative;
	width: 600px;
	height: 600px;
	animation: float 6s ease-in-out infinite;
}

.face {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: rotate3d 20s linear infinite;
}

.face a {
	position: absolute;
	font-size: 60px;
	font-weight: bold;
	margin: 0;
	text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
	display: block;
}

.eye-left {
	top: 220px;
	left: 180px;
	color: #34495e !important;
	animation: blink 3s ease-in-out infinite;
	font-size: 50px;
}

.eye-right {
	top: 220px;
	right: 180px;
	color: #34495e !important;
	animation: blink 3s ease-in-out infinite 0.2s;
	font-size: 50px;
}

.nose {
	top: 290px;
	left: 50%;
	transform: translateX(-50%);
	color: #e67e22 !important;
	animation: wiggle 2s ease-in-out infinite;
	font-size: 50px;
}

.mouth {
	top: 360px;
	left: 50%;
	transform: translateX(-50%);
	color: #c0392b !important;
	font-size: 60px;
	animation: speak 1.5s ease-in-out infinite;
}

.eyebrows-left {
	top: 160px;
	left: 160px;
	color: #7f6a4f !important;
	transform: rotate(-20deg);
	font-size: 55px;
}

.eyebrows-right {
	top: 160px;
	right: 160px;
	color: #7f6a4f !important;
	transform: rotate(20deg);
	font-size: 55px;
}

.faceline {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scaleY(0.9) scaleX(1.3);
	font-size: 700px !important;
	color: rgba(149, 117, 87, 0.45);
	z-index: -1;
	font-family: "HiraMinProN-W3", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", serif;
	font-weight: 300;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
} 


@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
}

@keyframes rotate3d {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

@keyframes blink {
	0%, 90%, 100% {
		transform: scaleY(1);
		opacity: 1;
	}
	95% {
		transform: scaleY(0.1);
		opacity: 0.7;
	}
}

@keyframes wiggle {
	0%, 100% {
		transform: translateX(-50%) rotate(0deg);
	}
	25% {
		transform: translateX(-50%) rotate(-5deg);
	}
	75% {
		transform: translateX(-50%) rotate(5deg);
	}
}

@keyframes speak {
	0%, 100% {
		transform: translateX(-50%) scale(1);
	}
	50% {
		transform: translateX(-50%) scale(1.2);
	}
}


.face a:hover {
	transform: scale(1.2) rotate(360deg);
	filter: hue-rotate(180deg);
	cursor: pointer;
}

@media (max-width: 500px) {
	.face-container {
		width: 300px;
		height: 300px;
	}
	
	.face a {
		font-size: 45px;
	}
	
	.mouth {
		font-size: 55px;
	}
}