body {
	font-family: "Roboto", sans-serif;
	display: flex;
	justify-content: center;
	padding-bottom: 20px;
	margin: 0px;
}

body h1 {
	padding: 18px 0px;
}

body .article {
	width: 780px;
	color: rgba(0, 0, 0, 0.86);
	padding: 8px;
}

body .summary {
	position: fixed;
	font-size: 16px;
	font-weight: 500;
	margin-top: 14px;
	padding: 23px;
	background-color: #f5f7f9a0;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 10px;
	width: 660px;
	text-align: center;
	transition: .2s width, .2s margin-top;
	-webkit-transition: .2s width, .2s margin-top;
	box-shadow: 0px 0px 20px 4px #c5c5c55c;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}

body .fixed {
	width: 100vw;
	margin-top: 0px;
	border-radius: 0px;
}

body .summary a {
	color: #0ea3ed;
	border-bottom: none;
	background-color: #8fd4f72e;
	padding: 7px 14px;
	border-radius: 18px;
	cursor: pointer;
}

body .banner img {
	width: -moz-available;
	width: -webkit-fill-available;
	border-radius: 30px;
	box-shadow: 0px 0px 45px 3px #561c2bd0;
	margin: 120px 0px 25px 0px;
}

body a[href] {
	/*border-bottom: .1em solid rgba(0,0,0,.7);*/
	text-decoration: none;
	color: #008cd1/*inherit*/;
}

body a[href]:hover {
	border-bottom: 2px solid #008cd1;
}

body .article .article-content .article-section h4  {
	display: flex;
	font-size: 22px;
	margin-bottom: 0px;
}

body .article .article-content .article-section h4 .arrow {
	height: 21px;
	width: 21px;
	margin-right: 14px;
	cursor: pointer;
	transition: transform 0.2s;
}

body .article .article-content .article-section h4 .arrow.closed {
	transform: rotateX(180deg);
}

body .article .article-content .article-section h4 img.emoji {
	height: 24px;
	width: 24px;
	margin-right: 10px;
}

body .article .article-content .article-section .category {
	margin-top: 20px;
	margin-left: 9px;
	padding-left: 30px;
	border-left: 2px solid rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

body .article .article-content .article-section .category:not(.disable-height) {
	transition: height 0.2s;
}

body .article .article-content .article-section .category:not(.disable-height):not(.closed) {
	height: var(--height);
}

body .article .article-content .article-section .category:not(.disable-height).closed {
	height: 0px;
}

body p {
	font-size: 18px;
	line-height: 25px;
}

body .article .article-content .article-section .category p:first-child {
	margin-top: 5px;
}

body .article .article-content .article-section .category p:last-child {
	margin-bottom: 5px;
}

body .article .article-content .article-section .category h5 {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}

body .article .article-content .article-section .category h5:first-child {
	margin-top: 18px;
}

body .article .article-content .article-section .category h5 img.emoji {
	height: 22px;
	width: 22px;
	margin-right: 10px;
}

body .article .article-content .article-section .category  p .tooltip-indicator .open-tooltip-icon {
	height: 20px;
	opacity: 70%;
	margin-left: 8px;
	margin-bottom: -5px;
	cursor: pointer;
	border-radius: 50%;
}

body .article .article-content .article-section .category  p .tooltip-indicator .tooltip-text {
	display: none;
}

body .tooltip {
	position: fixed;
	left: var(--left);
	top: var(--top);
	background-color: #3e3e3e;
	color: #ffffff;
	text-align: center;
	font-size: 16px;
	border-radius: 16px;
	padding: 12px;
	width: 240px;
	max-width: 75vw;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

body .tooltip.show-animation {
	animation: 0.5s openTooltip;
}

@keyframes openTooltip {
	from {
		opacity: 0%;
	}
}

body .tooltip::before {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--bottomarrow-left);
	border: 5px solid transparent;
	border-top-color: #3e3e3e;
}

.article ::selection {
	background: #dbdbdb;
}

.article ::-moz-selection {
	background: #dbdbdb;
}

@media screen and (max-width: 780px) {
	body .article {
		width: 90vw;
	}
	body .summary { /* full horizontal navigation bar */
		width: 100vw;
		margin-top: 0px;
		font-size: 15px;
		border-radius: 0px;
	}
	body p {
		font-size: 17px;
	}
}