@charset "UTF-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/*background-color: #000;*/
}

.firstcontent{
	padding-top: 20vh;
	position: relative;
	background-color: #000;
	align-content: center;
}

.videobox{
	width: 40%;
	min-width: 550px;
	margin: auto;
	background-color: #000;
	position: relative;
}

.thesticky{
	width: 100%;
	position: sticky;
	top: 0;
	margin-bottom: 10em;
	background-color: #000;
}

.info{
	margin: auto;
	width: 100%;
	padding: 0;
	margin-bottom: 10em;
	background-color:#000;
}

.animationinfo{
	margin-top: 40vh;
	margin-bottom: 15em;
	width: 100%;
}

.personalinfo{
	justify-content: center;
	margin: auto;
	display: flex;
	padding: 0;/*15em*/
	background-color: #000;
}

video{
	width: 100%;
	display: flex;
	margin: auto;
	padding-top: 8vh;
}

img.headshot{
	max-height: 10em;
	margin-right: 5em;
	border-radius: 50%;
}

h1{
	color: #fff;
	font-family: 'Noto Sans TC', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 25px;
	cursor:default;
}
p{
	color: #fff;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: normal;
	font-size: 1em;
	cursor:default;
	line-height: 25px;
	
}


/*spine here*/
.spinecontent{
	height: 100vh;
	padding-top: 15em;/*--*/
}
@media (min-width : 800px ){
	.videobox{
		width: 40%;
		min-width: 550px;
	}
	p{
		line-height: 25px;
		font-size: 1em;
	}
}
@media (max-width : 800px ){
	.videobox{
		min-width: 250px;
		width: 80%;
	}
	
	p{
	line-height: 75px;
	font-size: 3em;
	}
}/*--*/