@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

:root{
	font-size: 20px;
	font-family: var(--fontFamily);

	/* Variables */
	--themeBlack: hsla(180, 8%, 8%, 1.0);
	--themeBlackTransparent: hsla(180, 8%, 8%, 0.6);
	--themeGray: hsla(180, 8%, 15%, 1.0);
	--themeRed: hsla(2, 100%, 63%, 1.0);
	--themeGreen: hsla(127, 67%, 64%, 1.0);
	--themeBlue: hsla(233, 56%, 64%, 1.0);
	--themeDarkerWhite: hsla(0, 0%, 50%, 1.0);
	--themeWhite: hsla(0, 0%, 96%, 1.0);
	--themeClear: hsla(180, 8%, 15%, 0.9);

	--linkBackground: hsla(180, 8%, 15%, 0.9);
	--linkCurrentPage: hsla(233, 56%, 64%, 0.8);
	--linkHover: hsla(2, 100%, 63%, 0.8);
	--linkActive: hsla(233, 56%, 64%, 0.8);

	--headerFontSize: 3rem;
	--navigationFontSizeScalar: 1.2;
	--normalFontSize: 1rem;
	--fontFamily: 'Noto Sans TC', Helvetica, sans-serif;
}

body{
	margin: 3rem 0 0 0;
	background-color: var(--themeGray);
	background: linear-gradient(var(--themeGray), var(--themeBlack));
	background-repeat: space;
	background-size: contain;
	background-position: center;
}

section{
	width: 100%;
	margin: auto;
	padding-top: 4%;
	padding-bottom: 4%;
}

footer{
	margin: 0;
	padding-top: 2%;
	padding-bottom: 3%;
	padding-left: 5%;
	padding-right: 5%;
	color: var(--themeDarkerWhite);
}

header{
	display: block;
	position: relative;
	width: 100%;
}

hr{
	border-color: var(--themeBlue);
}

h1{
	font-size: var(--headerFontSize);
	font-style: normal;
	color: var(--themeWhite);
	text-shadow: 0px 0px 0.4rem var(--themeWhite);
	text-align: center;
	margin: auto;
}

nav{
	display: block;
	width: 100%;
	margin: 0;
}

nav ul{
	display: block;
	position: fixed;
	animation-fill-mode: forwards;
	animation-name: navigationBar;
	animation-duration: 1.5s;
	overflow: hidden;
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 50;
}

nav ul li{
	float: left;
	z-index: inherit;
}

nav ul li.floatRight{
	float: right;
}

nav ul li.dropDownMenu{
	width: 3rem;
	display: none;
}

nav a{
	display: block;
	color: var(--themeWhite);
	padding: calc(var(--navigationFontSizeScalar) * 0.5rem);
	width: auto;
	height: calc(var(--navigationFontSizeScalar) * 2.5rem);
	margin-bottom: 0.5rem;
	text-shadow: 0px 0px 0.4rem var(--themeWhite);
	box-shadow: 0px 0px 0.5rem var(--themeWhite);
}

nav a.logo{
	padding: calc(var(--navigationFontSizeScalar) * 0.1rem);
	width: calc(var(--navigationFontSizeScalar) * 2.6rem);
	height: calc(var(--navigationFontSizeScalar) * 2.5rem);
}

a{
	font-size: calc(var(--navigationFontSizeScalar) * var(--normalFontSize));
	font-weight: normal;
	background: var(--linkBackground);
	color: var(--themeBlue);
	text-align: center;
	text-decoration: none;
	transition-property: background;
	transition-duration: 1000ms;
	transition-timing-function: ease-out;
}

a:hover{
	background: var(--linkHover);
	background: linear-gradient(var(--themeClear), var(--themeClear), var(--themeClear), var(--linkHover));
	transition-duration: 0ms;
}

a.currentPage, a#currentPage{
	background: var(--linkCurrentPage);
	background: linear-gradient(var(--themeClear), var(--themeClear), var(--themeClear), var(--linkCurrentPage));
	transition-duration: 0ms;
}

a:active{
	background: var(--linkActive);
	background: linear-gradient(var(--themeClear), var(--themeClear), var(--themeClear), var(--linkActive));
	transition-duration: 0ms;
}

figure.fullScreen{
	position: relative;
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}

figure:hover .overlay{
	opacity: 1;
}

img{
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}

img.logo{
	display: block;
	clear: both;
	width: auto;
	height: calc(var(--navigationFontSizeScalar) * 2.25rem);
	margin: auto;
}

p{
	padding-left: 5%;
	padding-right: 5%;
	text-align: justify;
	text-indent: 1rem;
	line-height: 1.5;
	word-wrap: break-word;
	word-break: keep-all;
	color: var(--themeWhite);
	overflow: auto;
}

.videoContainer{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.videoContainer iframe,
.videoContainer object,
.videoContainer embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.overlay{
	position: absolute;
	bottom: 0;
    left: 0;
    right: 0;
	margin: auto;
	background: var(--themeBlack);
	background: var(--themeBlackTransparent);
	width: 100%;
	transition: .4s ease;
	opacity: 0.0;
}

.important{
	color: var(--themeRed);
}

.responsiveFull{
	width: 100%;
	height: auto;
}

.hidden{
	display: none;
}

.hiddenWithLayout{
	visibility: hidden;
}

.row{
	display: flex;
	width: 100%
	flex-wrap: wrap;
	align-items: center;
}

.row::after{
	display: block;
	clear: both;
	content: "";
}

/* Total number add up to 12. */
.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.33%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}

*{
	box-sizing: border-box; /* Make margin, border, and padding count in total dimension. */
}

[class*="col-"]{
	float: left;
}

/* RWD */
@media screen and (max-width: 680px){
	nav ul li:not(:nth-child(2)){
		display: none;
	}

	nav ul li.dropDownMenu{
		display: block;
		float: right;
	}

	nav ul.responsiveNavigationList{
		position: fixed;
		animation-fill-mode: both;
		animation-name: navigationBarResponsive;
		animation-duration: 1.0s;
		animation-direction: forwards;
	}

	nav ul.responsiveNavigationList li{
		display: block;
		float: right;
		clear: right;
	}
}

/* Keyframs */
@keyframes navigationBar{
	0%{
		top: -200px;
	}

	100%{
		top: 0px;
	}
}

@keyframes navigationBarResponsive {
	0%{
		top: 0px;
		right: -200px;
	}

	100%{
		top: 0px;
		right: 0px;
	}
}