/*-------------AUTO THEME-----------*/
/* light theme */
html {
	color-scheme: light dark;
}

:root {
	--text: #000;
	--bg: #f2f2f2;
	--bg-block: #fff;
	--bg-contrast: #222222;
	--cyan: #007A7A;
	--cyan-hover: #009899;
	/* button, file names (run as administrator, smt.jpg) */
	--red: #DB0000;
	/* program names (This PC) */
	--orange: #996300;
	/* menu/submenu/etc */
	--yellow: #6F7000;
	/*text to copy, codes*/
	--green: #008000;
	/*keyboard shortcuts, combinations*/
	--blue: #0000FF;
	/* translate something? in nghieng */
	--block-shadow: rgba(0, 0, 0, 0.1);
	--button-shadow: rgba(0, 0, 0, 0.5);
	--text-shadow: rgba(0, 255, 255, 0.8);
	--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--text: #fff;
		--bg: #121212;
		--bg-block: #222222;
		--bg-contrast: #f2f2f2;
		--cyan: #0fffff;
		--cyan-hover: #1FFFFF;
		--red: #FF3D3D;
		--orange: #FFA500;
		--yellow: #FFFF00;
		--green: #00ff00;
		--blue: #3385FF;
		--block-shadow: rgba(0, 255, 255, 0.1);
		--button-shadow: rgba(0, 255, 255, 0.5);
		--text-shadow: rgba(0, 255, 255, 0.8);
	}
}

body {
	font-family: var(--system-ui);
	/* font-size: 1.1em; */
	/* max-width: 800px; */
	margin: 0em auto;
	padding: 0em;
	line-height: 1.6;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	background-color: var(--bg);
	color: var(--text);
}

.bodyy {
	max-width: 800px;
	padding: 0px 8px;
	margin: 52px auto 0px;
}


/*-------------CUSTOM TEXT FORMATTING-----------*/
a {
	color: var(--cyan);
}

a:link,
a:visited {
	/* background-color: #f44336; */
	color: var(--cyan);
	text-decoration: none;
	/* padding: 15px 25px;
 	 text-align: center;
 	 display: inline-block; */
}

a:active {
	color: var(--cyan-hover);
}

img,
embed,
object,
video {
	height: auto;
}

img,
video {
	display: block;
	margin: 10px auto;
	text-align: center;
	width: 75%;
	transition: transform 0.2s ease;
	box-shadow: 0 0 5px 2px var(--block-shadow);
}

/* NOT on mobile (so only on PC n stuff) */
@media (hover: hover) and (pointer: fine) {
	a:hover {
		color: var(--cyan-hover);
	}

	/* underline links */
	.bodyy a:hover {
		text-decoration: underline;
	}

	/* zoom media on hover with class "hover" */
	img.zoom150:hover,
	video.zoom150:hover {
		transform: scale(1.5, 1.5);
		box-shadow: 0 0 15px 3px var(--block-shadow);
	}

	img.zoom200:hover,
	video.zoom200:hover {
		transform: scale(2, 2);
		box-shadow: 0 0 16px 3px var(--block-shadow);
	}

	img.zoom250:hover,
	video.zoom250:hover {
		transform: scale(2.5, 2.5);
		box-shadow: 0 0 18px 3px var(--block-shadow);
	}

	img.zoom300:hover,
	video.zoom300:hover {
		transform: scale(3, 3);
		box-shadow: 0 0 20px 3px var(--block-shadow);
	}

	/* https://css-tricks.com/hash-tag-links-padding/ */
	h2,
	h3 {
		scroll-margin-top: 52px;
	}
}

@media screen and (max-width: 800px) {

	/* when on mobile, img video stuff full width */
	img,
	video {
		width: 100%;
	}
}

.caption {
	color: var(--text);
	font-style: italic;
	text-align: center;
	font-size: 90%;
}

.indent {
	text-indent: 30px;
}

ul,
ol {
	text-indent: 0px;
	padding-left: 30px;
}

h1 {
	text-align: center;
	color: var(--cyan);
}


/* code formatting */
code {
	background: var(--bg-block);
	color: var(--green);
	padding: 4px;
}

/* codeblock formatting. <pre><code> will drag the code block to full width */
pre {
	white-space: pre-wrap;
	background: var(--bg-block);
	display: block;
	padding: 4px;
}


/* center shits */
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	/* width: 50%; */
}


/* review star color https://www.w3schools.com/howto/howto_css_star_rating.asp */
.checked {
	color: orange;
}

/*-------------TOP NAVBAR-----------*/
/* https://www.w3schools.com/howto/howto_css_topnav_right.asp */
/* Create a top navigation bar with a grey background color  */
.topnav {
	background-color: #333;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a,
.topnav-right .topnav-subpages a,
.topnav-right span.topnav-hamburger {
	float: left;
	color: #f2f2f2;
	text-align: center;
	padding: 6px 10px 8px;
	text-decoration: none;
	font-size: 110%;
	display: block;
}

.topnav .topnav-txt {
	float: left;
	padding: 8px 0px 6px;
	color: #f2f2f2;
	font-size: 100%;
}

/* Add an active class to highlight the current page */
.topnav-right div.topnav-subpages a.active,
.topnav-right span.active {
	background-color: #00FFFF;
	color: black;
	text-decoration: none;
}

/* Right-aligned section inside the top navigation */
.topnav-right {
	float: right;
}

/* Change the color of links on hover */
@media (hover: hover) and (pointer: fine) {
	.topnav-right div.topnav-subpages a:hover {
		background-color: #FED766;
		color: black;
	}
}

/* Hide the hamburger on the topnav on big screens */
.topnav-right span.topnav-hamburger {
	display: none;
}

/* When the screen is less than [specified] pixels wide, hide all links, not excepting for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
	.topnav {
		position: static;
	}

	/* .topnav a:not(:first-child) { */
	.topnav-right .topnav-subpages a {
		display: none;
		padding: 4px 8px;
	}

	.topnav-right span.topnav-hamburger {
		float: right;
		display: block;
	}

	/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
	.topnav-right.responsive {
		position: relative;
	}

	.topnav-right.responsive span.topnav-hamburger {
		position: absolute;
		right: 0;
		top: 0;
	}

	.topnav-right.responsive .topnav-subpages {
		margin-top: 48px;
	}

	.topnav-right.responsive .topnav-subpages a {
		float: none;
		display: block;
		text-align: left;
	}
}


/*--------------------BREADCRUMBS-----------------------*/
/* Style post breadcrumbs */
ul.breadcrumb {
	padding: 4px 10px;
	list-style: none;
	background-color: var(--bg);
	color: var(--text);
}

/* Display list items side by side */
ul.breadcrumb li {
	display: inline;
	font-size: 90%;
}

/* Add a symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
	padding: 6px;
	color: var(--text);
	content: "›";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
	color: var(--cyan);
	text-decoration: none;
}

/* Add a color on mouse-over */
@media (hover: hover) and (pointer: fine) {
	ul.breadcrumb li a:hover {
		color: var(--cyan-hover);
		text-decoration: underline;
	}
}


/* Responsive layout - makes the image columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
	.column {
		width: 100%;
	}
}

/* https://css-tricks.com/a-perfect-table-of-contents-with-html-css */
/* table of content */
.toc-list,
.toc-list ul {
	list-style-type: none;
}

.toc-list {
	padding: 0;
}

.toc-list ul {
	padding-inline-start: 2ch;
}

.visually-hidden {
	clip-path: inset(100% 0% 0% 0%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.toc-list>li>a {
	font-weight: bold;
	margin-block-start: 1em;
}

.toc-list li>a>.page {
	min-width: 2ch;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.toc-list li>a>.title {
	/* position: relative; */
	overflow: hidden;
}


/* flexbox formatting - for post lists */
.post-list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 16px;
	margin: 10px 5px;
}

.postoverview>h2 {
	margin: 4px;
	font-size: 110%;
}

.postoverview>p {
	margin: 4px;
	color: var(--text);
}

.postoverview {
	text-align: left;
	padding: 4px;
}

.posts {
	background-color: var(--bg-block);
	transition: box-shadow 0.2s ease;
	flex: 1;
	align-items: stretch;
	box-shadow: 0 0px 4px var(--block-shadow);
	/* min-width: 800px; */
}

@media (hover: hover) and (pointer: fine) {
	.posts:hover {
		box-shadow: 0 0px 12px var(--block-shadow);
	}

	/* remove underline from bodyy/div (class=post-list)/a in post lists */
	.bodyy div.post-list a:hover {
		text-decoration: none;
	}
}

.posts a:active {
	box-shadow: 0 0px 2px var(--block-shadow);
}


/* https://www.w3schools.com/css/css3_flexbox.asp */
/* flexbox formatting - for horizontally centered boxes */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px;
	font-size: 90%;
}

.shortcuts {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 10px 5px;
}

.shortcut {
	background-color: var(--bg-block);
	flex: 1;
	/* max-width: 150px; */
	padding: 10px;
	text-align: center;
	transition: all 0.2s ease;
	color: var(--text);
}

.shortcut>h3 {
	margin: 4px;
	font-size: 90%;
}

@media (hover: hover) and (pointer: fine) {
	.shortcut:hover {
		box-shadow: 0 0px 8px var(--block-shadow);
		text-shadow: 0 0px 8px var(--text-shadow);
	}
}

.shortcut:active {
	box-shadow: 0 0px 2px var(--block-shadow);
}

/* Responsive layout - makes a one column layout */
@media screen and (max-width: 800px) {
	.shortcuts {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.shortcut {
		/* max-width: 800px; */
		padding: 4px;
	}
}


.hiddenStringButton {
	background-color: var(--bg);
	color: var(--text);
	border: none;
	border-radius: 5px;
	overflow: hidden;
	/* padding: 2px; */
	font-size: 90%;
	box-shadow: 0 0px 6px var(--button-shadow);
	transition: all 0.1s ease;
}

@media (hover: hover) and (pointer: fine) {
	.hiddenStringButton:hover {
		box-shadow: 0 0px 10px var(--button-shadow);
		text-shadow: 0 0 2px var(--text-shadow);
	}
}

.hiddenStringButton:active {
	transform: translateY(1px);
	box-shadow: 0 0px 2px var(--button-shadow);
	text-shadow: 0 0 2px var(--text);
}

/* other formattings */
@media screen and (max-width: 800px) {
	.bodyy {
		margin: 0px auto;
	}
}

.widebodyy {
	max-width: 1080px;
	padding: 0px 8px;
	margin: 52px auto 0px;
}

.block {
	display: block;
}


/* icomoon.io */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}

.icon-bars {
	width: 0.857421875em;
}

.icon-star {
	width: 0.9287109375em;
	fill: #ffc900;
}


/* align image to the right of text in articles. add this class */
.align-right {
	display: block;
	margin-left: auto;
}


/* https://www.w3schools.com/css/css3_flexbox_responsive.asp */
/* flexbox for article columns */
.flex-container,
.flex-container-toc {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	align-items: center;
}

.flex-container img,
video {
	width: 100%;
}

.flex-item-left {
	flex: 75%;
}

.flex-item-right {
	flex: 25%;
}

.flex-item-2 {
	flex: 50%;
}

.flex-item-3 {
	flex: 33%;
}

/* Responsive layout - makes a one column layout instead of a multiple-column layout */
@media (max-width: 800px) {
	.flex-container {
		flex-direction: column;
	}

	.flex-container-toc {
		flex-direction: column-reverse;
	}
}


/* https://css-tricks.com/a-complete-guide-to-css-media-queries/ */
/* accessibilities */
@media screen and (prefers-reduced-motion: reduce) {
	* {
		/* Very short durations means JavaScript that relies on events still works */
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@media (inverted-colors) {

	img,
	video {
		filter: invert(100%);
	}
}


/* table formatting */
table {
	margin: 0em auto;
	width: 100%;
	border: 3px solid var(--cyan);
	border-collapse: collapse;
	overflow-x: auto;
}

th {
	border: 1px solid;
	border-top: 2px solid var(--cyan);
	border-bottom: 2px solid var(--cyan);
}

td {
	border: 1px solid;
}

th,
td {
	border-collapse: collapse;
	padding: 2px 8px;
}

tr:hover :not(th) {
	background-color: var(--bg-block);
}


/* https://www.w3schools.com/howto/howto_js_copy_clipboard.asp */
.copyTooltip {
	position: relative;
	display: inline-block;
}

.copyTooltip .copyTooltipText {
	visibility: hidden;
	width: 50px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 120%;
	left: 50%;
	margin-left: -30px;
	opacity: 0;
	transition: opacity 0.3s;
}

.copyTooltip .copyTooltipText::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.copyTooltip:hover .copyTooltipText {
	visibility: visible;
	opacity: 1;
}


textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	resize: none;
	max-width: 100%;
}