@charset "UTF-8";

body {
	margin: 0;
	padding: 0;
	font-family: "courier","ヒラギノ丸ゴ ProN","Yu Gothic", sans-serif;
}

.gradient {
	overflow: hidden;
	position: relative;
	width: 100vw;
	height: 100vh;
	background: radial-gradient(
		farthest-corner at 0 0,
		#FBDA61 0%,
		#FF5ACD 50%,
		#56D7F7 90%,
		#16E6B6 100%
	);
	background-repeat: no-repeat;
}
.gradient::before {
	z-index: 1;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	background: radial-gradient(
		100vw at 0 0,
		rgba(251, 218, 97, 1) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	transition: all 0.5s;
	animation: gradient1 10s ease-out infinite;
}

@keyframes gradient1 {
	0%   { transform: translateX(0); }
	50%  { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

.gradient::after {
	z-index: 2;
	position: absolute;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	background: radial-gradient(
		100vw at 100vw 100vw,
		rgba(22, 230, 182, 1) 0%,
		rgba(255, 255, 255, 0) 100%
	);
	transition: all 0.5s;
	animation: gradient 15s ease-out infinite;
	content: "";
}

@keyframes gradient {
	0%   { transform: translateX(0); }
	50%  { transform: translateX(50%); }
	100% { transform: translateX(0); }
}


#contents {
	display: table;
	width: min(30%, 500px);
	height: 100vh;
	margin: 0 auto;
}
#contents > div {
	position: relative;
	z-index: 100;
	display: table-cell;
	vertical-align: middle;
}
h1 {
	margin: 0 auto 40px;
	text-align: center;
	vertical-align: middle;
}
h1 img {
	width: 100%;
	height: auto;
	filter: invert(100%) sepia(0%) saturate(25%) hue-rotate(97deg) brightness(107%) contrast(106%);
}

p {
	text-align: center;
	font-size: 2rem;
	line-height: 1.4;
	color: #fff;
}
p > span {
	font-size: 80%;
}