/*
 * _(:з」∠)_
 * Created by Shuqiao Zhang in 2017.
 * https://zhangshuqiao.org
 */

/*
 * This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 */

@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap";
/*
nav高度 + 2*10px = body的margin top
shape用于长文，block用于块状
*/
body {
	background: linear-gradient(30deg, #77999a, #617c8a);
	background-attachment: fixed;
	color: #FFF;
	font-family: "Noto Sans SC", sans-serif;
	margin: 0;
	text-align: center;
}
#nav {
	background-color: rgba(10,10,30,0.3);
	margin: 0 0 10px 0;
	position: sticky;
	top: 0;
	transition: background-color 0.5s;
	z-index: 100;
}
.block {
	background-position: center;
	background-size: cover;
	height: 400px;
	margin-bottom: 10px;
	transition: filter 0.5s;
}
@media screen and (min-width: 1200px) {
	#nav {
		border-radius: 15px;
		margin: 10px 60px 10px;
		top: 10px;
	}
	.shape {
		margin-left: 200px;
		margin-right: 200px;
	}
	.block {
		border-radius: 15px;
		filter: brightness(0.95);
		margin-left: 100px;
		margin-right: 100px;
	}
	#pic {
		bottom: 20px;
		cursor: pointer;
		left: 0px;
		position: fixed;
		z-index: 100;
	}
}
/* 当屏幕尺寸小于1200px时，应用下面的CSS样式 */
@media screen and (max-width: 1199px) {
	.shape {
		margin-left: 0px;
		margin-right: 0px;
	}
	.block {
		margin-left: 10px;
		margin-right: 10px;
	}
	#pic {
		display: none;
	}
}
/*
h1 resource、app大字80px
p  正文小字
a  导航栏、底部栏以及block中出现，则限制大小，其余情况不限制，应个别设置font-size
*/
h1 {
	font-size: 5em;
	margin-top: 0px;
	padding-top: 100px;
}
p {
	font-size: 1.25em;
}
#nav a, .block a {
	font-size: 2.25em;
	line-height: 75px;
	margin: 0px 10px;
}
#nav a span:nth-child(1), .block a span:nth-child(1) {
	color: #EFB24B;
}
#nav a span:nth-child(2), .block a span:nth-child(2) {
	color: #003670;
}
#bottom {
	background-color: rgba(10,10,30,0.3);
	bottom: 0px;
	height: 25px;
	left: 0px;
	position: fixed;
	right: 0px;
	transition: background-color 0.5s;
	z-index: 100;
}
#bottom a {
	font-size: 1.125em;
}
#nav:hover, #bottom:hover {
	background-color: rgba(150,150,160,0.9);
}
.block:hover {
	filter: brightness(1.15);
}
.block:nth-last-of-type(1), .shape:nth-last-of-type(1) {
	margin-bottom: 35px;
}
/* margin bottom大小等于#bottom高度加上10px */
a {
	text-decoration: none;
	transition: color 0.5s;
}
.current-page {
	color: #000 !important;
}
#nav a:link, #bottom a:link, .block a:link {
	color: #FFF;
}
#nav a:visited, #bottom a:visited, .block a:visited {
	color: #FFF;
}
#nav a:hover, #bottom a:hover, .block a:hover {
	color: #000;
}