html{height:100%}
body{
	position:relative;
	height:100%;
	background:linear-gradient(#242625 25%, #303133 50%, #303133 50%, #242625 100%);
	color:#a4a8a4;
	font-size:14px;
	font-family:"Inter",sans-serif;
}
a{
	transition:all .3s;
	color:#b1b4b1;
}
a:hover{
	color:#cbcdcb;
}
strong{
	font-weight:500;
	color:#00acc1;
}
.container{
	max-width:650px;
	margin:0 auto;
	width:100%;
}
.content{
	position:absolute;
	width:100%;
}
.content .header{
	padding:3.5rem 0 .3rem;
	text-align:center;
	position:relative;
	z-index:1;
	margin:0 2rem;
}
.content .header img{    
	height: 5rem;
	width: auto;
}
.content .header p{
	font-size:1.3rem;
	font-weight:500;
	color:#e5e5e5;
}
.content .main{
	position:relative;
	margin:0 1rem;
	z-index:1;
	background:#1e201f;
	border-radius:.7rem;
	padding:1.5rem;
	box-shadow:0 1px 0 rgba(255,255,255,.1),inset 0 3px 3px rgba(0,0,0,.5);
	margin-bottom:1rem;
}
.content .main ul.m-list{
	margin:0;
	padding:0;
	list-style:none;
	margin:1rem 0;
}
.content .main ul.m-list li a{
	display:flex;
	justify-content:space-between;
	background:#242625;
	padding:.5rem .8rem;
	margin:.3rem 0;
	border-radius:.4rem;
	border:1px solid #3e403f;
	color:#777b77;
	text-decoration:none;
	transition:border-color .3s,background .3s;
}
.content .main ul.m-list li a span:first-child{
	font-weight:600;
	color:#e5e5e5;
}
.content .main ul.m-list li a span:last-child{
	display:inline-block;
	align-items:center;
	transition:color .3s;
}
.content .main ul.m-list li a span:last-child:before{
	content:" ";
	display:inline-block;
	background:#00acc1;
	width:6px;
	height:6px;
	border-radius:50%;
	vertical-align:middle;
	margin-right:.3rem;
}
.content .main ul.m-list li a:hover{
	background:#003a42;
	border-color:#00acc1;
}
.content .main ul.m-list li a:hover span:last-child{
	color:#e5e5e5;
}
.content .main .notice{
	background:#131514;
	padding:.9rem 1rem .4rem;
	border-radius:.5rem;
	display:flex;
}
.content .main .notice .start{
	display:flex;
	margin-right:.5rem;
}
.content .main .notice .start i{
	font-size:1.1rem;
	color:#e5e5e5;
}
.content .main .notice .stop{
	margin-top:.1rem;
	font-size:.8rem;
}
.content .main .notice .stop .heading{
	font-weight:400;
	color:#e5e5e5;
	font-size:.9rem;
}
.content .main .notice .stop .twitter{
	background:#00acc1;
	border-radius:.2rem;
	padding:.2rem .5rem;
	display:inline-block;
	color:#131514;
	text-decoration:none;
	font-weight:500;
	margin-top:.4rem;
	font-size:.8rem;
}
.content .main .notice .stop .twitter:hover{
	background:#00d9f4;
}
.content .main .faq{
	margin-top:1.8rem;
}
.content .main .faq h3{
	font-size:.9rem;
	font-weight:500;
	color:#e5e5e5;
}
.content .footer{
	text-align:center;
	width:100%;
	position:relative;
	z-index:1;
	margin-bottom:2rem;
}
.wrap{
	width:100%;
	height:100%;
	position:absolute;
	margin:0 auto;
	perspective:360px;
	perspective-origin:50% 50%;
}
.top-plane,.bottom-plane{
	width:200%;
	height:130%;
	position:absolute;
	bottom:-30%;
	left:-50%;
	background-image:-webkit-linear-gradient(#303133 2px, transparent 2px),-webkit-linear-gradient(left, #303133 2px, transparent 2px);
	background-size:100px 100px,100px 100px;
	background-position:-1px -1px,-1px -1px;
	transform:rotateX(85deg);
	animation:planeMoveTop 2s infinite linear;
	z-index:0;
}
.bottom-plane{
	transform:rotateX(-85deg);
	top:-30%;
	animation:planeMoveBot 2s infinite linear;
}
@keyframes planeMoveTop{
	from{
		background-position:0px -100px,0px 0px;
	};
	to{
		background-position:0px 0px,100px 0px;
	};
}
@keyframes planeMoveBot{
	from{
		background-position:0px 0px,0px 0px;
	};
	to{
		background-position:0px -100px,100px 0px;
	};
}
@media(max-height: 350px){
	.wrap{
		perspective:210px;
	};
}