@charset "utf-8";

@font-face {
	font-family: "plantc";
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Source Han Serif";
	src:
		url("fonts/SourceHanSerifCN-SemiBold.woff2") format("woff2"),
		url("fonts/SourceHanSerifCN-SemiBold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

:root {
	--color-font: #404040;
	--color-background: #ffffff;
	--view-minmax: calc((100vw - 500px) / (1920 - 500));
}

body {
	background: var(--color-background);
	font-family: "plantc", serif;
	color: var(--color-font);
	margin: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body:lang(zh) {
	font-family: "plantc", "Source Han Serif", serif;
}

h1, h2, p {
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	font-weight: normal;
}

a {
	color: var(--color-font);
	text-decoration: none;
}

section {
	padding: var(--padding);
	box-sizing: border-box;
}

section > p,
section .content p,
#more h2 {
	--size-p: calc(22px + (32 - 22) * var(--view-minmax));
	line-height: calc(var(--size-p) + 12px);
	font-size: var(--size-p);
	text-align: center;
	margin-bottom: 1em;
}


/*************
	Header
**************/

#intro {
	--size-h1: calc(32px + (88 - 42) * var(--view-minmax));
	--size-h2: calc(20px + (28 - 20) * var(--view-minmax));
	min-height: 110vh;
}

@media (min-width: 600px) {
	#intro {
		display: flex;
		width: 100vw;
		justify-content: center;
		align-items: center;
	}
}

#intro header {
	display: grid;
	grid-template-columns: minmax(20%, 280px) 20px minmax(max-content, 1fr) 20px minmax(20%, 280px);
	grid-template-rows: 16px 55px minmax(max-content, 1fr) 35px 125px;
	grid-template-areas:
		".  . . . ."
		"ls . h1 . rs"
		"ls . h1 . rs"
		"ls . h2 . rs"
		"ls . h2 . rs";
	transform: translateY(-128px);
}

#intro h1 {
	grid-area: h1;
	line-height: calc(var(--size-h1) * 1.382);
	font-size: var(--size-h1);
	align-self: center;
	transform: translateZ(0);
}

#intro h2 {
	grid-area: h2;
	line-height: calc(var(--size-h2) + 10px);
	font-size: var(--size-h2);
	opacity: .8;
}
#intro h2:lang(zh) {
	--size-h2: calc(22px + (34 - 22) * var(--view-minmax));
}

.slice {
	width: 80%;
	height: 100%;
	background-image: url("../images/index.png");
	background-size: cover;
	box-shadow: 0 20px 90px 0 rgba(0, 0, 0, .08), 0 9px 30px 0 rgba(0, 0, 0, .1);
}
.slice.left {
	grid-area: ls;
	background-position: left;
}
.slice.right {
	grid-area: rs;
	background-position: right;
}

@media (max-width: 900px) {
	#intro header {
		grid-template-columns: 50px 110px 1fr 150px;
		grid-template-rows: 190px 16px 100px 180px 120px;
		grid-template-areas:
			". h1 h1 h1"
			". . . rs"
			". h2 h2 rs"
			"ls ls . rs"
			"ls ls . .";
		transform: translateY(10vh);
	}
	#intro h2 {
		grid-column-end: rs;
	}
}

#content {
	--padding: 1.25em;
	padding-bottom: 220px;
	margin-bottom: -220px;
	overflow: hidden;
}

#globe {
	display: block;
	margin: 20vh auto;
	transform-origin: top;
}

@media (max-width: 36em) {
	#content p {
		text-align: left;
	}
	#content br {
		display: none;
	}
}

#photography {
	--padding: 1.25em;
	display: flex;
	flex-direction: column;
	width: 100vw;
	min-height: 100vh;
	margin: 8% 0 6%;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
#photography img {
	width: 280px;
	height: 193.33px;
	margin: 16px;
	border: 10px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 20px 90px 0 rgba(0, 0, 0, .08), 0 9px 30px 0 rgba(0, 0, 0, .1);
	will-change: transform;
}
#group {
	width: 645px;
	transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg);
	will-change: transform;
}

@media (max-width: 600px) {
	#photography {
		margin: 100px 0;
	}
	#photography p:lang(en) {
		text-align: left;
	}
	#photography br:lang(en) {
		display: none;
	}
}

#programming {
	--padding: 0;
	display: flex;
	padding-top: 20vh;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 1920px) {
	#programming {
		align-items: center;
	}
}
@media (max-width: 536px) {
	#programming p {
		text-align: left;
		padding: 1.25em;
		word-break: break-all;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	#programming br {
		display: none;
	}
}
#nodes {
	margin: 20vh 0;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
}
#nodes::-webkit-scrollbar {
	width: 0;
	height: 0;
}
@media (max-width: 600px) {
	#nodes {
		margin: 10vh 0;
	}
}
#nodes svg {
	margin-top: -160px;
}
#nodes text {
	font-family: Monaco, Consolas, "Lucida Console", monospace;
	font-size: 16px;
}
#nodes path {
	opacity: .3;
	stroke-dasharray: 1200;
}
#node-scroll-button {
	position: absolute;
	right: 20px;
	padding: 10px;
	margin-top: 300px;
	animation: bounce 2s infinite;
	cursor: pointer;
	transition: opacity .3s ease-in;
}
#nodes.reached #node-scroll-button {
	opacity: 0;
}
@media (min-width: 1800px) {
	#node-scroll-button {
		opacity: 0;
	}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(0);
	}
	40% {
		transform: translateX(-30px);
	}
	60% {
		transform: translateX(-15px);
	}
}

#design {
	--padding: 1.25em;
	min-height: 68vh;
}
#design p + p {
	margin-top: 6em;
}
@media (max-width: 600px) {
	#design p {
		text-align: left;
	}
	#design br {
		display: none;
	}
}

.products .content {
	width: 33.3%;
	padding: 10vw;
	padding-right: 0;
    padding-top: 0;
	box-sizing: border-box;
}
.products .content p {
	color: #270505;
	text-align: left;
}
.products .content p + span {
	font-size: 20px;
	color: #270505;
}
.products .button {
	position: relative;
	display: inline-block;
	color: #fff;
	padding: .65em 2em .5em 1em;
	font-size: 26px;
}
.products .button::after {
	content: " ";
	background-image: url("images/chevron.svg");
	position: absolute;
	width: 12px;
	height: 22px;
	top: .675em;
	right: .85em;
}
.products .button:lang(zh) {
	font-size: 22px;
	padding: 0.55em 2.5em .75em 1em;
}
.products .button:lang(zh)::after {
	top: .8em;
	right: 1em;
}
.products .app-store-badge {
	height: 60px;
}
.products .showcase {
	width: 50%;
}
#camarts p {
	--size-p: calc(18px + (26 - 18) * var(--view-minmax));
	color: #fdfdfd;
	text-align: left;
}
#camarts p span {
	color: #aaa;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
	#camarts p span {
		padding-top: 6px;
		padding-bottom: 1px;
		color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
	}
	#camarts p span.a {
		background-image: linear-gradient(to right, #24c6dc, #514a9d);
	}
	#camarts p span.b {
		background-image: linear-gradient(to right, #f3cd13, #f35858);
	}
	#camarts p span.c {
		background-image: linear-gradient(to right, #dd5e89, #f7bb97);
	}
	#camarts p span.d {
		background-image: linear-gradient(to right, #3ca55c, #b5ac49);
	}
	#camarts p span.e {
		background-image: linear-gradient(to right, #4cb8c4, #3cd3ad);
	}
	#camarts p span.f {
		background-image: linear-gradient(to right, #4776e6, #8e54e9);
	}
}
#camarts .content {
	width: 38.2%;
}
#camarts .button {
	background-image: linear-gradient(to right, #c04848 0%, #480048);
	transition: .5s ease-in;
}
#camarts .button:hover {
	box-shadow: 0 6px 90px 0 #c04848, 0 8px 60px 0 #480048;
	transform: scale(1.1);
}
#camarts .button,
#camarts-logo {
	opacity: 0;
	transition: .3s ease-out;
}
#camarts.active .button,
#camarts.active #camarts-logo {
	opacity: 1;
}
#camarts-logo {
	height: 60px;
}
#camarts .showcase {
	width: 0%;
	transition: width .6s ease-out;
}
#camarts.active .showcase {
	width: 700px;
}
#camarts .showcase .container {
	position: absolute;
	top: 0;
	right: 0;
	width: 1000px;
	height: 100%;
	overflow: hidden;
}
#camarts .showcase img {
	max-width: 1000px;
	position: absolute;
	right: -300px;
	transition: transform 1s ease-out;
	will-change: transform;
}
#camarts.active .showcase img {
	transform: translateY(0);
}
#camarts-showcase-a {
	top: 10%;
	transform: translateY(100%);
}
#camarts-showcase-b {
	top: 29%;
	transform: translateY(166%);
}
#camarts-showcase-c {
	top: 50%;
	transform: translateY(200%);
}
#backdrop {
	position: absolute;
	background-color: #000;
	width: 100vw;
	height: 100%;
	bottom: 0;
	z-index: -1;
}
.products {
	--padding: 1.25em;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
#markly {
	background-color: #ffffff;
	overflow: hidden;
}
#vary {
	background-color: #3d3d4a;
	overflow: hidden;
}
#markly-logo,
#vary-logo {
	height: 60px;
	border-radius: 60px;
	box-shadow: 0 16px 22px 0 rgba(0, 0, 0, .3);
	margin-bottom: 2em;
}
#markly .showcase {
	min-height: 580px;
}
#markly .showcase img {
	position: absolute;
	max-width: 700px;
	min-width: 500px;
	width: 40vw;
}
#markly-showcase-a {
	top: 0;
	right: 0;
}
#markly-showcase-b {
	top: 20vw;
	right: 5%;
}
#vary .showcase {
	min-height: 660px;
}
#vary .showcase img {
	position: absolute;
	max-width: 700px;
	min-width: 400px;
	width: 38.2vw;
}
#vary-showcase-a {
	top: 5%;
	right: 0;
}
#vary-showcase-b {
	top: 10%;
	right: 10%;
}
#vary-showcase-c {
	top: 15%;
	right: 20%;
}
@media (min-width: 2400px) {
	#camarts .showcase img {
		right: -100px;
	}
}
@media (min-width: 2800px) {
	#camarts .showcase img {
		right: 100px;
	}
	#camarts .showcase .container,
	#camarts.active .showcase {
		width: 1100px;
	}
}
@media (max-width: 1500px) {
	#markly-showcase-a {
		top: 10%;
	}
}
@media (max-width: 1500px) {
	#markly-showcase-a {
		right: -10%;
	}
	#markly-showcase-b {
		right: -15%;
	}
}
@media (max-width: 1440px) {
	.products {
		flex-direction: column;
		justify-content: start;
	}
	.products .content {
		padding-top: 5em;
		width: 100%;
		max-width: 800px;
	}
	.products .showcase {
		position: relative;
		width: 50%;
	}
	#camarts .content {
		padding-top: 38.2vh;
		padding-bottom: 3.75em;
		width: 100%;
	}
	#camarts-logo {
		height: 40px;
	}
	#camarts .showcase,
	#camarts.active .showcase {
		position: relative;
		max-width: 800px;
		width: 100%;
		height: 620px;
		margin-bottom: calc(0em - var(--padding));
		margin-right: calc(0em - var(--padding) * 2);
	}
	#camarts .showcase .container {
		position: relative;
		width: 100%;
	}
	#camarts .showcase img {
		max-width: 800px;
		right: auto;
		transform: translateY(0);
	}
	#camarts-showcase-a {
		top: 0;
	}
	#camarts-showcase-b {
		top: 19%;
	}
	#camarts-showcase-c {
		top: 38%;
	}
	#markly-showcase-a {
		top: 0;
		right: auto;
	}
	#markly-showcase-b {
		right: auto;
	}
	#vary-showcase-a {
		right: -10%;
	}
	#vary-showcase-b {
		top: 50px;
		right: 10%;
	}
	#vary-showcase-c {
		top: 100px;
		right: 30%;
	}
}
@media (max-width: 1200px) {
	.products .button {
		padding: .65em 2em .5em 1em;
		font-size: 22px;
	}
	.products .button::after {
		top: .6em;
	}
	.products .button:lang(zh) {
		font-size: 18px;
	}
}
@media (max-width: 650px) {
	.products .showcase {
		width: 100%;
	}
	#markly-logo,
	#vary-logo,
	.products .app-store-badge {
		height: 50px;
	}
	#vary-showcase-a {
		right: -50px;
	}
	#vary-showcase-b {
		right: 50px;
	}
	#vary-showcase-c {
		right: 150px;
	}
}
@media (max-width: 500px) {
	#markly-showcase-a {
		right: -20vw;
	}
	#markly-showcase-b {
		top: 33vh;
		right: -30vw;
	}
}
#more {
	padding: 10vh 1.25em 6vh;
}
#more h2 {
	--size-p: 26px;
	text-align: left;
	margin-bottom: .35em;
}
#more .container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	max-width: 960px;
	margin: 6vh auto;
}
#more .item {
	flex-basis: 320px;
	padding: 0 1.75em;
	margin-top: 3.75em;
	box-sizing: border-box;
}
#social-media .tag {
	display: block;
	padding: 1em 0;
	transition: .2s ease-out;
}
#social-media .tag + .tag {
	border-top: 1px solid #ddd;
}
#social-media .tag:hover {
	padding-left: 1em;
	background-color: #fff;
	box-shadow: 0 16px 60px 0 rgba(0, 0, 0, .08), 0 6px 12px 0 rgba(0, 0, 0, .1);
}
#social-media .tag + .tag:hover {
	border-top: 1px solid #fff;
}
#talk img {
	width: 100%;
	margin-bottom: 1em;
	float: left;
	border-radius: 2px;
}
#talk p {
	line-height: 20px;
	margin-bottom: 1em;
}
#talk p a {
	display: inline-block;
	position: relative;
}
#talk p a::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: bottom right;
	
	transition: transform .3s ease-in-out;
}
#talk p a:first-child::after {
	color: #f00;;
	background-color: #f00;
}
#talk p a:last-child::after {
	color: #2593ff;
	background-color: #2593ff;
}
#talk p a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

#mpwx img {
	width: 80px;
}
#mpwx .item-content div:first-child {
	margin-bottom: 2em;
}
#messages > a {
	display: block;
	text-align: center;
	transition: color .2s ease-in;
}
#messages > a:hover {
	color: #df5f5f;
}
#messages:not(.fetched) h2,
#messages:not(.fetched) a {
	display: none;
}
#messages.item {
	flex-basis: 960px;
	border-left: none!important;
}
#messages .item-content {
	column-count: 3;
	column-gap: 2em;
}
@media (max-width: 600px) {
	#messages .item-content {
		column-count: 2;
	}
}
@media (max-width: 450px) {
	#messages .item-content {
		column-count: 1;
	}
}
#messages .message {
	margin-bottom: 1.75em;
	font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Helvetica Neue", sans-serif;
	break-inside: avoid;
}
#messages .message header {
	margin-bottom: .33em;
}
#messages .message header img {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 26px;
	margin-right: .33em;
	border-radius: 100%;
}
#messages .message header h3 {
	display: inline-block;
	vertical-align: middle;
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: 16px;
}
#messages .message-content {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: .5px;
}
#guestbook {
	flex-basis: 640px!important;
	border-left: none!important;
}
#guestbook .inner-container {
	display: flex;
	flex-direction: column;
}
#guestbook textarea {
	height: 8em;
	min-height: 6em;
	padding: 1em;
	margin-bottom: .5em;
	resize: vertical;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 20px;
	line-height: 24px;
}
#guestbook label {
	font-size: 18px;
	margin-bottom: .5em;
}
#guestbook input {
	font-size: 18px;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: .5em;
	margin-bottom: .5em;
}
#guestbook input + p,
#guestbook textarea + p {
	color: #666;
	margin-bottom: 1.75em;
}
#guestbook button {
	margin: 1em auto;
	padding: .75em 1.5em;
	font-size: 18px;
	color: var(--color-background);
	background-color: var(--color-font);
	border: none;
	border-radius: 99px;
	cursor: pointer;
	transition: opacity .5s ease-out;
}
#guestbook button.inactive {
	opacity: .1;
	cursor: default;
	pointer-events: none;
}
#guestbook button.posting {
	background-color: var(--color-background);
	pointer-events: none;
}
#guestbook button.posting::after {
	content: "";
	display: inline-block;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: var(--color-font);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: donut-spin 1.2s linear infinite;
}
@keyframes donut-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
#guestbook textarea:focus,
#guestbook button:focus {
	outline: none;
}
#guestbook #step-2,
#guestbook #step-3,
#guestbook .second-step #step-1,
#guestbook .third-step #step-1,
#guestbook .third-step #step-2 {
	display: none;
}
#guestbook .second-step #step-2,
#guestbook .third-step #step-3 {
	display: flex;
}
@media (min-width: 999px) {
	#more .item + .item {
		border-left: 1px solid #ddd;
	}
}
@media (max-width: 480px) {
	#more .item {
		flex-basis: 100%;
	}
}
footer {
	padding-bottom: 2em;
}
footer p {
	text-align: center;
}
footer p.weak {
	font-size: 14px;
	opacity: .6;
}

#switch-language {
	position: absolute;
	background-color: var(--color-background);
	top: 1em;
	right: 1em;
	border: none;
	font-size: 12px;
	cursor: pointer;
}
