/*
* 全局配置
*/
app{
	animation: fadeIn 2s;
}
@keyframes fadeIn {
	from {filter: blur(50px);}
	to {filter: blur(0px);}
}

section{
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
a{
	display: block;
	color: inherit;
	text-decoration: none;
}



/*
* Header
*/
#header{
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #1b2036 url("../img/background.jpg") no-repeat fixed center;
	background-size: cover;
	max-width: 100%;
}
#header > h1{
	margin: 2rem;
	text-align: center;
	color: white;
	font-size: 3em;
	font-weight: bold;
	text-shadow: 1px 1px 1px #ccc,
		2px 2px 1px #bbb,
		3px 3px 1px #aaa,
		4px 4px 1px #999,
		5px 5px 1px #888;
}
#header > small{
	margin: 1.6rem;
	display: inline-block;
	text-align: center;
	color: white;
	font-weight: bold;
	text-shadow: 0px 0px 1px #bbb,
		0px 0px 3px #aaa,
		0px 0px 5px #999;
}
#header > p{
	margin: 1.6rem;
	display: inline-block;
	text-align: center;
	color: white;
	font-size: 1.2em;
	font-weight: bold;
	text-shadow: 0px 0px 1px #fbf,
		0px 0px 3px #dad,
		0px 0px 5px #b9b;
}

/* 返回 */
#back{
	position: absolute;
	padding: 0.3rem;
}
#back > svg{
	width: 2.5rem;
	height: 2.5rem;
	filter: drop-shadow(0px 0px 1px #fff);
}



/*
* 成员图
*/
#image{
	width: 100%;
	height: auto;
	filter: drop-shadow(-5px 5px 5px #236);
	animation: floatBottom 1s;
}



/*
* 正文
*/
#text{
	flex: 1;
	margin: 0.3rem;
	padding-bottom: 1rem;
}
@media only screen and (orientation:landscape){
	#text{
		margin-left: 15vw;
		margin-right: 15vw;
	}
	#image{
		width: 70%;
		margin: 0 auto;
	}
}
#text.fadein{
	opacity: 0;
	animation: fadeIn 2.5s 0.5s forwards;
}

/* 图标 */
#icon{
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	margin: 1rem auto;
	filter: drop-shadow(-3px 3px 5px #666);
}


/* 正文 文本 */
#text > h2{
	margin: 0.5em;
	border-left: 4px solid #236;
	padding-left: 0.5em;
	color: #236;
}
#text > h2.left{
	float: left;
	animation: floatTop 2.5s 1s forwards;
}
#text > h2.right{
	float: right;
	animation: floatTop 2.5s 1s forwards;
}
#text h3{
	margin-left: 0.5em;
	border-left: 0.5rem solid #362;
	padding-left: 0.5em;
	color: #362;
}
#text p{
	text-indent: 2em;
}
#text .description{
	text-align: center;
	color: #223366;
	font-weight: bold;
}
/* 动画 */
@keyframes floatBottom{
	from{ margin-top: -2rem; }
	to{ margin-top: 0; }
}
@keyframes fadeIn{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
@keyframes floatTop{
	from{ margin-top: 2rem; }
	to{ margin-top: -2rem; }
}


/*
* 列表 通用配置
*/
#text ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
}
#text ul > li{
	display: block;
	/*margin: 1vw;*/
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
	text-weight: bold;
}


/* 成员列表/信息 */
#text ul.members > li,
#text ul.information > li{
	width: 100%;
	margin: 1vw;
	background-color: rgba(51, 34, 102, 0.133);
	color: #326;
	border: 1px solid #326;
	transition: background-color 0.2s, color 0.2s;
}
#text ul.members > li:hover,
#text ul.information > li:hover{
	background-color: #332266;
	color: #fff;
}


/* 作品列表 */
#text ul.works > li{
	margin: 1vw;
	width: 36%;
	background-color: rgba(51, 102, 34, 0.4);
	color: #362;
	transition: background-color 0.2s, color 0.2s;
	box-shadow: 3px 3px 5px rgba(51, 102, 34, 0.6);
}
#text ul.works > li:hover{
	background-color: #336622;
	color: #fff;
}
#text ul.works > li img{
	display: block;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	margin: auto;
	filter: drop-shadow(-3px 3px 5px #666);
}
#text ul.works > li span{
	display: block;
}


/* 联系我们/链接 */
#text ul.contact > li,
#text ul.links > li{
	width: 100%;
	margin: 1.6vw;
	padding: 0.6rem;
	background-color: rgba(102, 51, 34, 0.4);
	color: #632;
	border: 1px solid #632;
	transition: background-color 0.2s, color 0.2s;
}
#text ul.links > li{
	word-break: break-all;
}
#text ul.contact > li:hover,
#text ul.links > li:hover{
	background-color: #663322;
	color: #fff;
}
@media only screen and (orientation:landscape){
	#text ul.contact > li,
	#text ul.links > li{
		width: 60%;
	}
}


/* 赞助 */
#text ul.sponsor{
	display: flex;
	width: 100%;
	margin: 1rem 0;
}
#text ul.sponsor > li{
	display: inline-block;
	padding: 0;
	width: 33%;
	max-width: 360px;
	box-shadow: 1px 1px 3px gray;
}
#text ul.sponsor > li > img{
	width: 100%;
}

#text ul.afdian > li{
	width: 100%;
	margin: 1vw;
	background-color: #8462db;
	color: white;
	box-shadow: 1px 1px 3px gray;
}

#text .sponsorBtn{
	display: block;
	width: 60%;
	text-align: center;
	margin: 0.3rem auto;
	padding: 0.6rem;
	background-color: #8462db;
	color: #fff;
	font-size: 1.2em;
	border: none;
	border-radius: 6px;
	outline: none;
	box-shadow: 0px 0px 3px #8462db;
}




/*
* 错误页
*/
#error{
	flex: 1;
	margin: 0.3rem;
	text-align: center;
}
#error > h2{
	margin-left: 0.5em;
	border-left: 4px solid #236;
	padding-left: 0.5em;
	color: #236;
	text-align: left;
}
#error > p{
	margin: 0.6rem;
}
#error > a{
	display: block;
	margin: 0.3rem auto;
	padding: 0.6rem;
	background-color: #236;
	color: #fff;
	font-size: 1.2em;
	border: none;
	border-radius: 3px;
	outline: none;
	box-shadow: 0px 0px 3px #236;
}
#error > a:active{
	background-color: #125;
}

footer{
	padding: 0.5rem;
	text-align: center;
	background-color: #ddd;
}