@charset "UTF-8";

* {
	margin: 0; padding: 0;
	box-sizing: border-box;
	list-style-type: none;
	word-wrap: break-word;
}

/* screen */
screen {
	width: 100vw; height: 100vh;
	position: fixed; top: 0; left: 0;
	z-index: 8000;
	background: #fff;
	font-family: sans-serif;
	font-size: 3vh;
}
screen.out {
	animation: screenOut 1s;
	animation-fill-mode: forwards;
}
@keyframes screenOut {
	  0% { opacity: 1; }
	100% { opacity: 0; }
}

screen h1 {
	width: 50vw; height: 50vh;
	margin: 0 auto 0;
	background: url("logo.png") no-repeat center center;
	background-size: 100% auto;
	color: rgba(0, 0, 0, 0);
}
screen p {
	margin: 0 auto 0;
	text-align: center;
}
screen input {
	display: block;
	width: 80vw;
	margin: 2vh auto; padding: 1vh;
	text-align: center;
	color: #333;
	font-size: 3vh;
}
screen input::selection {
	color: #fff;
	background: #333;
}
screen button {
	display: block;
	margin: 2vh auto; padding: 1vw 2vw;
	border: none; border-radius: 800px;
	background: #000;
	color: #fff;
	font-size: 3vh;
}
screen button:hover {
	background: #ddd;
	color: #000;
}