/*----- base formatting -----*/

html,
body,
span,
iframe,
h1,
h2,
h3,
h4,
pre,
del,
em,
img,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
tbody,
tr,
th,
td,
article,
aside,
footer,
header,
nav,
section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	backface-visibility: hidden;
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/*----- variables -----*/

:root {
	/*----- general -----*/
	--text: #444444;
	--link: #82be51;
	--link-hover: #ffffff;
	--link-hover-background: #ffc0cba9;
	--bold: #82be51;
	--back: white;
	--italic: #ffc0cb;
	--italic1: #ffc0cb;
	--italic2: #ffffff;
	--marker: #ffc0cb3a;
	--marker1: #ffc0cb3a;
	--marker2: ffc0cb3a;
	--highlight-text: #000000;
	--highlight-background: #82be5138;
	--h1-shadow: #82be517c;
	--h2-underline: #ffc0cb94;
	--h3-color: rgb(37, 37, 37);
	--h3-background: #82be5157;

	/*----- background -----*/
	--page-height: 100dvh;
	--page-width: 100dvw;
	--page-margin: 0;
	--page-padding: 0;
	--page-background-color: #f1f1f1;
	--box-sizing: border-box;
	--display-none: none;

	/*----- tab container-----*/
	--container-background: rgb(255, 255, 255);
	--border: #ffc0cb;
	--tab-display: grid;
	--tab-background-color: rgba(255, 192, 203, 0.333);
	--label-hover: #ffc0cb;

	/*----- scrollbar -----*/
	--scrollbar: #b5b5ff;
	--scrollbar-width: 0px;

	/*----- dark mode -----*/
	--container-background-dark: #46223a;
	--text-dark: rgb(231, 231, 231);
	--border-dark: #1b070a;
	--h3-color-dark: rgb(223, 223, 223);
	--h3-background-dark: #293320;
}

/*----- fonts -----*/

/* ibm-plex-sans-thai-300 - latin_latin-ext_thai */
@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-300.woff2') format('woff2');
}

/* ibm-plex-sans-thai-regular - latin_latin-ext_thai */
@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-regular.woff2') format('woff2');
}

/* ibm-plex-sans-thai-500 - latin_latin-ext_thai */
@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 500;
	src: url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-500.woff2') format('woff2');
}

/* ibm-plex-sans-thai-600 - latin_latin-ext_thai */
@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 600;
	src: url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-600.woff2') format('woff2');
}

/* ibm-plex-sans-thai-700 - latin_latin-ext_thai */
@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans Thai';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-700.woff2') format('woff2');
}

/* ibm-plex-sans-jp-300 - japanese_latin */
@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans JP';
	font-style: normal;
	font-weight: 300;
	src: url('/fonts/ibm-plex-sans-jp-v5-japanese_latin-300.woff2') format('woff2');
}

/* ibm-plex-sans-jp-500 - japanese_latin */
@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans JP';
	font-style: normal;
	font-weight: 500;
	src: url('/fonts/ibm-plex-sans-jp-v5-japanese_latin-500.woff2') format('woff2');
}


/*----- text highlight -----*/

::selection {
	color: var(--highlight-text);
	background: var(--highlight-background);
}

::-moz-selection {
	color: var(--highlight-text);
	background: var(--highlight-background);
}

/*----- webkit scrollbar -----*/

::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: 0;
	background-color: var(--main-box-background);
}

::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar);
	border-radius: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
	background-color: var(--main-box-background);
	border-radius: var(--scrollbar-width);
}

::-webkit-scrollbar-corner {
	background: var(--main-box-background);
}

/*----- body -----*/

*:before,
*:after,
*,
::after,
::before {
	box-sizing: border-box;
}

html,
body {
	display: flex;
	justify-content: center;
	margin: var(--page-margin);
	padding: var(--page-padding);
	font-family: 'IBM Plex Sans Thai', 'IBM Plex Sans JP';
	font-size: 1em;
	color: var(--text);
	background-color: var(--page-background-color);
	background-image: url('images/bg.jpg');

}

p {
	padding: 0;
	margin: 1em 0;
	text-indent: 2em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--link);
	text-decoration: underline;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
	color: var(--link-hover);
	background: var(--link-hover-background);
	border-radius: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

h1 {
	text-shadow: 2px 2px var(--h1-shadow);
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
	font-size: 1.5em;
	text-align: center;
	font-weight: 600;
	margin-top: 0.5em;
}

h2,
.h2 {
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
	font-size: 1.125em;
	font-weight: 400;
	margin: 0 0 12px 0;
	text-decoration: underline solid var(--h2-underline) 3px;
}

h3,
.h3 {
	font-size: 1em;
	line-height: 2em;
	text-align: right;
	vertical-align: middle;
	padding: 8px 18px;
	color: var(--h3-color);
	background-color: var(--h3-background);
	margin: 4px 0;
}

dt {
	color: #acd177;
	font-weight: 700;
	float: left;
	clear: both;
	margin: 0 0 5px;
	width: 12em;
}

dd {
	border-bottom: dotted 1px #999;
	margin: 0 0 5px 13em
}

em {
	background: var(--italic);
	/* Ie9 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--italic2)), color-stop(0.79, var(--italic2)), color-stop(0.9, var(--italic1)), color-stop(1, var(--italic1)));
	background: -webkit-linear-gradient(transparent 90%, var(--italic1) 0%);
	background: linear-gradient(transparent 90%, var(--italic1) 0%);
}

b,
strong {
	color: var(--bold);
}

hr {
	display: block;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
	height: 1px
}

ul {
	padding: 0em 0.2em 0em 1.8em;
}

li {
	margin: 1em 0;

	&>details {

		& > summary {
			cursor: help;
		}


	}
}

.marker {
	background: var(--marker);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--marker2)), color-stop(0.49, var(--marker2)), color-stop(0.5, var(--marker1)), color-stop(1, var(--marker1)));
	background: -webkit-linear-gradient(transparent 50%, var(--marker1) 0%);
	background: linear-gradient(transparent 50%, var(--marker1) 0%)
}

/*----- container -----*/

#container {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 90dvw;
	max-width: 1000px;
	height: 90dvh;
	max-height: 595px;
	/* display: flex;
	flex-direction: row;
	align-items: center; */
	border-radius: 10px;
	border: solid 1px var(--border);
	background-color: var(--container-background);
	overflow: hidden;
	display: grid;
	grid-template-columns: 300px auto;
	grid-template-rows: max-content auto;
	/* grid-column-gap: 1em;
grid-row-gap: 1em; 	 */
}

aside {
	/* height: 100%; */
	grid-area: 1 / 1 / 3 / 2;
	/* padding: 1em; */
	/* margin-bottom: -40px; */
	margin-bottom: 1em;
}

aside img {
	/* max-height: 100%; */
	/* height: 100%; */
	height: calc(100% + 1em);
	margin-bottom: -1em;
	max-width: 300px;
	object-fit: cover;
	object-position: 45% 10%;
}

.back a {
	margin: 8px;
	padding: 0 10px;
	position: absolute;
	top: 8px;
	left: 4px;
	color: var(--back);
	text-shadow: 0px 0px 1px var(--container-background);
}

.back a:hover,
.back a:focus {
	color: var(--text);
	text-shadow: 0px 0px 2px var(--text);
	background: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	scroll-margin-top: 500px;
	scroll-margin-bottom: 500px;
}

nav {
	grid-area: 1 / 2 / 2 / 3;
	/* width: 100%; */
	/* height: 200px; */
	/* height: min-content; */
	position: sticky;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.tab {
	cursor: pointer;
	transition: color 250ms;
	padding: 0.5em 0;
	border-right: solid 2px var(--tab-background-color);
	background-color: var(--tab-background-color);
	text-align: center;
	transition: all 250ms;
	color: unset;
	text-decoration: none;

	&:hover {
		color: var(--label-hover);
		background-color: rgba(255, 255, 255, 0.05);
	}
}

.active {
	color: var(--label-hover);
	background-color: rgba(255, 255, 255, 0.05);
}

.tab:last-of-type {
	border: none;
}

tab-container {
	/* height: 100%;
	width: 100%; */
	grid-area: 2 / 2 / 3 / 3;
	overflow: scroll;
}

tab-content {
	height: auto;
	/* overflow-y: scroll; */
	scroll-margin-top: 2em;
}

tab-content#home {
	display: block;
}

tab-content:not(:target) {
	display: none;
}

tab-content:target~#home {
	display: none;
}

.content {
	margin: 2rem 3rem;
}

@media only screen and (max-width: 820px) {
	#container {
		display: flex;
		flex-direction: column;
		width: 90dvw;
		max-width: 90dvw;
		height: 94dvh;
		max-height: 94dvh;
		/* grid-template-columns: 1fr;
	grid-template-rows: 20% min-content auto; */
	}

	.back a {
		background-color: #95c5f9b7;
		box-shadow: 0 0 4px 4px #95c5f9b7;
		border-radius: 10px;
	}

	.back a:hover,
	.back a:focus {
		background-color: #95c5f9a9;
		border-radius: 10px;
	}

	aside {
		height: 20%;
		width: 100%;
		margin: unset;
		padding: unset;
		overflow: hidden;
	}

	aside img {
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: cover;
		object-position: 50% 60%;
	}

	tab-container {
		height: 80%;
	}
}

@media (prefers-color-scheme: dark) {

	html,
	body {
		color: var(--text-dark);
		background-image: url('images/bgdark.jpg');
		background-color: rgba(50, 0, 63, 0.9);
		background-blend-mode: multiply;
	}

	#container {
		border: solid 1px var(--border-dark);
		background-color: var(--container-background-dark);
	}

	h3,
	.h3 {
		color: var(--h3-color-dark);
		background-color: var(--h3-background-dark);
	}

	aside img {
		opacity: 0.5;
		mix-blend-mode: hard-light;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	aside:hover img,
	aside:focus img {
		opacity: 0.8;
	}
}