@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
*{
	margin:0;
	padding:0;
	font-family:'Poppins', sans-serif;
	transition: all 0.4s ease;
	scroll-behavior: smooth;
	scroll-padding: var(--scroll-padding, 4.5rem); /*70px scroll-padding-top*/
}
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-thumb
{
	background: cyan;
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{background: #00dbdb;}
/* Container for the progress bar */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px; /* Adjust width */
  height: 100vh; /* Full height */
  background: rgba(0, 0, 0, 0.1); /* Light gray background */
  z-index: 1000;
}

/* The actual progress bar */
.progress-bar {
  width: 100%;
  height: 0;
  background: black; /*rgb(85, 0, 128)*/
  transition: height 0.1s ease-in-out;
}
#noscript-warning 
{
	display: block;
	background-color: yellow;
	font-weight: 900;
	text-align: center;
	padding: .5vh;
}
#navbar
{
	position:fixed;
	height: 75px;
	width: 100%;
	background:black;
	justify-content: space-between;
	margin: auto;
	/* padding: 0 30px; */
	display: flex;
	align-items: center;
	z-index:9999;
}
#navbar .underline-animation
{
	/* display: inline-block; */
	position: relative;
	color: white;
}
#navbar .underline-animation > a > img /* width of the three social media icons*/
{
	width: 55px;
	height: 55px;
}
#navbar .underline-animation:after
{
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: white;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}
#navbar .underline-animation:hover:after
{
	transform: scaleX(1);
	transform-origin: bottom left;
}
#logoContainer
{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	margin: auto auto;
	user-select: none;
}
#logoContainer > a:hover{filter: brightness(130%);}
#logo
{
	width: 450px;
	height: 75px;
	display: none;
}
#navbar .nav-links
{
	color:white;
	display:flex;
	margin-right:20px;
}
#navbar .nav-links > li
{
	list-style:none;
	margin:8px;
}
#navbar .nav-links > li:nth-child(1) > a{color: red}
#navbar .nav-links > li:nth-child(2) > a{color: orange}
#navbar .nav-links > li:nth-child(3) > a{color: green}
#navbar .nav-links > li:nth-child(4) > a{color: #0096FF}
#navbar .nav-links-animation { border: 5px solid black; } /* add border around the links to avoid colliding of the effect and the text*/
#navbar .nav-links li a
{
	font-size:20px;
	text-decoration:none;
	opacity:0.7;
	font-weight:400;/*bold*/
}
#navbar .nav-links li a:hover
{
	opacity:1;
	background-color: white;
	border-radius:15px; /*circle focus effect*/
}
section
{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	color: black;
	font-size: 40px;
}
#MainPage
{
	background: #fff;
	text-align: center;
	height: 100vh;
}
#MainPage .mask /*the background image on the main page*/
{
	padding-top: 70vh; /*25vh*/
	margin: auto;
	background: url("main_page_mask.png") no-repeat;
	background-size: cover;
	width: 100%;
	height: 390px; /*430px;*/
	-webkit-mask-image: linear-gradient(black, transparent);
	mask-image: linear-gradient (black, transparent);
	animation: fade ease-in 2s;
	background-position: center center;
}
#MainPage .text /*the text masked under the background image*/
{
	position: absolute;
	justify-content: center;
	align-items: center;
	color: black;
	font-size: 50px; /*50px;/
	z-index: 1; /* Ensure text is above the mask */
	animation: fadeFonts ease-in 2s;
	opacity: 0.5;
	user-select: none;
}
#MainPage .downArrow /* the arrow icon on the main page*/
{
	position: absolute;
	bottom: 15px; /* 5px above the bottom */
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	animation: fade ease-in 2s;
}
#MainPage .downArrow > a {
	text-decoration: none;
	color: black;
	font-size: 24px;
}

#MainPage .downArrow > a > i {
	padding: 10px;
	transition: transform .7s;
}
#MainPage .downArrow > a:hover > i {
	transform: rotate(360deg);
	transition: color 1 ease;
	color: brown;
}
@keyframes colorFade /*arrow-hovering animation*/
{
	0%{color: black;}
	100%{color: brown;}
}
@keyframes fade /* the fade-in animation for background image*/
{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes fadeFonts /* the fade-in animation for masked texts*/
{
	0%{opacity:0;}
	100%{opacity:0.5;}
}
.dropdown-links > a
{
	color: white;
	padding: 7px 12px;
	text-decoration: none;
	display: block;
	text-align: center;
}
#navbar .nav-links .uploads .dropdown-links > a:hover /* selecting effect*/
{
	color:black;
	background-color: white;
	border-radius: 20px;
}
#navbar .nav-links .uploads .dropdown-links
{
	display: none;
	position: absolute;
	margin-left: -16px;  /*adjust position*/
	background-color: black;
	min-width: 100px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	z-index: 1;
}
#navbar .nav-links .uploads:hover .dropdown-links {display: block;}
#News
{
	font-size: 25px;
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	height: 80vh;
}

.universalTextAbove {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 5px;
	margin-top: 15px;
}

.thumbnailText {
  text-align: center;
  font-size: 20px;
  margin-bottom: 5px; /* Space between text and image */
}

.videoContainer {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.videoWrapper {
	display: none;
	margin-top: 10px; /* Add distance from the top */
}

.videoWrapper:nth-child(3) {
	display: block;
}

.resizedIframe {
	width: 100%;
	height: 370px;
}

.thumbnailContainer {
	display: flex;
	justify-content: space-around;
	margin-top: 20px; /* Margin between iframes and thumbnails */
}

.thumbnailContainer .w3-col {
	flex: 1;
	text-align: center;
	padding: 0 20px;
}

@media (width <= 1200px)
{
	input[type="email"]{width:fit-content;}
}
@media (width <= 1130px) /* only leaves "Uploads" link for contact*/
{
	.nav-links li:nth-child(2), .nav-links li:nth-child(3){display: none;}
	.nav-links li:nth-child(1), .nav-links li:nth-child(4)
	{
		position: absolute;
		right: 2vw;
		bottom: 20%;
	}
	.nav-links li:nth-child(1)
	{
		position: absolute;
		right: 12vw;
		bottom: 20%;
	}
	#navbar .underline-animation {display: none;} /* why can't YT and IG move their position correctly? how to select YT and IG (three elements) respectively?*/
	#menuButton 
	{
    position: static !important; 
    top: auto !important;
  }
}
@media (width <= 880px) 
{
	#navbar .underline-animation {display: none;}
	.nav-links li:nth-child(4)
	{
		position: absolute;
		right: 0vw;
		bottom: 20%;
	}
}
@media (width <= 715px) 
{
	.nav-links li:nth-child(1), .nav-links li:nth-child(4)
	{
		display: none;
	}
}
@media (width <= 560px)
{
	#navbar .underline-animation, #navbar .nav-links{display: none;}
	#navbar .nav-links{margin: auto;}
	#navbar .nav-links
	{
		margin-right: 1vw;
	}
	#navbar .nav-links > li > a
	{
		opacity: 1;
		font-size: 6vw;
	}
	#navbar .nav-links > li{margin: 2vw;}
	#News .resizedIframe
	{
		width: 100vw;
		height: 35vh;
	}
	#News
	{
		justify-content:flex-start;
		display:flex;
		text-align:left;
	}
}
.menuButton
{
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 5px;
  cursor: pointer;
	user-select: none;
}
.menuButton div
{
  width: 50px;
  height: 50px;
  position: relative;
	left: 3vw;
}
.menuButton span
{
  background: #fff;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s, width 0.5s;
}
/*rotate the lines for opening and closing animation*/
.menuButton .line1
{
  transform: translate(-50%, -20px);
}
.menuButton .line3
{
  transform: translate(-50%, 15px);
}
.openMenu .line1
{
  transform: translate(-50%, -50%) rotate(-45deg);
}
.openMenu .line3
{
  transform: translate(-50%, -50%) rotate(45deg);
}
.openMenu .line2
{
  width: 0;
}
#menu 
{
  position: relative;
  display: inline-block;
}
#menuPanel
{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: black;
  width: 100vw;
  height: 100vh;
  padding: 8px;
  color: white;
  font-size: 40px;
  animation: fadeInMenu 0.5s;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
@keyframes fadeInMenu /* fade-in and fade-out animation for the menu panel*/
{
    0% {opacity: 0;}
    100% {opacity: 0.8;}
}
#menuPanel > a:nth-child(1)
{
	margin-top: 20px;
  display: block;
  padding: 8px;
  text-decoration: none;
  color: white;
}
#menuPanel > a
{
  display: block;
  padding: 8px;
  text-decoration: none;
  color: white;
}
#menuPanel > a:nth-child(1)
{
  margin-top: 20px;
}
#menuPanel > a:hover 
{
  background-color: white;
	padding-left: 2vw;
  color: black;
  border-radius: 15px;
	background-clip: border-box;
}
#menuPanel.show 
{
  display: block;
  opacity: 0.8;
}
#SecondaryPage /*News + About*/
{background:linear-gradient(#00d5ff, #AC34E7);}
#About
{
	height: 80vh; /*88vh for mobile devices*/
	display: flex;
	flex-direction: column;
	padding-left: 2vw;
	font-size: 25px;
	box-sizing: border-box;
}
#About span, #About .AboutInfo3 > li > a
{
	color: hsl(0 0% 100% / 0);
	background-clip: text;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	background-image: linear-gradient(90deg, black, black);
	animation: scroll-reveal linear forwards;
	animation-timeline: view(y);
}
#About .AboutImportant1 span
{
	animation-range-start: cover 0vh;
	animation-range-end: cover 1vh;
}
#About .AboutImportant1 .AboutInfo1 
{
	animation-range-start: cover 1.5vh;
	animation-range-end: cover 11vh;
}
#About .AboutImportant2 span
{
	animation-range-start: cover -5vh;
	animation-range-end: cover -4vh;
}
#About .AboutImportant2 .AboutInfo2
{
	animation-range-start: cover -1vh;
	animation-range-end: cover 8.5vh;
}
#About .AboutImportant3 span
{
	animation-range-start: cover -3vh;
	animation-range-end: cover 1vh;
}
#About .AboutInfo3
{
	list-style-type: "\1F44D"; /*square*/
}
#About .AboutInfo3 > li > a
{
	animation-range-start: cover -5vh;
	animation-range-end: cover 2.5vh;
}
#About .AboutInfo3 > li > a:hover
{
	text-decoration: underline;
	text-decoration-color: black;
}
@keyframes scroll-reveal {to{background-size: 100% 100%;}}
#About ul
{
	margin-top: 0;
	padding-left: 1.5em;
}
.AboutImportant1 {margin-top: -1em;}
.AboutImportant2, .AboutImportant3 {margin-top: 0.5em;}
.AboutInfo3 > li:nth-child(1) {margin-top: 0.5em;}
.AboutInfo3 > li {margin-bottom: 0.5em;}
.AboutInfo3 > li:last-child{margin-bottom: 0em;}
#About li > strong
{
	display: inline-block;
	text-indent: -0.5em;
}
#About .AboutImportant3 > strong {
	display: inline-block;
	text-indent: -0.25em;
}
#About .AboutImportant
{
	font-size: 30px;
}
#toTopBtn /* scroll-to-top button*/
{
	display: none;
	position: fixed;
	bottom: 30px;
	right: 25px;
	z-index: 99;
	font-size: 30px;
	border: 2px white;
	background-color: orange;
	color: navy;
	cursor: pointer;
	padding: 15px;
	border-radius: 15px;
	overflow: hidden;
	transition: background-size 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}
#toTopBtn::before
{
	content: '';
	position: absolute;
	top: 100%; /* Initially position the gradient below the button */
	left: 0;
	width: 100%;
	height: 100%;
	background-color: navy; /* Initially set the whole background to navy */
	transition: top 0.3s ease-in-out; /* Transition the top position */
	z-index: -1;
}
#toTopBtn:hover
{
	color: orange;
	border-radius: 30px;
}
#toTopBtn:hover::before {top: 0;}
footer .submitbtn
{
	border: 2px solid black;
	border-radius:5px;
	width: 75px;
	line-height: 20px;
	background-color: black;
	color: white;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer .submitbtn:hover
{
	background-color:white;
	color:black;
	border: 2px solid white;
}
footer
{
	color: black;
	background-color: #AC34E7;
	font-size: 15px;
	white-space: nowrap;
	display: flex;
	justify-content: space-around;
	padding: 0 30px;
	position: relative;
	box-sizing: border-box;
}
footer *{display:inline-block;}
footer form
{
	width: 100%;  /* Full width of footer */
  display: flex;
  flex-direction: row;  /* Align input and button horizontally */
  justify-content: center;  /* Center form contents */
  align-items: center;  /* Vertically align items */
	gap: 10px;
	margin-left: 3vw;
}
footer > div:nth-child(1) 
{
  margin-right: auto;
}
#privacyPolicy 
{
  margin-right: 14vw; /* Privacy Policy 和 Report Issues 之間留點空隙 */
}
#copyright
{
	position: absolute; /*Ensure correct stacking*/
	user-select: none;
	text-align: center;
	justify-content: center;
}
#reportIssues a, #privacyPolicy a
{
  text-decoration:none;
  color: black;
}

#reportIssues:hover, #privacyPolicy:hover
{
  background-image:linear-gradient(90deg, grey, black);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: select-animation 250s linear infinite;
}
@keyframes select-animation {to {background-position: 5000vh;}}
hr /* horizontal line for section-dividing purpose*/
{
	margin:auto;
	text-align:center;
	/*width:99.8%; 100vw*/
	height:0.1px;
}
#email
{
	border:	none;
	border-radius: 5px;
	align-items: center;
	height: 23px;
	font-size: 15px;
}