* {
	--category-colorBright: unset;
	--category-colorDark: unset;
	--category-color: var(--category-colorBright);
	margin: 0px;
	padding: 0px;
	outline: none;
	border: none;
	box-sizing: border-box;
	user-select: none;
	cursor: default;
	text-decoration: none;
	scroll-behavior: smooth;
}
:root[theme="dark"] * {
	--category-color: var(--category-colorDark);
}
*::-webkit-scrollbar {
	--scrollbar-size: 0.1vw;
    padding: 0vw;
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}
*::-webkit-scrollbar:hover {
	--scrollbar-size: 0.5vw;
}
*::-webkit-scrollbar-thumb {
    border-radius: 100vw;
    margin: 0px;
}

:root {
	--mainColor: #ffffff;
	--scrollBar-backgroundColor: #00000000;
	--scrollThumb-backgroundColor: #00000055;
	--body-backgroundColor: #ffffff;
	--header-backgroundColor: #00000000;
	--badge-backgroundColor: #ffffff88;
	--box-backgroundColor: #f0f0f0;
	--text-color1: #000000;
	--text-color2: #00000088;
	--text-color3: #00000077;
	--shadowColor: #00000088;
	--tabHovered-background: #00000033;
	--labelHovered-background: #00000011;
	--aside-borderColor: #00000000;
	--defaultCategory-color: #c1c1c1;
	--searchMark-background: #c9e7f5;
	--tabIcon-filter: grayscale(1) brightness(0);
	--infoIcon-filter: grayscale(1) brightness(0) opacity(0.5);
}
:root[theme="dark"] {
	--mainColor: #000000;
	--scrollBar-backgroundColor: #00000000;
	--scrollThumb-backgroundColor: #ffffff55;
	--body-backgroundColor: #3d3d3d;
	--header-backgroundColor: #00000088;
	--badge-backgroundColor: #00000088;
	--box-backgroundColor: #474747;
	--text-color1: #ffffff;
	--text-color2: #ffffff88;
	--text-color3: #ffffff77;
	--shadowColor: #000000;
	--tabHovered-background: #ffffff33;
	--labelHovered-background: #ffffff11;
	--aside-borderColor: #ffffff55;
	--defaultCategory-color: #787878;
	--searchMark-background: #516d7b;
	--tabIcon-filter: grayscale(1) brightness(100);
	--infoIcon-filter: grayscale(1) brightness(100) opacity(0.5);
}
*::-webkit-scrollbar {
	background-color: var(--scrollBar-backgroundColor);
}
*::-webkit-scrollbar-thumb {
    background: var(--scrollThumb-backgroundColor);
}

:root {
	--header-width: 15vw;
	--aside-width: 20vw;
	--footer-height: 8vw;
	background-color: var(--body-backgroundColor);
}
body {
	background-color: var(--body-backgroundColor);
	font-family: 'Courier New', Courier, monospace, Arial, '微軟正黑體';
}

.cover {
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

header {
	--avatar-size: 10vw;
	--badge-size: 2vw;
	padding: 5vw 1vw;
	width: var(--header-width);
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: var(--header-backgroundColor);
	/* z-index: 3; */
}
header > * {
	margin: 0px 0px 2vw 0px;
}
#avatarBox {
	width: 100%;
	height: calc(var(--avatar-size) + var(--badge-size)/2);
	position: relative;
	text-align: center;
}
#avatar {
	--size: 10vw;
	width: var(--avatar-size);
	height: var(--avatar-size);
	border-style: solid;
	border-color: var(--mainColor);
	border-width: 0.1vw;
	border-radius: 50%;
}
#badges {
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
	gap: 0.3vw;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0vw;
}
#badges > div {
	padding: 0.1vw 0px;
	width: var(--badge-size);
	height: var(--badge-size);
	font-size: calc(var(--badge-size) - 0.8vw);
	line-height: var(--badge-size);
	text-align: center;
	background-color: var(--badge-backgroundColor);
	border-style: solid;
	border-width: 0.1vw;
	border-color: var(--mainColor);
	border-radius: 50%;
	transform: scaleX(1) scaleY(1);
	transition: transform 0.5s;
	cursor: help;
}
#badges > div:hover {
	transform: scaleX(1.5) scaleY(1.5);
}
#badgeDescription {
	--x: 0;
	--y: 0;
	padding: 0px 0.5vw;
	width: auto;
	height: 2vw;
	line-height: 2vw;
	position: fixed;
	top: var(--y);
	left: var(--x);
	color: var(--text-color1);
	font-size: 1vw;
	background-color: var(--header-backgroundColor);
	border-style: solid;
	border-width: 0.1vw;
	border-radius: 0.5vw;
	box-shadow: 0px 0px 5px 0px var(--shadowColor);
	opacity: 0;
	/* z-index: 999; */
	pointer-events: none;
	transition: opacity 0.5s;
}
#badgeDescription[visible] {
	opacity: 1;
}
#siteName {
	margin: 0px 0px 0.5vw 0px;
	color: var(--text-color1);
	font-size: 1.5vw;
	font-weight: bold;
	text-align: center;
}
#siteDescription {
	color: var(--text-color1);
	font-size: 1vw;
	font-weight: normal;
	text-align: center;
}
#tabs {
	--tabsAmount: 3;
	--switchesAmount: 1;
	--tab-height: 3vw;
	--tabIcon-height: 1.5vw;
	--tabButton-paddingY: 1vw;
	--tabs-height: calc(100vh - 10vw - (var(--avatar-size) + var(--badge-size)/2) - 3vw - 4vw) !important;
	width: 100%;
	height: var(--tabs-height);
	overflow-x: hidden;
	overflow-y: auto;
}
#tabs li {
	list-style-type: none;
	width: 100%;
	height: var(--tab-height);
	border-style: solid;
	border-color: transparent;
	border-width: 0px 0.1vw;
	filter: var(--tabIcon-filter);
	transition: border-color 0.5s, background-color 0.5s;
}
#tabs li > a {
	/* display: block; */
	display: flex;
    align-items: center;
	padding: var(--tabButton-paddingY) 0px var(--tabButton-paddingY) calc(var(--tab-height) + 1vw);
	width: 100%;
	height: 100%;
	color: var(--text-color1);
	font-size: var(--tabIcon-height);
	/* line-height: var(--tabButton-paddingY); */
	text-wrap: nowrap;
	background-color: transparent;
	background-image: var(--bgi);
	background-size: var(--tabIcon-height);
    background-repeat: no-repeat;
    background-position-x: calc(((var(--tab-height) + 1vw) - var(--tabIcon-height))/2);
    background-position-y: center;
	cursor: pointer;
}
#tabs li.now, #tabs li:hover {
	border-color: var(--text-color1);
	background-color: var(--tabHovered-background);
}
#tab-home {
	--bgi: url('../image/templateIcon/tabIcon-home.svg') !important;
}
#tab-about {
	--bgi: url('../image/templateIcon/tabIcon-about.svg') !important;
}
#tab-now {
	--bgi: url('../image/templateIcon/tabIcon-now.svg') !important;
}
#tab-skill {
	--bgi: url('../image/templateIcon/tabIcon-skill.svg') !important;
}
#tab-articles {
	--bgi: url('../image/templateIcon/tabIcon-articles.svg') !important;
}
#tab-portfolio {
	--bgi: url('../image/templateIcon/tabIcon-portfolio.svg') !important;
}
#switches {
	--switchesInner-height: calc(var(--tab-height) * var(--switchesAmount));
	width: 100%;
	height: calc(var(--tabs-height) - var(--tab-height) * var(--tabsAmount));
	min-height: var(--switchesInner-height);
	position: relative;
}
#switches > div {
	width: 100%;
	height: var(--switchesInner-height);
	position: absolute;
	left: 0px;
	bottom: 0px;
}
#switches > div > li {
	--bgi: url('../image/templateIcon/toggle-off.svg');
}
#switches > div > li[value="on"] {
	--bgi: url('../image/templateIcon/toggle-on.svg');
}
#rssUrlCopy {
	--bgi: url('../image/templateIcon/rss.svg') !important;
}
#backgroundMusicSwitch {
	--bgi: url('../image/templateIcon/bgm-play.svg') !important;
}
#backgroundMusicSwitch[value="on"] {
	--bgi: url('../image/templateIcon/bgm-pause.svg') !important;
}
#darkModeSwitch {
	--bgi: url('../image/templateIcon/toggle-off.svg') !important;
}
:root[theme="dark"] #darkModeSwitch {
	--bgi: url('../image/templateIcon/toggle-on.svg') !important;
}

aside {
	--pageSwitcher-height: 3vw;
	display: none;
	padding: 5vw 1vw;
	width: var(--aside-width);
	height: 100vh;
	position: fixed;
	top: 0px;
	right: 0px;
	border-style: dashed;
	border-width: 0px 0px 0px 0.1vw;
	border-color: var(--aside-borderColor);
	overflow: hidden;
}
aside[visible] {
	display: block;
}
#scrollToArticle {
	display: none;
}
#pageSwitcher {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: var(--pageSwitcher-height);
	position: relative;
}
#pageSwitcher > input[type="radio"] {
	display: none;
}
#pageSwitcher > label {
	display: block;
	width: 100%;
	height: var(--pageSwitcher-height);
	color: var(--text-color1);
	font-size: 1.2vw;
	font-weight: normal;
	text-align: center;
	line-height: var(--pageSwitcher-height);
	border-style: solid;
	border-width: 0px 0px 0.1vw 0px;
	border-color: transparent;
	transition: background-color 0.5s, border-color 0.5s;
}
#pageSwitcher > label:hover {
	background-color: var(--labelHovered-background);
}
#pageSwitcher > input:checked + label {
	background-color: var(--tabHovered-background);
	border-color: var(--text-color1);
}
#pageSwitcher .page {
	--page-width: calc(var(--aside-width) - 2vw);
	--page-height: calc(100vh - 10vw - var(--pageSwitcher-height) - 20vw);
	display: block;
	grid-row-start: 1;
	grid-row-end: 2;
	padding: 1vw;
	width: var(--page-width);
	height: var(--page-height);
	position: absolute;
    top: var(--pageSwitcher-height);
    left: 0px;
	text-align: left;
	transform: translateX(var(--page-width));
	overflow-x: visible;
	overflow-y: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s, transform 0.5s;
}
#pageSwitcher > input:checked + label .page {
	transform: translateX(0px);
	opacity: 1;
	pointer-events: auto;
}
#pageSwitcher .page h2 {
	color: var(--text-color1);
	font-size: 1.8vw;
	font-weight: bold;
}
#pageSwitcher .page input {
	padding: 0.3vw 0.8vw;
	width: 100%;
	color: var(--text-color1);
    font-size: 1.5vw;
    font-weight: normal;
	border-radius: 0.5vw;
	background-color: var(--box-backgroundColor);
	box-shadow: 0px 0px 8px 0px var(--shadowColor);
}
#pageSwitcher .page ol {
	margin: 0px 0px 0px 1vw;
	list-style-type: none;
}
#pageSwitcher .page ul {
	margin: 0px 0px 0px 2vw;
	list-style-type: disc;
}
#pageSwitcher .page li {
	color: var(--text-color1);
	font-size: 1.2vw;
	font-weight: bold;
	cursor: pointer;
}
#pageSwitcher .page li.now {
	color: var(--text-color2);
}
#pageSwitcher .page .buttons {
	display: flex;
	margin: 0px 0px 2vw 0px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1vw;
}
#pageSwitcher .page .buttons > button {
	padding: 0.3vw 0.8vw;
	color: var(--text-color1);
    font-size: 1.5vw;
    font-weight: normal;
    background-color: var(--box-backgroundColor);
    border-radius: 0.5vw;
	box-shadow: 0px 0px 8px 0px var(--shadowColor);
	cursor: pointer;
}
#pageSwitcher .page #categoryButtons.buttons > button {
	background-color: unset;
	background: linear-gradient(150deg, var(--box-backgroundColor) 60%, var(--category-color) 80%);
}

main {
	--mw: calc((100vw - var(--header-width) - var(--aside-width) - 2vw)/100);
	--mh: calc((100vh - var(--footer-height) - 6vw)/100);
	margin-right: var(--aside-width);
	margin-left: var(--header-width);
	padding: 5vw 1vw 1vw 1vw;
	width: calc(100vw - var(--header-width) - var(--aside-width));
	min-height: calc(100vh - var(--footer-height));
	position: relative;
	/* z-index: 1; */
}
aside:not([visible]) ~ main {
	--mw: calc((100vw - var(--header-width) - 2vw)/100);
	margin-right: 0px;
	width: calc(100vw - var(--header-width));
}
article {
	margin: 0px 0px 2vw 0px;
	padding: 1vw 2vw;
	width: 100%;
	height: auto;
	position: relative;
	background-color: var(--box-backgroundColor);
	border-radius: 1vw;
	box-shadow: 0px 0px 8px 0px var(--shadowColor);
	overflow: visible;
}
article.row {
	margin: 0px 0px 0px 5vw;
    padding: 0.5vw 2vw;
    width: calc(100% - 5vw);
    height: auto;
    position: relative;
    background-color: transparent;
    border-radius: 0px;
    border-style: solid;
    border-color: var(--text-color1);
    border-width: 0px 0px 0.1vw 0px;
    box-shadow: none;
    overflow: visible;
}
article.closed {
	cursor: pointer;
}
article.closed * {
	cursor: pointer;
}
article > .cover {
	--bgi: unset;
	margin: 1vw 0px 0px 0px;
	height: 20vw;
    width: 100%;
	border-radius: 1vw 1vw 0px 0px;
    background-image: var(--bgi);
	box-shadow: 0px 0px 8px 0px var(--shadowColor) inset;
}
article > .category {
	padding: 0.5vw;
	position: absolute;
	top: 0px;
	right: 0px;
	color: var(--text-color1);
	font-size: 1.4vw;
	background-color: var(--category-color);
	border-radius: 0.5vw;
	box-shadow: 0px 0px 10px 0px var(--shadowColor);
	transform: rotateZ(5deg);
	/* z-index: 1; */
	cursor: pointer !important;
}
article .title {
	margin: 1vw 0.5vw;
	color: var(--text-color1);
	font-size: 2vw;
	font-weight: bold;
}
article.row .title {
	margin: 0.5vw 0.5vw;
    font-size: 1.5vw;
	text-wrap: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
article .description {
	margin: 0px 0.5vw 1vw 0.5vw;
	color: var(--text-color2);
	font-size: 1.5vw;
	font-weight: bold;
}
article .info {
	margin: 0px 0px 1vw 0px;
	color: var(--text-color1);
	font-size: 1.2vw;
}
article.row > .info {
	margin: 0px 0px 0.5vw 0px;
}
article .info > span {
	--bgi: unset;
	--backgroundSize: 1.2vw;
	margin: 0px 1vw 0px 0px;
	padding: 0px 0px 0px 2vw;
	background-image: var(--bgi);
	background-position-x: calc((2vw - var(--backgroundSize))/2);
	background-position-y: center;
	background-size: var(--backgroundSize);
	background-repeat: no-repeat;
	filter: var(--infoIcon-filter);
}
article .info > span.publishedTime {
	--bgi: url('../image/templateIcon/infoIcon-publishedTime.svg');
}
article .info > span.readingTime {
	--bgi: url('../image/templateIcon/infoIcon-readingTime.svg');
}
article.row :where(.title, .description) mark {
	color: inherit;
	background: var(--searchMark-background);
}
article > .content {
	width: 100%;
	overflow: visible;
}
.filterBar {
	margin: 5vw 0px 0px 1vw;
    width: 4vw;
	height: calc(100% - 5vw);
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to bottom, var(--category-color), var(--labelHovered-background));
	overflow: hidden;
}
.filterRotateBox {
	display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
	margin: 0px 2vw 0px 0px;
	transform-origin: right center;
	transform: rotateZ(-90deg) translateX(2vw);
}
.filterRotateBox > div {
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
	margin: 0px 1vw 0px 1vw;
	width: 20vw;
	height: 4vw;
}
.filterRotateBox > div > h2 {
	color: var(--text-color1);
	font-size: 1.8vw;
	font-weight: bold;
}
.filterRotateBox > div > p {
	color: var(--text-color2);
	font-size: 1.4vw;
	font-weight: normal;
	text-wrap: nowrap;
}
.timeLine {
	margin: 5vw 0px 0px 3.5vw;
    width: 0px;
	height: calc(100% - 5vw);
    position: absolute;
    top: 0px;
    left: 0px;
	border-style: solid;
	border-color: var(--text-color1);
	border-width: 0px 0px 0px 0.1vw;
}
.timePoint {
	width: 1.5vw;
	height: 1vw;
	position: absolute;
    top: 50%;
    left: -3vw;
	border-style: solid;
	border-color: var(--text-color1);
	border-width: 0.1vw 0.1vw 0.1vw 0px;
	border-radius: 50% 0px 0px 50%;
	transform: translateY(-50%) rotateZ(45deg);
	pointer-events: none;
}
.portfolioGroup {
	margin: 0px 0px 4vw 0px;
}
.portfolioBox {
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	gap: 1vw;
}
.portfolioText {
	margin: 0px 0px 1vw 0px;
	color: var(--text-color1);
	font-size: 1.8vw;
	font-weight: bold;
}
.portfolioBox > div {
	width: 18vw;
    height: 13vw;
	position: relative;
    background-color: var(--box-backgroundColor);
	border-style: solid;
	border-color: var(--text-color1);
	border-width: 0.1vw;
	overflow: hidden;
}
.portfolioBox > div .cover {
	--bgi: unset;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: var(--mainColor);
	background-image: var(--bgi);
}
.portfolioBox > div .mask {
	--portfolioName-height: 1.3vw;
	width: 100%;
	height: 100%;
	position: absolute;
	top: calc(100% - var(--portfolioName-height) - 1vw);
	left: 0px;
	background-color: var(--badge-backgroundColor);
	backdrop-filter: blur(10px);
	transition: top 0.8s;
}
.portfolioBox > div:hover .mask {
	top: 0px;
}
.portfolioBox > div .mask > h2 {
	margin: 0.5vw 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--portfolioName-height);
	color: var(--text-color1);
	font-size: var(--portfolioName-height);
	transition: margin 0.8s;
}
.portfolioBox > div:hover .mask > h2 {
	margin: 1vw 0px 0px 0px;
}
.portfolioBox > div .mask > p {
	padding: 1vw;
	height: calc(100% - var(--portfolioName-height) - 1vw);
	color: var(--text-color2);
	font-size: 1.2vw;
	overflow-x: hidden;
	overflow-y: auto;
}
.portfolioBox .albumBox {
    display: grid;
    grid-template-columns: 4vw auto 30vw;
    grid-template-rows: 100%;
	width: 100%;
    height: 30vw;
	/* background-color: var(--mainColor); */
	background-color: var(--badge-backgroundColor);
    backdrop-filter: blur(2px);
}
.portfolioBox .albumBox > div.albumNameBox {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.portfolioBox .albumBox > div.albumNameBox > h3 {
	transform: rotateZ(-90deg);
    color: var(--text-color1);
    text-wrap: nowrap;
}
.portfolioBox .albumBox > div > iframe {
	width: 100%;
	height: 100%;
}
.portfolioBox .albumBox > :where(ul, ol) {
	overflow-x: hidden;
	overflow-y: auto;
}
.portfolioBox .albumBox > :where(ul, ol) > li {
	width: 100%;
	height: 4vw;
	border-style: solid;
	border-width: 0px 0px 0.1vw 0px;
	border-color: var(--text-color1);
}
.portfolioBox .albumBox > :where(ul, ol) > li:nth-last-of-type(1) {
	border-width: 0px;
}
.portfolioBox .albumBox > :where(ul, ol) > li > input[type="radio"] {
	display: none;
}
.portfolioBox .albumBox > :where(ul, ol) > li > label {
	display: block;
	padding: 0px 1vw;
	width: 100%;
	height: 100%;
	color: var(--text-color1);
    font-size: 1.5vw;
	line-height: 4vw;
	background-color: transparent;
}
.portfolioBox .albumBox > :where(ul, ol) > li > input[type="radio"]:checked + label {
	background-color: var(--tabHovered-background);
}
.articlePageSwitcher {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
	gap: 0.5vw;
	margin: 1vw;
}
.articlePageSwitcher > * {
	--bgi: unset;
	width: 3vw;
	height: 3vw;
	background-color: var(--labelHovered-background);
	background-image: var(--bgi);
	background-size: 1.5vw;
	background-position: center center;
	background-repeat: no-repeat;
	filter: var(--tabIcon-filter);
}
.articlePageSwitcher > *:first-child {
	--bgi: url('../image/templateIcon/arrow-left2.svg');
	width: 3.5vw;
	border-radius: 100vw 0px 0px 100vw;
}
.articlePageSwitcher > *:last-child {
	--bgi: url('../image/templateIcon/arrow-right2.svg');
	width: 3.5vw;
	border-radius: 0px 100vw 100vw 0px;
}
.articlePageSwitcher > *:nth-child(2) {
	--bgi: url('../image/templateIcon/arrow-left.svg');
}
.articlePageSwitcher > *:nth-child(4) {
	--bgi: url('../image/templateIcon/arrow-right.svg');
}
.articlePageSwitcher > div {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
	width: unset;
}
.articlePageSwitcher > div > input {
	margin: 0.5vw;
	width: 3vw;
	color: white;
	font-size: 1.5vw;
	text-align: center;
	background-color: var(--text-color3);
}
.articlePageSwitcher > div > span {
	margin: 0.5vw 0.5vw 0.5vw 0px;
	color: white;
    font-size: 1.5vw;
}

footer {
	margin-right: var(--aside-width);
	margin-left: var(--header-width);
	padding: 1vw;
	width: calc(100vw - var(--header-width) - var(--aside-width));
	height: var(--footer-height);
	position: relative;
	color: var(--text-color1);
	font-size: 1.2vw;
	font-weight: normal;
	/* z-index: 2; */
}
footer a {
	pointer-events: all;
	cursor: pointer;
}
aside:not([visible]) ~ footer {
	margin-right: 0px;
	width: calc(100vw - var(--header-width));
}
footer hr {
	margin: 0px 0px 1vw 0px;
	border-style: solid;
	border-width: 0.1vw;
	border-color: var(--text-color1);
}
footer p {
	color: var(--text-color2);
}
footer p a {
	color: var(--text-color2) !important;
	pointer-events: all;
}

#slidesPlayer {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: black;
	opacity: 0;
	pointer-events: none;
	/* z-index: 10; */
	transition: opacity 1s;
}
#slidesPlayer[visible] {
	opacity: 1;
	pointer-events: auto;
}
article .playButton {
	--size: 5vw;
	width: var(--size);	
	height: var(--size);
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: var(--badge-backgroundColor);	
	border-radius: 1vw;
	opacity: 0.5;
	transition: opacity 0.5s;
}
article .playButton:hover {
	opacity: 1;
}
article .playButton > div {
	width: 100%;
	height: 100%;
	background-image: url('../image/templateIcon/slides-show.svg');
	background-size: 5vw;
	background-position: center center;
	background-repeat: no-repeat;
	filter: var(--tabIcon-filter);
}
article .likerFrame {
	filter: drop-shadow(0px 0px 8px var(--shadowColor));
}
#slidesPlayer > .box {
	width: 100vw;
	height: 100vh;
	position: static;
}
#slidesPlayer > .box .slides {
	--width: unset;
	--height: unset;
	--scale: unset;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) scaleX(var(--scale)) scaleY(var(--scale));
}
#slidesPlayer > .bar {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	justify-content: space-between;
    align-items: center;
	padding: 0px 2vw;
	width: 100vw;
	height: 5vw;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-color: #00000088;
	border-style: solid;
	border-width: 0.3vw 0px 0px 0px;
	border-color: black;
	opacity: 0;
	transition: opacity 1.5s;
}
#slidesPlayer > .bar:hover, #slidesPlayer:not([visible]) > .bar {
	opacity: 1;
}
#slidesThemeSelector, 
#slidesControlButtons {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
	gap: 1vw;
}
#slidesThemeSelector > button {
	--bgc: unset;
	--size: 2.5vw;
	width: var(--size);
	height: var(--size);
	background-color: var(--bgc);
	border-radius: 50%;
	border-style: solid;
	border-width: 0.3vw;
	border-color: black;
}
#slidesControlButtons > button {
	--bgi: unset;
	--size: 2.5vw;
	width: var(--size);
	height: var(--size);
	background-color: transparent;
	background-image: var(--bgi);
	background-size: var(--size);
	background-repeat: no-repeat;
	background-position: center center;
	filter: var(--tabIcon-filter);
	transition: background-color 0.5s;
}
#slidesControlButtons > button:hover {
	background-color: var(--tabHovered-background);
}
/* slides berry them */
#slidesPlayer[theme="berry"] .slides {
	color: #df4a70;
}
#slidesPlayer[theme="berry"] .slides > div {
	background-color: unset;
	background-color: #ee9fb2;
	box-shadow: 0px 0px 20px 0px #df4a70 inset;
}
#slidesPlayer[theme="berry"] .slides > div > pre {
	color: transparent;
	background: linear-gradient(to top, #df4a70 0%, #ff8465 40%, white 50%);
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 4px 4px 10px #df4a70;
}
#slidesPlayer[theme="berry"] .slides a {
	color: #e67290;
	text-decoration-style: wavy;
    text-decoration-color: #e67290;
    text-decoration-thickness: 2px;
    text-decoration-line: underline;
}
/* slides honey them */
#slidesPlayer[theme="honey"] .slides {
	color: #935900;
}
#slidesPlayer[theme="honey"] .slides > div {
	background-color: unset;
	background-color: #ffdf97;
}
#slidesPlayer[theme="honey"] .slides > div > pre {
	text-shadow: 0px 0px 20px #935900;
}
#slidesPlayer[theme="honey"] .slides a {
	color: #b9740d;
	text-decoration-style: wavy;
    text-decoration-color: #b9740d;
    text-decoration-thickness: 2px;
    text-decoration-line: underline;
}
/* slides lemon them */
#slidesPlayer[theme="lemon"] .slides {
	color: #698a5b;
}
#slidesPlayer[theme="lemon"] .slides > div {
	background-color: unset;
	background-color: #bfffb3;
}
#slidesPlayer[theme="lemon"] .slides > div > pre {
	color: white;
	text-shadow: inset 0px 0px 20px 0px #698a5b;
	background-color: #698a5b;
}
#slidesPlayer[theme="lemon"] .slides a {
	color: #598746;
	text-decoration-style: wavy;
    text-decoration-color: #598746;
    text-decoration-thickness: 2px;
    text-decoration-line: underline;
}
/* slides journey them */
#slidesPlayer[theme="journey"] .slides {
	color: #698a5b;
}
#slidesPlayer[theme="journey"] .slides > div {
	background-color: unset;
	background-color: #bfffb3;
}
#slidesPlayer[theme="journey"] .slides > div > pre {
	color: white;
	text-shadow: inset 0px 0px 20px 0px #698a5b;
	background-color: #698a5b;
}
#slidesPlayer[theme="journey"] .slides a {
	color: #598746;
	text-decoration-style: wavy;
    text-decoration-color: #598746;
    text-decoration-thickness: 2px;
    text-decoration-line: underline;
}
/* slides glitch them */
#slidesPlayer[theme="glitch"] .slides {
	--rate: 6;
	color: #ffffff;
	text-shadow: calc(var(--rate) * 1px) 0px 2px #ff3333, calc(var(--rate) * -1px) 0px 2px #68a2ff;
}
#slidesPlayer[theme="glitch"] .slides > div {
	background-color: unset;
	background-color: #0e0e0e;
}
#slidesPlayer[theme="glitch"] .slides > div :where(pre, p, li, td) {
	position: relative;
}
#slidesPlayer[theme="glitch"] .slides > div :where(pre, p, li, td)::before, 
#slidesPlayer[theme="glitch"] .slides > div :where(pre, p, li, td)::after {
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0px;
	background-color: black;
}
@keyframes slidesPre_glitchScan {
	0% {top: 0%;}
	100% {top: 100%;}
}
#slidesPlayer[theme="glitch"] .slides > div :where(pre, p, li, td)::before {
	animation: slidesPre_glitchScan 1s linear 0s infinite normal both;
}
#slidesPlayer[theme="glitch"] .slides > div :where(pre, p, li, td)::after {
	animation: slidesPre_glitchScan 1s linear 1.5s infinite normal both;
}
#slidesPlayer[theme="glitch"] .slides > div > pre::before, 
#slidesPlayer[theme="glitch"] .slides > div > pre::after {
	content: attr(text);
	width: 100%;
	height: 100%;
	position: absolute;
	font-size: inherit;
	color: #ffffff;
	text-shadow: calc(var(--rate) * 1px) 0px 2px #ff3333, calc(var(--rate) * -1px) 0px 2px #68a2ff;
}
@keyframes slidesPre_glitchUp {
	0% {right: 2px;}
	10% {right: 2px;} 15% {right: -5px;} 20% {right: 2px;}
	40% {right: 2px;} 42% {right: 8px;} 45% {right: 2px;}
	65% {right: 2px;} 70% {right: 5px;} 75% {right: 2px;}
	100% {right: 2px;}
}
#slidesPlayer[theme="glitch"] .slides > div > pre::before {
	--clipHeight: 40%;
	top: 0px;
	left: unset;
	clip-path: polygon(0% 0%, 0% var(--clipHeight), 100% calc(var(--clipHeight) + 5%), 100% 0%);
	animation: slidesPre_glitchUp 3s linear 0s infinite normal both;
}
@keyframes slidesPre_glitchDown {
	0% {left: 2px;}
	10% {left: 2px;} 15% {left: -5px;} 20% {left: 2px;}
	40% {left: 2px;} 42% {left: 8px;} 45% {left: 2px;}
	65% {left: 2px;} 70% {left: 5px;} 75% {left: 2px;}
	100% {left: 2px;}
}
#slidesPlayer[theme="glitch"] .slides > div > pre::after {
	--clipHeight: 63%;
	top: 0px;
	clip-path: polygon(0% 100%, 0% var(--clipHeight), 100% calc(var(--clipHeight) + 5%), 100% 100%);
	animation: slidesPre_glitchDown 2s linear 0s infinite normal both;
}
#slidesPlayer[theme="glitch"] .slides a {
	color: #e3e3e3;
	text-decoration-style: wavy;
    text-decoration-color: #e3e3e3;
    text-decoration-thickness: 2px;
    text-decoration-line: underline;
}
#slidesPlayer[theme="glitch"] .slides img {
	box-shadow: calc(var(--rate) * 1px) 0px 2px 0px #ff2b2b, calc(var(--rate) * -1px) 0px 2px 0px #1f75ff;
	filter: brightness(1.5);
}
/* highlight.js style */
#slidesPlayer pre code.hljs * {
	/* font-family: var(--code-font); */
	font-weight: bold;
}
#slidesPlayer pre code.hljs {
	display: block;
	overflow-x: auto;
	padding: 1em;
	/* font-family: var(--code-font); */
	font-weight: bold;
}
#slidesPlayer code.hljs {
	padding: 3px 5px;
}
#slidesPlayer .hljs-mark {
	color: #dcdfe4;
}
#slidesPlayer pre.codeBlock {
	/* --code-font: 'Consolas', 'Courier New', 'Hack Nerd Font', 'Gen Jyuu Gothic', monospace; */
	--background-color: #212121;
	background-color: #212121;
}
#slidesPlayer pre.codeBlock .hljs {
	color: #9cdcfe;
}
#slidesPlayer .hljs.language-html {
	color: #dcdfe4;
}
#slidesPlayer .hljs-comment {
	color: #6a9949;
}
#slidesPlayer :where(.hljs-punctuation, .hljs-tag) {
	color: #808080;
}
#slidesPlayer .hljs-tag .hljs-name {
	color: #569cd6;
}
#slidesPlayer .hljs-tag .hljs-attr {
	color: #9cdcfe;
}
#slidesPlayer .hljs-tag .hljs-mark {
	color: inherit;
}
#slidesPlayer :where(
	.hljs-attribute,
	.hljs-doctag,
	.hljs-keyword,
	.hljs-meta .hljs-keyword,
	.hljs-name,
	.hljs-selector-tag
) {
	/* font-weight: 700; */
}
#slidesPlayer .hljs-keyword {
	color: #569cd6;
}
#slidesPlayer .hljs-keyword.notDeclare_ {
	color: #c586c0;
}
#slidesPlayer .hljs-subst {
	color: #9cdcfe;
}
#slidesPlayer .hljs-subst .hljs-mark {
	color: #1b9fff;
}
#slidesPlayer :where(
	.hljs-deletion,
	.hljs-number,
	.hljs-quote,
	.hljs-selector-class,
	.hljs-selector-id,
	.hljs-string,
	.hljs-template-tag,
	.hljs-type
) {
	color: #ce9178;
}
#slidesPlayer .hljs-number {
	color: #b5cea8;
}
#slidesPlayer .hljs-string {
	color: #ce9178 !important;
}
#slidesPlayer .hljs-type {
	color: #569cd6;
}
#slidesPlayer :where(.hljs-section, .hljs-title) {
	color: #4ec9b0;
}
#slidesPlayer .hljs-title.class_ {
	color: #4ec9b0;
}
#slidesPlayer .hljs-title.function_ {
	color: #dcdcaa;
}
#slidesPlayer :where(
	.hljs-link,
	.hljs-operator,
	.hljs-regexp,
	.hljs-selector-attr,
	.hljs-selector-pseudo,
	.hljs-symbol,
	.hljs-template-variable,
	.hljs-variable
) {
	color: #7d4c38;
}
#slidesPlayer .hljs-literal {
	color: #2e7bd6;
}
#slidesPlayer .hljs-variable {
	color: #9cdcfe;
}
#slidesPlayer .hljs-regexp {
	color: #d16969 !important;
}
#slidesPlayer .hljs-property {
	color: #9cdcfe;
}
#slidesPlayer :where(
	.hljs-addition,
	.hljs-built_in,
	.hljs-bullet,
	.hljs-code
) {
	color: #dcdcaa;
}
#slidesPlayer .hljs-meta {
	color: #569cd6;
}
#slidesPlayer .language-js .hljs-meta {
	color: #ce9178;
}
#slidesPlayer .hljs-meta .hljs-string {
	color: #ce9178;
}
#slidesPlayer .hljs-emphasis {
	font-style: italic;
}
#slidesPlayer :where(.language-text, .language-txt) {
	color: #dcdfe4 !important;
}

#alerts {
	--alert-width: 30vw;
	--alert-height: 5vw;
	width: calc(var(--alert-width) + 2vw);
	height: 100vh;
	position: fixed;
	top: 0px;
	right: 0px;
	pointer-events: none;
	/* z-index: 14; */
}

#effects {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	pointer-events: none;
	/* z-index: 15; */
}

#bgAniCvs {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	/* z-index: 0; */
}

#character {
	--size: 20vw;
	width: var(--size);
	height: var(--size);
	position: fixed;
	bottom: 2.5vw;
	right: 0px;
	pointer-events: none;
	/* z-index: 4; */
}

@media screen and (max-width: 100vh) {
	:root, :root * {
		--horizontal-margin: 2vw;
		--horizontal-width: calc(100vw - var(--horizontal-margin)*2);
		--badge-size: 6vw !important;
		--header-visualHeight: 20vw;
		--header-height: calc(var(--header-visualHeight) + 14vw + 4vw + var(--badge-size));
		--footer-height: 20vw;
		--headerOverflow-height-px: 100;
	}
	:root {
		--window-scrollY: 0;
	}
	header {
		--avatar-size: 16vw;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		padding: 0px;
		width: 100vw;
    	height: var(--header-visualHeight);
		backdrop-filter: blur(5px);
	}
	@keyframes headerOverflow_ani {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	header > h1, header > p {
		margin: 1vw 2vw !important;
		width: unset;
		font-size: 5vw !important;
		text-align: left !important;
		pointer-events: none;
		opacity: 0;
		animation: headerOverflow_ani calc(var(--headerOverflow-height-px)*1s) linear 0s 1 normal both;
		animation-delay: calc(var(--window-scrollY)*-1s);
	}
	#avatarBox {
		margin: 2vw;
		width: 15vw;
		height: calc(var(--avatar-size) + 4vw + var(--badge-size));
	}
	#badgeDescription {
		display: none;
	}
	#badges {
		width: auto;
		justify-content: flex-start;
		opacity: 0;
		animation: headerOverflow_ani calc(var(--headerOverflow-height-px)*1s) linear 0s 1 normal both;
		animation-delay: calc(var(--window-scrollY)*-1s);
	}
	#badges > div {
		padding: 0px;
		line-height: unset;
		font-size: calc(var(--badge-size)*0.6);
	}
	#tabs {
		--tab-height: 20vw;
    	--tabIcon-height: 10vw;
		--tabs-width: 80vw;
		--tab-width: calc(var(--tabs-width)/var(--tabsAmount));
		display: flex;
		flex-direction: row;
    	flex-wrap: nowrap;
		margin: 0px;
		position: absolute;
		top: 0px;
		right: 0px;
		width: 80vw;
		height: var(--tab-height);
	}
	#tabs > li{
		width: var(--tab-width);
		height: var(--tab-height);
	}
	#tabs li:hover {
		background-color: transparent;
		border-color: transparent;
	}
	#tabs > li > a{
		padding: 0px;
		width: var(--tab-width);
		height: var(--tab-height);
		color: transparent;
		background-position: center center;
		overflow: hidden;
	}
	#switches {
		display: none;
	}

	main {
		margin: 1vw var(--horizontal-margin);
		padding: 0.1px;
		width: var(--horizontal-width);
		min-height: calc(100vh - var(--header-visualHeight) - var(--footer-height) - 3vw);
	}
	aside:not([visible]) ~ main {
		--mw: calc(96vw / 100);
		--mh: calc((100vh - var(--header-height) - var(--footer-height) - 4vw) / 100);
		margin: calc(var(--header-height) + 2vw) var(--horizontal-margin) 1vw var(--horizontal-margin);
		padding: 0.1px;
		width: var(--horizontal-width);
		min-height: calc(100vh - var(--header-height) - var(--footer-height) - 4vw);
	}
	article {
		margin: 0px 0px 5vw 0px;
    	padding: 2vw 4vw;
		border-radius: 2.5vw;
	}
	.filterBar ~ article.row {
		margin: 0px;
		width: 100%;
	}
	article > .cover {
		height: 40vw;
	}
	article > .category {
		display: inline-block;
		margin: 4vw 0px 0px 0px;
		padding: 1.5vw 3vw;
		width: auto;
		position: static;
		font-size: 5vw;
		font-weight: bold;
		border-radius: 2.5vw;
		transform: unset;
	}
	article .title {
		margin: 4vw 2vw 0px 2vw;
		font-size: 5vw;
	}
	article > .category + :where(.title, div .title) {
		margin: 3vw 2vw 0px 2vw;
	}
	article.row .title {
		margin: 1vw 1vw;
		font-size: 5vw;
	}
	article .description {
		margin: 0px 2vw 2vw 2vw;
		font-size: 5vw;
	}
	article .info {
		margin: 4vw 0px 4vw 0px;
		font-size: 4.5vw;
	}
	article .info > span {
		--backgroundSize: 3.5vw;
		margin: 0px 3vw 0px 0px;
		padding: 0px 0px 0px 5vw;
		background-position-x: calc((5vw - var(--backgroundSize))/2);
	}
	.timeLine {
		margin: 0px 0px 0px 2.25vw;
		height: 100%;
	}
	.filterBar {
		margin: 1vw 0px;
		position: static;
		width: var(--horizontal-width);
		background: linear-gradient(to right, var(--category-color), var(--labelHovered-background));
	}
	.filterRotateBox {
		justify-content: flex-end;
		transform: unset;
		overflow: hidden;
	}
	.filterRotateBox > div {
		flex-direction: row;
		justify-content: center;
		margin: 0px 3vw;
		padding: 1.2vw 0px;
		width: auto;
		height: auto;
		gap: 2vw;
	}
	.filterRotateBox > div > :where(h2, p) {
		font-size: 5vw !important;
	}
	.portfolioGroup {
		margin: 0px 0px 10vw 0px;
	}
	.portfolioText {
		margin: 0px 0px 5vw 0px;
		font-size: 6vw;
	}
	.portfolioBox {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 5vw;
	}
	.portfolioBox > div {
		width: var(--horizontal-width);
		height: calc(var(--horizontal-width)/4*2.5);
	}
	.portfolioBox > div .mask {
		top: 50%;
		height: 50%;
	}
	.portfolioBox > div:hover .mask {
		top: 50%;
	}
	.portfolioBox > div .mask > h2 {
		margin: 4vw 0px 3vw 0px;
		height: 5vw;
		font-size: 4.5vw;
	}
	.portfolioBox > div:hover .mask > h2 {
		margin: 4vw 0px 3vw 0px;
		height: 5vw;
	}
	.portfolioBox > div .mask > p {
		margin: 0px;
		padding: 0px 4vw;
		height: calc(100% - 12vw);
		font-size: 4vw;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.portfolioBox > div:hover .mask > p {
		margin: 0px;
		padding: 0px 4vw;
		height: calc(100% - 12vw);
	}
	.portfolioBox .albumBox {
		grid-template-columns: 100%;
    	grid-template-rows: 10vw 60vw auto;
		height: auto;
	}
	.portfolioBox .albumBox > div.albumNameBox > h3 {
		transform: unset;
	}
	.portfolioBox .albumBox > :where(ul, ol) > li {
		height: 10vw;
	}
	.portfolioBox .albumBox > :where(ul, ol) > li > label {
		padding: 0px 5vw;
		font-size: 4vw;
		line-height: 10vw;
		text-wrap: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	footer {
		margin: 1vw var(--horizontal-margin);
		width: var(--horizontal-width);
		font-size: 4vw;
	}
	aside:not([visible]) ~ footer {
		margin: 1vw var(--horizontal-margin);
		width: var(--horizontal-width);
		font-size: 4vw;
	}
	
	aside {
		--aside-width: var(--horizontal-width);
		--aside-height: calc(100vh - var(--header-height));
		--pageSwitcher-height: 10vw;
		margin: var(--header-height) var(--horizontal-margin) 1vw var(--horizontal-margin);
		position: static;
		width: var(--horizontal-width);
		height: var(--aside-height);
		border-width: 0px 0px 0.1vw 0px;
	}
	@keyframes scrollToArticle_ani {
		from {
			opacity: 1;
			pointer-events: all;
		}
		to {
			opacity: 0;
			pointer-events: none;
		}
	}
	#scrollToArticle {
		display: block;
		margin: 0px 0px 5vw 0px;
		width: 20vw;
		height: 8vw;
		background-color: var(--header-backgroundColor);
		position: absolute;
		bottom: 0px;
		left: calc((var(--horizontal-width) - 20vw)/2);
		background-image: url('../image/templateIcon/arrow-down.svg');
		background-size: 7vw;
		background-position: center center;
		background-repeat: no-repeat;
		filter: var(--tabIcon-filter);
		border-radius: 100vw;
		opacity: 0;
		pointer-events: none;
		animation: scrollToArticle_ani calc(var(--headerOverflow-height-px)*1s) linear 0s 1 normal both;
		animation-delay: calc(var(--window-scrollY)*-1s);
	}
	#pageSwitcher > label {
		font-size: 5vw;
	}
	#pageSwitcher .page {
		--page-height: calc(var(--aside-height) - 2vw - var(--pageSwitcher-height));
	}
	#pageSwitcher .page h2 {
		font-size: 6vw;
	}
	#pageSwitcher .page .buttons > button {
		padding: 1vw 2vw;
		font-size: 5vw;
		border-radius: 2.5vw;
	}
	#pageSwitcher .page li {
		margin: 0px 0px 0px 5vw;
		font-size: 5vw;
	}
	.articlePageSwitcher > * {
		width: 7vw;
		height: 7vw;
		background-size: 4vw;
	}
	.articlePageSwitcher > *:first-child {
		width: 8vw;
	}
	.articlePageSwitcher > *:last-child {
		width: 8vw;
	}
	.articlePageSwitcher > div > input {
		margin: 1vw;
		width: 6vw;
		font-size: 3vw;
	}
	.articlePageSwitcher > div > span {
		margin: 1vw 1vw 1vw 0px;
		font-size: 3vw;
	}

	
	#character {
		display: none;
	}
}