html,body,main{
	height: 100%;
	
}
body{
	margin: 0;
	user-select: none;
	font: lighter 16px "微软雅黑";
}
body::before{
	content: "";
	z-index: -1;
	width: 3000px;
	height: 3000px;
	display: block;
	position: fixed;
	top: calc(50% - 1500px);
	left: calc(50% - 1500px);
	animation: bg-rotate 15s infinite linear;
	background: linear-gradient(45deg,#20b57d 40%,#258ec5 60%);
}

@keyframes bg-rotate {
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}

a{
	text-decoration: none;
}
main{
	display: table;
	margin: 0 auto;
}
.content{
	padding-top: 50px;
	padding-bottom: 70px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.logo{
	margin-bottom: 50px;
}
.logo img{
	height: auto;
	max-width: 100px;
	border-radius: 100%;
	border: 3px solid #fff;
	transition: transform 0.3s;
}

.logo img:hover{
	transform: scale(1.1,1.1) rotate(1turn);
}

.links{
	max-width: 300px;
}
.links a{
	color: #fff;
	display: block;
	min-width: 80px;
	padding: 1em 2em;
	text-align: center;
	margin-bottom: 1em;
	border: #fff 1px solid;
	border-radius: 100px;
	transition: background 0.3s,color 0.3s,pacity 0.3s,transform 0.3s;
}

.links a:hover{
	color: #258ec5;
	background: #fff;
	transform: scale(1.1,1.1) ;
}

.links a:active{
	opacity: 0.7;
	transform: scale(0.9,0.9);
}

.links a:last-child{
	margin-bottom: 0;
}

footer{
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	position: fixed;
	text-align: center;
}

footer a{
	color: inherit;
}