html
{
	--color-link:#5f5f5f;
	--color-link-hover:#ff963b;
	--color-enter:#fff;
	--color-title:#fff;
	--color-content:#222325;
	--font-alt:200 6vw "Comic Sans MS","Helvetica Neue","Microsoft Yahei","Microsoft Yahei",-apple-system,sans-serif;
}

.fade
{
	opacity:0;
	transition:all 1s;
	transform:translateY(200px);
}

.fade.in
{
	opacity:1;
	transform:none;
}

*
{
	box-sizing:border-box;
	-webkit-text-size-adjust:none;
}

html
{
	font-size:20px!important;
}

body,html
{
	height:100%;
	margin:0;
	padding:0;
	border:0;
}

body
{
	font-family:'Philosopher',Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif!important;
	-ms-flex-align:center;
	align-items:center;
	-ms-flex-pack:center;
	justify-content:center;
	min-height:100vh;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	-webkit-touch-callout:none;
}

h1{
  font-family:'Monoton', Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif!important;  
}
h2{
  font-family:'Lobster', Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif!important;  
}




ul
{
	margin:0;
	padding:0;
}

img
{
	border:0;
	vertical-align:middle;
}

body
{
	cursor:url(https://cdn.jsdelivr.net/gh/Tomotoes/images/blog/default.cur),auto!important;
}

a,img
{
	cursor:url(https://cdn.jsdelivr.net/gh/Tomotoes/images/blog/pointer.cur),auto!important;
}

a
{
	text-decoration:none;
	color:var(--color-link);
	outline:0;
}

@font-face {
  font-family: 'iconfont';  /* Project id 2701174 */
  src: url('//at.alicdn.com/t/font_2701174_tf6jf8beaw.woff2?t=1632731097238') format('woff2'),
       url('//at.alicdn.com/t/font_2701174_tf6jf8beaw.woff?t=1632731097238') format('woff'),
       url('//at.alicdn.com/t/font_2701174_tf6jf8beaw.ttf?t=1632731097238') format('truetype');
}

.icon
{
	display:block;
	width:1.5em;
	height:1.5em;
	margin:0 auto;
	fill:currentColor;
	font-family:iconfont!important;
	font-size:inherit;
	font-style:normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.icon-pan:before
{
	content:"\eabe";
}

.icon-twitter:before
{
	content:"\ecc1";
}

.icon-other:before
{
	content:"\e631";
}

.icon-email:before
{
	content:"\e908";
}

.icon-note:before
{
	content:"\e7de";
}

.icon-img:before
{
	content:"\e889";
}

.icon-feiji:before
{
	content:"\e824";
}

main
{
	overflow:hidden;
}

.content,main
{
	height:100vh;
	width:100%;
	position:relative;
}

.content
{
	background:radial-gradient(#313131,#0a0a0a);
}

.content-intro
{
	z-index:100;
	height:200vh;
}

.content-main
{
	position:fixed;
	top:0;
	left:0;
}

.content-inner
{
	position:relative;
}

.content-inner,.wrap
{
	width:100%;
	height:100vh;
}

.wrap
{
	display:0;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-ms-flex-direction:column;
	flex-direction:column;
	-ms-flex-align:center;
	align-items:center;
	-ms-flex-pack:center;
	justify-content:center;
	text-align:center;
}

.content-intro .content-inner
{
	background:var(--color-content);
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.shape
{
	height:100vh;
	width:100%;
	display:block;
	fill:var(--color-content);
}

.shape-wrap
{
	position:relative;
	z-index:10;
	margin:-5px 0 0;
	will-change:scroll-position;
}

.content-title
{
	font-family:Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif;
	font-size:4.7rem;
	font-weight:200;
	color:var(--color-title);
	line-height:1;
	margin-top:.8em;
	margin-bottom:.3em;
	animation:whiteShadow 1.5s ease-in-out infinite alternate;
	text-shadow:#452d2d 0 0 1px 0 0 1px 0 0 2px;
}

@media screen and max-width50em {
	.content-title
	{
		font-size:2rem;
	}
}

@keyframes whiteShadow
{
	0text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 5px #333,0 0 8px #333,0 0 9px #333,0 0 10px #333,0 0 15px #333;
}

to
{
	text-shadow:0 0 .5px #fff,0 0 1px #fff,0 0 1.5px #fff,0 0 2px #333,0 0 4px #333,0 0 5px #333,0 0 6px #333,0 0 8px #333;
}	
}

.content-subtitle
{
	color:#fff;
	font-family:Comic Sans MS,Helvetica Neue,Microsoft Yahei,-apple-system,sans-serif;
	font-size:1.2rem;
	font-weight:200;
	margin-bottom:2em;
	text-shadow:0 0 4px #fff;
}

@media screen and max-width1024px {
	.content-subtitle
	{
		font-size:1rem;
	}
}

@media screen and max-width768px {
	.content-subtitle
	{
		font-size:.8rem;
	}
}

@media screen and max-width560px {
	.content-subtitle
	{
		font-size:.7rem;
	}
}

@media screen and max-width480px {
	.content-subtitle
	{
		font-size:.6rem;
	}
}

.enter
{
	color:var(--color-enter);
	font-size:.8rem;
	letter-spacing:3px;
	white-space:pre;
	pointer-events:auto;
	transition:all .4s;
	z-index:999;
}

.enter:focus,.enter:hover
{
	color:var(--color-link-hover);
}

.arrow
{
	position:absolute;
	left:49.5%;
	top:95%;
	transform-origin:50% 50%;
	transform:translate3d(-50%,0,0);
}

.arrow-1
{
	animation:arrow-movement 2s ease-in-out infinite;
}

.arrow-2
{
	animation:arrow-movement 2s 1s ease-in-out infinite;
}

.arrow:after,.arrow:before
{
	background:#fff;
	content:"";
	display:block;
	height:3px;
	position:absolute;
	top:0;
	left:0;
	width:13px;
	box-shadow:1px 1px 20px 0 #fff;
}

.arrow:before
{
	transform:rotate(45deg) translateX(-10%);
	transform-origin:top left;
}

.arrow:after
{
	transform:rotate(-45deg) translateX(10%);
	transform-origin:top right;
}

@keyframes arrow-movement
{
	0opacity:0;
	top:92%;
}

70%
{
	opacity:1;
}

to
{
	opacity:0;
}	
}

.content-subtitle span
{
	animation:letter-glow .7s 0 ease both;
}

@keyframes letter-glow
{
	0opacity:0;
	text-shadow:0 0 1px hsla(0,0%,100%,.1);
}

66%
{
	opacity:1;
	text-shadow:0 0 20px hsla(0,0%,100%,.9);
}

77%
{
	opacity:1;
}

to
{
	opacity:.7;
	text-shadow:0 0 20px hsla(0,0%,100%,.2);
}	
}

.content-subtitle span:first-child
{
	animation-delay:50ms;
}

.content-subtitle span:nth-child(2)
{
	animation-delay:.1s;
}

.content-subtitle span:nth-child(3)
{
	animation-delay:.15s;
}

.content-subtitle span:nth-child(4)
{
	animation-delay:.2s;
}

.content-subtitle span:nth-child(5)
{
	animation-delay:.25s;
}

.content-subtitle span:nth-child(6)
{
	animation-delay:.3s;
}

.content-subtitle span:nth-child(7)
{
	animation-delay:.35s;
}

.content-subtitle span:nth-child(8)
{
	animation-delay:.4s;
}

.content-subtitle span:nth-child(9)
{
	animation-delay:.45s;
}

.content-subtitle span:nth-child(10)
{
	animation-delay:.5s;
}

.content-subtitle span:nth-child(11)
{
	animation-delay:.55s;
}

.content-subtitle span:nth-child(12)
{
	animation-delay:.6s;
}

.content-subtitle span:nth-child(13)
{
	animation-delay:.65s;
}

.content-subtitle span:nth-child(14)
{
	animation-delay:.7s;
}

.content-subtitle span:nth-child(15)
{
	animation-delay:.75s;
}

.content-subtitle span:nth-child(16)
{
	animation-delay:.8s;
}

.content-subtitle span:nth-child(17)
{
	animation-delay:.85s;
}

.content-subtitle span:nth-child(18)
{
	animation-delay:.9s;
}

.content-subtitle span:nth-child(19)
{
	animation-delay:.95s;
}

.content-subtitle span:nth-child(20)
{
	animation-delay:1s;
}

.content-subtitle span:nth-child(21)
{
	animation-delay:1.05s;
}

.content-subtitle span:nth-child(22)
{
	animation-delay:1.1s;
}

.content-subtitle span:nth-child(23)
{
	animation-delay:1.15s;
}

.content-subtitle span:nth-child(24)
{
	animation-delay:1.2s;
}

.content-subtitle span:nth-child(25)
{
	animation-delay:1.25s;
}

.content-subtitle span:nth-child(26)
{
	animation-delay:1.3s;
}

.content-subtitle span:nth-child(27)
{
	animation-delay:1.35s;
}

.content-subtitle span:nth-child(28)
{
	animation-delay:1.4s;
}

.content-subtitle span:nth-child(29)
{
	animation-delay:1.45s;
}

.content-subtitle span:nth-child(30)
{
	animation-delay:1.5s;
}

.content-subtitle span:nth-child(31)
{
	animation-delay:1.55s;
}

.content-subtitle span:nth-child(32)
{
	animation-delay:1.6s;
}

.content-subtitle span:nth-child(33)
{
	animation-delay:1.65s;
}

.content-subtitle span:nth-child(34)
{
	animation-delay:1.7s;
}

.content-subtitle span:nth-child(35)
{
	animation-delay:1.75s;
}

.content-subtitle span:nth-child(36)
{
	animation-delay:1.8s;
}

.content-subtitle span:nth-child(37)
{
	animation-delay:1.85s;
}

.content-subtitle span:nth-child(38)
{
	animation-delay:1.9s;
}

#background
{
	position:absolute;
	width:100%;
	height:100%;
	z-index:-1;
}

#card
{
	position:relative;
	width:100vw;
	height:100vh;
	color:#93979e;
	display:0;
	display:flex;
	-ms-flex-pack:center;
	justify-content:center;
	-ms-flex-align:center;
	align-items:center;
	text-align:center;
	transition:width .5s ease,height .5s ease;
}

#card .card-inner
{
	padding:0;
	border:0;
	width:35%;
}

@media screen and max-width1024px {
	#card .card-inner
	{
		width:45%;
	}
}

@media screen and max-width768px {
	#card .card-inner
	{
		width:50%;
	}
}

@media screen and max-width540px {
	#card .card-inner
	{
		width:60%!important;
	}
	
	#card .card-inner header h1
	{
		font-size:1rem!important;
	}
	
	#card .card-inner header h2,#card .card-inner ul li
	{
		font-size:.8rem!important;
	}
}

@media screen and max-width480px {
	#card .card-inner
	{
		width:90%!important;
	}
}

@media screen and max-width360px {
	#card .card-inner
	{
		width:100%!important;
	}
}

#card .card-inner header
{
	border-bottom:1px solid hsla(0,0%,100%,.1);
	margin-bottom:40px;
}

#card .card-inner header img
{
	border:3px solid #fff;
	border-radius:50%;
	box-shadow:0 0 1px 1px rgba(0,0,0,.3);
	transition:.4s ease-in-out;
}

#card .card-inner header h1
{
	margin:15px 15px 0;
	color:#fff;
	font-size:2rem;
	line-height:1.2em;
	font-weight:300;
}

#card .card-inner header h2
{
	color:#ccc;
	letter-spacing:3px;
	font-size:.8rem;
	font-weight:lighter;
}

#card .card-inner ul
{
	position:relative;
	margin:0;
	list-style-type:none;
	display:0;
	display:inline-flex;
	width:100%;
	-ms-flex-pack:distribute;
	justify-content:space-around;
	border-bottom:1px solid hsla(0,0%,100%,.1);
	padding-bottom:40px;
}

#card .card-inner ul li
{
	display:inline-block;
	transition:all .2s;
	width:100%;
	height:100%;
	border-left:.1px solid hsla(0,0%,100%,.1);
	border-right:.1px solid hsla(0,0%,100%,.1);
}

#card .card-inner ul li a
{
	color:#b6b6b6;
	transition:all .2s;
}

#card .card-inner ul li a:hover
{
	color:#f6f6f6;
	text-shadow:0 0 2px #f6f6f6;
}

#card .card-inner ul li:hover
{
	transform:translateY(-2px);
}