html,body {height:100%; margin:0; scroll-behavior:smooth; font-family:Verdana,sans-serif;}

div#container {min-height:100%; overflow:auto; -webkit-overflow-scrolling:touch;}
div#container div.page {background-color:dodgerblue; background-size:cover; background-repeat:no-repeat; background-position:center center; position:relative; padding:40px; box-sizing:border-box; font-size:18px; border:1px solid rgba(0,0,0,0.25); min-height:25%; transition:.5s;}
div#container div.page:empty {display:none;}
div#container div.page div.content {max-width:1000px; margin:0 auto;}
div#container div.page h2 {text-align:center; font-weight:100;}
div#container div.page p {line-height:2em; transition:.5s;}
div#container div#page00 {height:100vh; background-color:#FFF; background-image:url('profile.jpg'); background-attachment:fixed; background-position:90% 0; transition:.5s; /*box-shadow:9999px 9999px dodgerblue inset;*/}
div#container div#page00 div.badge {position:absolute; right:0; top:67%; transform:translate(0,-50%); text-align:center; padding:24px 40px; font-family:Lato, sans-serif; font-weight:300; min-width:100px; box-sizing:border-box; transition:.5s; background-color:rgba(0,0,0,0.15); color:rgba(255,255,255,0.8); border-radius:40px;}
div#container div#page00 div.badge {right:50%; transform:translate(50%,-50%);}
div#container div#page00 div.badge > * {margin:6px 0;}
div#container div#page00 div.badge div.name {font-size:5em; font-style:italic; /*text-transform:uppercase;*/ /*font-variant:small-caps;*/}
div#container div#page00 div.badge div.occupation {font-size:18px;}
div#container div#page00 div.badge div.mission {font-size:16px;}
div#container div#page00 div.badge div.learnMore {border:2px solid #DDD; color:#DDD; background:rgba(0,0,0,0); display:inline-block; margin-top:24px; padding:18px 24px 16px; cursor:pointer; transition:.5s;}
div#container div#page00 div.badge div.learnMore:hover {background:#DDD; color:#222;}
div#container div#page01 {background-image:url('pic/story.jpg');}
div#container div#page01 img {float:right; border-radius:4px; width:320px; max-width:100%; margin-right:24px; margin-bottom:16px; transition:1s;}
div#container div#page02 {background-image:url('pic/code.jpg'); background-color:#FFF; box-shadow:9999px 9999px rgba(255,255,255,0.75) inset; color:#000;}
div#container div#page03 {background-image:url('pic/education.jpg'); background-color:#000; box-shadow:9999px 9999px rgba(0,0,0,0.45) inset; color:#FFF;}
div#container div#page04 {background-image:url('pic/sentient-robot-thinking.jpg'); background-color:#FFF; box-shadow:9999px 9999px rgba(255,255,255,0.75) inset; color:#000;}
div#container div#page05 {/*background-image:url('pic/brain.jpg'); background-color:#000;*/ background-color:transparent; box-shadow:9999px 9999px rgba(0,0,0,0.5) inset; color:#FFF; overflow:hidden;}
div#container div#page05 video#bgvid {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1; /*width:100%; height:100%;*/ min-width:100%; min-height:100%;}
div#container div#page06 {background:linear-gradient(red,orange,green,blue);}
div#container div#page07 {background:linear-gradient(red,orange,green,blue);}
div#container div#page08 {background:linear-gradient(red,orange,green,blue);}
div#container div#page09 {background-image:url('pic/clouds.jpg'); box-shadow:9999px 9999px rgba(255,255,255,0.4) inset;}
div#container div#page10 {display:none;}
/*div#container div.page:before {height:100%; background-size:cover; background-repeat:no-repeat; background-position:center center;}*/
/*div#container div.page.parallax {background-position:center 0;}*/

div#container div.page.polygon:before,
div#container div.page.polygon:after {width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; content:'';}
div#container div.page.polygon:before {z-index:-2; background-color:#2a5f98; clip-path:polygon(63% 69%, 100% 9%, 100% 100%, 5% 100%);}
div#container div.page.polygon:after {z-index:-1; background-color:#226dbc; clip-path:polygon(72% 74%, 100% 27%, 100% 100%, 5% 100%);}

/* mobile(xs,sm) */
@media screen and (max-width:767px) {
	div#container div.page {font-size:15px;}
	div#container div.page p {line-height:1.5em;}
	div#container div#page00 {background-attachment:scroll;}
	div#container div#page00 div.badge {top:50%; right:50%; transform:translate(50%,-50%); min-width:100%; background-color:rgba(0,0,0,0.05);}
	div#container div#page00 div.badge div.name {font-size:3em;}
	div#container div#page00 div.badge div.occupation {}
	div#container div#page00 div.badge div.occupation div {margin:.35em 0;}
	div#container div#page00 div.badge div.mission {}
	div#container div#page00 div.badge div.learnMore {}
	div#container div.desktop {display:none;}
	div#container div.mobile {display:block;}
	/*div#container div#page00:before {background-image:url('profile.jpg'); background-attachment:scroll; transition:.5s; position:fixed; top:0; right:0; bottom:0; left:0; content:'';}*/
}
/* tablet(md), desktop(lg,xl) */
@media screen and (min-width:768px) {
	div#container div#page00 div.badge div.occupation div {display:inline-block;}
	div#container div.mobile {display:none;} 
	div#container div.desktop {display:block;}
}