/* 横屏 */
@media screen and (orientation: landscape) {
	.answer {
		width: 100%;
		height: 100px;
		line-height: 100px;
		text-align: center;
		position: absolute;
		z-index: 12;
		top: calc((100vh - 100px) / 2);
		left: 0;
		color: #3cc2ff;
		font-size: 60px;
		font-weight: bold;
		letter-spacing: .3em;
		filter: drop-shadow(0 0 24px #3cc2ff);
		user-select: none;
		animation: animateColor 7.2s linear infinite;
	}
	.star {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: calc(100vh - 100px);
		background: #131a1c;
		scroll-behavior: smooth;
	}

	.loader {
		position: relative;
		width: 480px;
		height: 480px;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: animateColor 7.2s linear infinite;
	}
	@keyframes animateColor {
		0% {
			filter: hue-rotate(0deg);
		}
	   100% {
			filter: hue-rotate(360deg);
		}
	}
	.loader span {
		opacity: .8;
		position: absolute;
		transform-origin: 240px;
		transform: translateX(-240px) rotate(calc(var(--i)* 30deg));
		filter: drop-shadow(0 0 5px #3cc2ff)drop-shadow(0 0 15px #3cc2ff)drop-shadow(0 0 30px #3cc2ff);
	}

	.loader span i {
		position: relative;
		color: #3cc2ff;
		animation: rotate-stars 2.4s linear infinite;
		animation-delay: calc(var(--i) * 0.2s);
	}

	@keyframes rotate-stars {
		0% {
			transform: rotate(0deg) scale(0);
		}
		50% {
			transform: rotate(180deg) scale(3);
		}
	}

	.loader span::before {
		opacity: .2;
		content:'★'; /* change to f004 for heart effect :D */
		position: absolute;
		font-family: fontAwesome;
		font-size: 0.75em;
		color: #131a1c;
		animation: rotate-particle 9.6s linear infinite;
		animation-delay: calc(var(--i) * 0.2s);
	}

	@keyframes rotate-particle {
		0% {
			scale: 1;
			opacity: 0;
			rotate: 0deg;
		}
		50% {
			scale: 1;
			opacity: 1;
			rotate: 180deg;
		}
	   100% {
			scale: 0;
			opacity: 0;
			rotate: 360deg;
			filter:drop-shadow(-240px 0 #3cc2ff)drop-shadow(240px 0 #3cc2ff)drop-shadow(0 240px #3cc2ff)drop-shadow(-240px 0 #3cc2ff);
		}
	}
}

/* 竖屏 */
@media screen and (orientation: portrait) {
	.answer {
		width: 100vw;
		height: 100px;
		line-height: 100px;
		text-align: center;
		position: absolute;
		z-index: 12;
		top: calc((100vh - 100px) / 2);
		left: 0;
		color: #3cc2ff;
		font-size: 24px;
		font-weight: bold;
		letter-spacing: .3em;
		filter: drop-shadow(0 0 24px #3cc2ff);
		user-select: none;
		animation: animateColor 7.2s linear infinite;
	}
	.star {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: calc(100vh - 100px);
		background: #131a1c;
		scroll-behavior: smooth;
	}

	.loader {
		position: relative;
		width: 50vw;
		height: 50vw;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: animateColor 7.2s linear infinite;
	}
	@keyframes animateColor {
		0% {
			filter: hue-rotate(0deg);
		}
	   100% {
			filter: hue-rotate(360deg);
		}
	}
	.loader span {
		opacity: .8;
		position: absolute;
		transform-origin: 25vw;
		transform: translateX(-25vw) rotate(calc(var(--i)* 30deg));
		filter: drop-shadow(0 0 5px #3cc2ff)drop-shadow(0 0 15px #3cc2ff)drop-shadow(0 0 30px #3cc2ff);
	}

	.loader span i {
		position: relative;
		color: #3cc2ff;
		animation: rotate-stars 2.4s linear infinite;
		animation-delay: calc(var(--i) * 0.2s);
	}

	@keyframes rotate-stars {
		0% {
			transform: rotate(0deg) scale(0);
		}
		50% {
			transform: rotate(180deg) scale(3);
		}
	}

	.loader span::before {
		opacity: .2;
		content:'★'; /* change to f004 for heart effect :D */
		position: absolute;
		font-family: fontAwesome;
		font-size: 0.75em;
		color: #131a1c;
		animation: rotate-particle 9.6s linear infinite;
		animation-delay: calc(var(--i) * 0.2s);
	}

	@keyframes rotate-particle {
		0% {
			scale: 1;
			opacity: 0;
			rotate: 0deg;
		}
		50% {
			scale: 1;
			opacity: 1;
			rotate: 180deg;
		}
	   100% {
			scale: 0;
			opacity: 0;
			rotate: 360deg;
			filter:drop-shadow(-25vw 0 #3cc2ff)drop-shadow(25vw 0 #3cc2ff)drop-shadow(0 25vw #3cc2ff)drop-shadow(-25vw 0 #3cc2ff);
		}
	}
}