*::selection { color: inherit; background; inherit; }

body { width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-family: Roboto; }

main { width: 722px; height: 406px; position: relative; }
main .bleach { background: #fff; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.72; z-index: 3; transition: 1.077s; }
main #start-button {
	width: 110px; height: 110px;
	background: rgba(255,255,255,0.55);
	padding: 40px; border-radius: 50%; border: 3px solid #fff;
	position: absolute; top: calc(50% - 95px); left: calc(50% - 95px); z-index: 10;
	transition: 1.077s;
}
main #start-button img { width: 100%; margin-left: 12px; opacity: 0.22; }

main.playing .bleach { opacity: 0.33; }
main.playing #start-button { opacity: 0; }


#motto { width: 100%; font-size: 20px; display: flex; justify-content: center; position: absolute; left: 0; bottom: 12px; }
#motto .motto-wrapper { padding: 8px 16px; position: relative; }
#motto .motto-wrapper .motto-content { color: #555; position: relative; z-index: 10; }
#motto .motto-wrapper .motto-bg {
	width: 100%; height: 100%;
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
	background: rgba(255,255,255,0.5); border-radius: 40px; filter: blur(1.2px);
}

/* js animation */

/* initial state */
#motto { opacity: 0; }
#motto .motto-wrapper .motto-content span { opacity: 0; transition: 0.44s; }
#motto .motto-wrapper .motto-bg { width: 0%; }

/* animation changes */
#motto.visible { opacity: 1; }
#motto .motto-wrapper .motto-content span.visible { opacity: 1; transition: 0.44s; }
#motto .motto-wrapper .motto-bg.visible { width: 100%; }