/**
 * Failed to minify the file using clean-css v5.3.3. Serving the original version.
 * Original file: /gh/heartyme/web.hearty.me@de37508c56e4e3d6e328675bd874e073c3866694/css/feed.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
@charset "UTF-8";

@import url(//cdn.jsdelivr.net/npm/cssgram@0.1.3/source/css/cssgram.min.css);

*, 
*::before, 
*::after{
	box-sizing: inherit;
}
html{
	box-sizing: border-box;
	appearance: none;
}
body{
	margin: 0;
	overscroll-behavior: none;
	background-image: url(//i.hearty.app/fHsfWPa.jpg);
	background-repeat: repeat;
	background-position: center;
}
	body, 
	.feed, 
	.feed div{
		scrollbar-width: none;
	}
	body::-webkit-scrollbar, 
	.feed::-webkit-scrollbar, 
	.feed div::-webkit-scrollbar{
		display: none;
		width: 0;
		background: transparent;
	}

a:link, 
a:visited, 
a:hover, 
a:active{
	text-decoration: none;
	cursor: pointer;
	color: inherit;
}
.feed{
	display: flex;
	flex-flow: row-reverse nowrap;
	align-items: stretch;
	width: 100%;
	max-width: 1200px;
	height: auto;
	overflow-x: auto;
	overflow-y: hidden;
	overflow-y: clip;
	margin: 0 auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	background-image: url("//i.hearty.app/HyCw2lg.png");
	background-repeat: repeat;
	background-position: center;
}
.feed li[data-gender]::before, 
.page article a[href]::after, 
.goog-te-gadget-simple::before{
	font-family: "Font Awesome 5 Pro";
	margin-right: .4em;
	font-weight: 300;
}

/* handle Pull2Refresh CSS */
.feed > div:nth-child(1){
	flex-flow: column wrap;
}
.feed [data-block]{
	height: 100%;
	white-space: nowrap;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow-y: auto;
}
.feed [data-fbox]{
	display: flex;
	align-items: center;
	justify-content: center;
}
.feed .pager, 
.feed .bouncingLoader, 
.feed .no_more{
	text-align: center;
	padding: 1em 0;
	letter-spacing: 1px;
	color: #444;
}
.feed .bouncingLoader{
	display: flex;
	justify-content: center;
	opacity: 0;
}
.feed .no_more{
	display: none;
}
.feed .no_more[title]::after{
	content: attr(title);
}

.feed_wall{
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	height: 100vh;
	overflow: auto;
	border: solid 1px #dee2e6;
	scroll-behavior: smooth;

	/* iOS Notch */
	padding-top: env(safe-area-inset-top, 0);
}
	.feed_wall::after{
		content: "";
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 2.5em;
		background: rgba(255,255,255,.5);
		background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1));
		pointer-events: none;
	}

	.feed_wall article{
		position: relative;
		margin: 1em auto;
		padding: .8em 1em;
		width: 80%;
		height: auto;
		border-radius: .75em;
		box-shadow: rgba(0,0,0,.1) 1px 1px 1em 1px;
		color: #444;
		background: rgba(255,255,255,.8);
		line-height: 2;
		letter-spacing: 2px;
		transition: box-shadow .2s ease-in;
	}
		.feed_wall article[data-username="hearty"], 
		.feed_wall article[data-username="nien"], 
		.feed_wall article[data-username="jianny"]{
			border: 1px solid #c68e78;
		}
			.feed_wall article[data-username="hearty"]::before, 
			.feed_wall article[data-username="nien"]::before, 
			.feed_wall article[data-username="jianny"]::before{
				font-family: "Font Awesome 5 Pro";
				font-weight: 300;
				content: "\f336";
				float: right;
				margin-top: .5em;
				font-size: larger;
				color: #c68e78;
			}
			.feed_wall article[data-username="hearty"]::after, 
			.feed_wall article[data-username="nien"]::after, 
			.feed_wall article[data-username="jianny"]::after{
				position: absolute;
				content: "Team";
				top: -1em;
				right: 2em;
				color: #c68e78;
				background: #fff;
				padding: .1em .6em;
				border: inherit;
				border-radius: 5px;
				font-size: xx-small;
				letter-spacing: 1px;
			}

		.feed_wall article:hover{
			box-shadow: rgba(0,0,0,.3) 1px 1px 1em 1px;
		}
		.feed_wall article[data-active]{
			box-shadow: 1px 1px 6px 8px rgba(87,63,55,.3);
		}

	.feed_wall article h2, 
	.story article h2{
		white-space: pre-wrap;
		text-align: justify;
		margin: .2em auto;
	}
	/* 標題不換行版本
	.feed_wall article h2, 
	.story article h2{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		overflow: clip;
		margin: .2em auto;
	}
	*/
		.feed_wall article h2[title]::before, 
		.story article h2[title]::before{
			content: attr(title);
		}

	.feed_wall p, 
	.story p{
		text-align: justify;
		text-justify: inter-character;
		line-break: loose;
		font-size: smaller;
		white-space: pre-line;
		word-break: break-word;
		letter-spacing: 1px;
	}
	.story .reminder{
		display: block;
		font-size: x-small;
		color: #cd5c5c;
		text-overflow: ellipsis;
		cursor: pointer;
	}

	.feed_wall [data-last]{
		position: relative;
		display: block;
	}
		.feed_wall [data-last]::before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,.6);
			background: linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,1));
		}

	/* 連結 */
	.page article a{
		color: #bb785e;
		margin: 0 .1em;
		padding: .3em;
	}
	.page article a[href]{
		border: 1px dashed #ffd1a4;
		border-radius: .5em;
	}
		.page article a[href]::after{
			content: "\f08e";
		}

	.page article a:link, 
	.page article a:visited, 
	.page article a:hover, 
	.page article a:active{
		color: #b56b4f;
	}

	/* 螢光筆 */
	.page article mark{
		position: relative;
		background: #e4c9bf;
		padding: 0 .3em;
		border-radius: 3px;
	}
		.page article mark::before{
			position: absolute;
			content: "";
			top: -2px;
			left: -2px;
			right: -2px;
			bottom: 2px;
			max-height: 10px;
			background: inherit;
			border-radius: inherit;
			z-index: -1;
		}
			.page article mark:nth-child(even)::before{
				top: 4px;
			}

	/* 底線 */
	.page article u{
		-webkit-text-decoration: #bb785e wavy underline; /* Safari */
		text-decoration: #bb785e wavy underline;
		text-underline-offset: 3px;
	}
		.page article u[data-double]{
			text-decoration-style: double;
		}

.bouncingLoader > div, 
.bouncingLoader::before, 
.bouncingLoader::after{
	width: 13px;
	height: 13px;
	background: #F16D6E;
	border-radius: 50%;
	animation: bouncing-loader .6s infinite alternate;
}
.bouncingLoader > div, 
.bouncingLoader::before, 
.bouncingLoader::after{
	content: "";
}
.bouncingLoader > div{
	 margin: 0 5px;
}
.bouncingLoader > div{
	animation-delay: .2s;
}
.bouncingLoader::after{
	animation-delay: .4s;
}
	@keyframes bouncing-loader{
		to{
			opacity: .1;
			transform: translate3d(0,-16px,0);
		}
	}

.feed .page{
	position: relative;
	height: 100vh;
	background-image: url("//i.hearty.app/fHsfWPa.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.page .illustration{
	display: block;
	width: 100%;
	height: inherit;
	background-image: url(//i.hearty.app/i/illustrations/picnic.jpg);
	background-size: cover !important;
	background-repeat: no-repeat;
	background-position: center;
}
.page .story{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	/* handle overflow caused by rotate */
	width: 100%;
		width: calc(100% - 4px);
	height: inherit;
		height: calc(100vh - 4px);

	padding: 1.5em 0;
	transform: rotate(0.8deg);
	scroll-behavior: smooth;
	overflow-y: scroll;
	content-visibility: auto;
}
.page article{
	width: auto;
	min-width: 70%;
	max-width: 92%;
	height: auto;
	min-height: 50vh;
	margin: auto 2em; /* Scroll Fix for Flex */
	padding: 0 1em;
	color: #333;
	line-height: 2;
	letter-spacing: 1px;
	background: rgba(255,255,255,.9);
	white-space: pre-wrap;
	border-radius: .5em;
}
	.sheet{
		position: relative;
		display: block;
		padding: 1em 2em 2em 2em;
		background: url(//i.hearty.app/XCR4X1w.png), #fff;
		box-shadow: 0 0 5px rgba(0,0,0,.2), inset 0 0 3em rgba(0,0,0,.1);
	}
		.sheet::before, 
		.sheet::after{
			position: absolute;
			width: 15em;
			height: .6em;
			content: ' ';
			left: .75em;
			bottom: .75em;
			background: transparent;
			transform: skew(-5deg) rotate(-5deg);
			box-shadow: 0 6px .75em rgba(0, 0, 0, .3);
			z-index: -1;
		}
		.sheet::after{
			left: auto;
			right: .75em;
			transform: skew(5deg) rotate(5deg);
		}

.feed .page_back{
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	padding: .8em 1em;
	background: #fff;
	border-radius: 0 0 .6em .6em;
	cursor: pointer;
	transition: all .2s ease-in;
}
	.feed .page_back:hover{
		color: #fff;
		background: #888;
	}

.feed .nav_btn{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	right: .8em;
	bottom: 1.2em;
	margin-bottom: env(safe-area-inset-bottom, 0);
	background: rgba(255,255,255,.6);
	border: 1px solid #555;
	border-radius: 50%;
	cursor: pointer;
	transition: all .2s ease-in;
}
	.feed .nav_btn.fa-chevron-up{
		position: absolute;
	}
	.feed .nav_btn:hover, 
	.feed .page_publish:hover{
		color: #fff;
		background: #666;
	}

.feed .page_publish{
	position: absolute;
	bottom: .8em;
	bottom: env(safe-area-inset-bottom, .8em);
	left: 0;
	margin: 0;
	padding: .4em;
	color: #666;
	background: rgba(255,255,255,.8);
	border: 1px #ccc solid;
	border-radius: .5em;
	font-size: small;
	cursor: pointer;
	transition: all .2s ease-in;
}
	.feed .page_publish[title]::after{
		content: attr(title);
	}

.feed .article_buttom{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	color: #666;
	list-style: none;
}
	.feed .article_buttom > *{
		padding: 0 .8em;
	}
	.feed .article_buttom > *:not(:last-child){
		border-right: 1px #e9d9b6 solid;
	}
	.feed .article_buttom [data-clk]{
		cursor: pointer;
	}
	.feed .article_buttom .fa-share-alt:hover::before, 
	.feed .article_buttom .fa-flag:hover::before{
		font-weight: 900;
	}

.feed .published{
	display: inline-flex;
	align-items: center;
	font-size: x-small;
	letter-spacing: .5px;
}
	.feed .published[title]::after{
		content: attr(title);
	}

.feed .avatar{
	position: relative;
	align-items: center;
	overflow: hidden;
	overflow: clip;
	text-overflow: ellipsis;
}
.feed .article_buttom .avatar{
	display: inline-flex;
	flex-flow: row nowrap;
}
	[data-a][style$='#1");']{
		transform: rotate(90deg);
	}
	[data-a][style$='#2");']{
		transform: rotate(180deg);
	}
	[data-a][style$='#3");']{
		transform: rotate(270deg);
	}

	.feed .avatar [data-a]{
		display: block;
		background-image: url(//cdn.jsdelivr.net/gh/heartyme/web.hearty.me@41214/img/logo.jpg);
		background-size: cover !important;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 50%;
		opacity: .9;
		transition: all .2s linear;
	}
	.feed .article_buttom .avatar [data-a]{
		margin: 0;
		width: 2em;
			min-width: 2em; /* force not to resize */
		height: 2em;
	}
		.feed .avatar [data-a]:hover, 
		.feed .profile li[data-btn]:hover{
			opacity: 1;
			filter: brightness(1.05);
		}

	.feed .avatar[data-vip="1"]::before{
		position: absolute;
		content: "\f005";
		font-family: "Font Awesome 5 Pro";
		font-weight: 900;
    	left: 6px;
    	bottom: -3px;
		font-size: x-small;
		color: gold;
		text-shadow: -1px 0 #888, 0 1px #888, 1px 0 #888, 0 -1px #888;
		z-index: 1;
	}
	.feed .avatar[title]::after{
		content: attr(title);
		padding-left: .8em;
		font-size: x-small;
		white-space: normal;
		letter-spacing: 1px;
	}

.feed .profile{
	position: fixed;
	display: none;
	content-visibility: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.5);
	z-index: 3;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.feed .profile > div{
	display: flex;
	align-items: center;
	justify-content: center;
	width: inherit;
	height: inherit;
}
.feed .profile ul{
	display: block;
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
}
.feed .profile .avatar{
	min-width: 25%;
	max-width: 80%;
	padding: .8em 2em;
	border: 1px solid #ccc;
	border-radius: .7em;
	background: rgba(255,255,255,.9);
	box-shadow: rgba(0,0,0,.1) 1px 1px 1em 1px;
}
	.feed .profile .avatar li{
		margin: 1em auto;
		letter-spacing: 2px;
		text-overflow: ellipsis;
		overflow: hidden;
		overflow: clip;
	}
		.feed .profile .avatar [data-a]{
			width: 8em;
			height: 8em;
			border: 1.5px solid rosybrown;
			/* filter: saturate(1.1); */
			cursor: pointer;
		}
		.feed .profile li[data-gender="1"]::before{
			content: "\f222";
			color: #1e90ff;
		}
		.feed .profile li[data-gender="2"]::before{
			content: "\f221";
			color: #ff1493;
		}
		.feed .profile li[title]::after{
			content: attr(title);
		}
		.feed .profile [data-btn]{
			padding: .5em;
			background: #aaa;
			color: #fff;
			opacity: 0.9;
			border-radius: .8em;
			cursor: not-allowed;
			transition: all .2s linear;
		}
			.feed .profile [data-btn="active"]{
				background: rosybrown;
				cursor: pointer;
			}
			.feed .profile [data-btn]:hover{
				filter: brightness(1.1);
			}

	.feed .profile .profile_btns{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-evenly;
	}
		.feed .profile .profile_btns li{
			margin: .8em .4em;
			padding: .8em;
		}

	.feed .fa-bookmark{
		color: #c68e78;
		transition: font-weight .2s ease-in;
	}
		.feed .fa-bookmark:hover{
			font-weight: 900;
		}

/* Google 翻譯外掛 */
#google_translate_element{
	position: fixed;
	left: 0;
	bottom: 1.2em;
	z-index: 1;
}
	body{
		top: 0 !important;
	}
	#google_translate_element img{
		display: none;
	}
	.goog-te-gadget-simple::before{
		content: "\f0ac\00a0";
	}
	.goog-te-banner-frame.skiptranslate, 
	#goog-gt-tt{
		display: none !important;
	}


/* 電腦 & not iPad Pro Portrait */
@media only screen and (min-width: 1025px) and (orientation: landscape){
	.feed .page_back{
		display: none;
	}
	.feed .page{
		flex: 5;
	}
	.feed > div:nth-child(1){
		flex: 4;
	}
	.feed .page_publish{
		display: none;
	}
}
/* 橫置平板：雙欄 */
@media only screen and (max-width: 1024px) and (orientation: landscape){
	.feed [data-block]{
		flex: 1;
	}
}
/* 直立平板 & 手機：單欄 */
@media only screen and (max-width: 1024px) and (orientation: portrait){
	.feed{
		flex-flow: row nowrap;
	}
	.feed [data-block]{
		flex: 1 0 100%;
	}
	.feed .page{
		z-index: 3;
	}
	.feed .profile_btns{
		font-size: small;
	}
	.feed .page_back{
		display: block;
	}
	.desktop{
		display: none;
	}
}