:root {
	--root-font-size: 62.5%;
	font-size: var(--root-font-size);
	scroll-behavior: smooth;
	--size-1: 0.2rem;
	--size-2: 0.4rem;
	--size-3: 0.6rem;
	--size-4: 0.8rem;
	--size-5: 1rem;
	--size-6: 1.2rem;
	--size-6: 1.4rem;
	--size-8: 1.6rem;
	--size-9: 1.8rem;
	--size-10: 2rem;
	--size-11: 2.2rem;
	--size-12: 2.4rem;
	--size-13: 2.6rem;
	--size-14: 2.8rem;
	--size-15: 3rem;
	--size-16: 3.2rem;
	--size-17: 3.4rem;
	--size-18: 3.6rem;
	--size-19: 3.8rem;
	--size-20: 4rem;
	--size-21: 4.2rem;
	--size-22: 4.4rem;
	--size-23: 4.6rem;
	--size-24: 4.8rem;
	--size-25: 5rem;
	--size-26: 5.2rem;
	--size-27: 5.4rem;
	--size-28: 5.6rem;
	--size-29: 5.8rem;
	--size-30: 6rem;
	--size-31: 6.2rem;
	--size-32: 6.4rem;
	--header1: var(--size-25);
	--header2: var(--size-22);
	--header3: var(--size-20);
	--header4: var(--size-18);
	--header5: var(--size-16);
	--header6: var(--size-14);
}

:root {
	--color-1-100: hsl(0, 0%, 100%); /* 	#ffffff	rgb(255, 255, 255) */
	--color-1-100-95: hsl(0, 0%, 100%, 0.95);
	--color-1-95: hsl(0, 0%, 95%); /* 	#f2f2f2	rgb(242, 242, 242) */
	--color-1-90: hsl(0, 0%, 90%); /* 	#e6e6e6	rgb(230, 230, 230) */
	--color-1-85: hsl(0, 0%, 85%); /* 	#d9d9d9	rgb(217, 217, 217) */
	--color-1-80: hsl(0, 0%, 80%); /* 	#cccccc	rgb(204, 204, 204) */
	--color-1-75: hsl(0, 0%, 75%); /* 	#bfbfbf	rgb(191, 191, 191) */
	--color-1-70: hsl(0, 0%, 70%); /* 	#b3b3b3	rgb(179, 179, 179) */
	--color-1-65: hsl(0, 0%, 65%); /* 	#a6a6a6	rgb(166, 166, 166) */
	--color-1-60: hsl(0, 0%, 60%); /* 	#999999	rgb(153, 153, 153) */
	--color-1-55: hsl(0, 0%, 55%); /* 	#8c8c8c	rgb(140, 140, 140) */
	--color-1-50: hsl(0, 0%, 50%); /* 	#808080	rgb(128, 128, 128) */
	--color-1-45: hsl(0, 0%, 45%); /* 	#737373	rgb(115, 115, 115) */
	--color-1-40: hsl(0, 0%, 40%); /* 	#666666	rgb(102, 102, 102) */
	--color-1-35: hsl(0, 0%, 35%); /* 	#595959	rgb(89, 89, 89) */
	--color-1-30: hsl(0, 0%, 30%); /* 	#4d4d4d	rgb(77, 77, 77) */
	--color-1-25: hsl(0, 0%, 25%); /* 	#404040	rgb(64, 64, 64) */
	--color-1-20: hsl(0, 0%, 20%); /* 	#333333	rgb(51, 51, 51) */
	--color-1-15: hsl(0, 0%, 15%); /* 	#262626	rgb(38, 38, 38) */
	--color-1-10: hsl(0, 0%, 10%); /* 	#1a1a1a	rgb(26, 26, 26) */
	--color-1-5: hsl(0, 0%, 5%); /* 	#0d0d0d	rgb(13, 13, 13) */
	--color-1-0-95: hsl(0, 0%, 0%, 0.95);
	--color-1-0: hsl(0, 0%, 0%); /* 	#000000	rgb(0, 0, 0) */
	--color-0-0-5: hsl(0, 0%, 0%, 0.5); /* 	#000000	rgb(0, 0, 0) */

	--color-2-100: hsl(300, 100%, 100%); /* #ffffff	rgb(255, 255, 255) */
	--color-2-95: hsl(300, 100%, 95%); /* #ffe6ff	rgb(255, 230, 255) */
	--color-2-90: hsl(300, 100%, 90%); /* #ffccff	rgb(255, 204, 255) */
	--color-2-85: hsl(300, 100%, 85%); /* #ffb3ff	rgb(255, 179, 255) */
	--color-2-80: hsl(300, 100%, 80%); /* #ff99ff	rgb(255, 153, 255) */
	--color-2-75: hsl(300, 100%, 75%); /* #ff80ff	rgb(255, 128, 255) */
	--color-2-70: hsl(300, 100%, 70%); /* #ff66ff	rgb(255, 102, 255) */
	--color-2-65: hsl(300, 100%, 65%); /* #ff4dff	rgb(255, 77, 255) */
	--color-2-60: hsl(300, 100%, 60%); /* #ff33ff	rgb(255, 51, 255) */
	--color-2-55: hsl(300, 100%, 55%); /* #ff1aff	rgb(255, 26, 255) */
	--color-2-50: hsl(300, 100%, 50%); /* #ff00ff	rgb(255, 0, 255) */
	--color-2-45: hsl(300, 100%, 45%); /* #e600e6	rgb(230, 0, 230) */
	--color-2-40: hsl(300, 100%, 40%); /* #cc00cc	rgb(204, 0, 204) */
	--color-2-35: hsl(300, 100%, 35%); /* #b300b3	rgb(179, 0, 179) */
	--color-2-30: hsl(300, 100%, 30%); /* #990099	rgb(153, 0, 153) */
	--color-2-25: hsl(300, 100%, 25%); /* #800080	rgb(128, 0, 128) */
	--color-2-20: hsl(300, 100%, 20%); /* #660066	rgb(102, 0, 102) */
	--color-2-15: hsl(300, 100%, 15%); /* #4d004d	rgb(77, 0, 77) */
	--color-2-10: hsl(300, 100%, 10%); /* #330033	rgb(51, 0, 51) */
	--color-2-5: hsl(300, 100%, 5%); /* #1a001a	rgb(26, 0, 26) */
	--color-2-0: hsl(300, 100%, 0%); /* #000000	rgb(0, 0, 0) */

	--current-font-size: var(--size-12);
	--main-bg-color-0: var(--color-1-100);
	--main-bg-color-0-95: var(--color-1-100-95);
	--main-bg-color-1: var(--color-1-100);
	--main-bg-color-2: var(--color-1-90);
	--main-bg-color-3: var(--color-1-25);
	--main-bg-color-4: var(--color-1-20);
	--main-bg-color-5: var(--color-1-15);
	--main-font-color-0: var(--color-1-0);
	--main-font-color-1: var(--color-1-5);
	--main-font-color-2: var(--color-1-15);
	--main-font-color-3: var(--color-1-70);
	--main-font-color-4: var(--color-1-90);
	--main-font-color-5: var(--color-1-100);
	--main-special-bg-color-0: var(--color-2-100);
	--main-special-bg-color-0-95: var(--color-2-100-95);
	--main-special-bg-color-1: var(--color-2-95);
	--main-special-bg-color-2: var(--color-2-85);
	--main-special-bg-color-3: var(--color-2-40);
	--main-special-bg-color-4: var(--color-2-25);
	--main-special-bg-color-5: var(--color-2-15);
	--main-special-bg-color-5-95: var(--color-0-0-5);
	--main-special-font-color-0: var(--color-1-0);
	--main-special-font-color-1: var(--color-1-10);
	--main-special-font-color-2: var(--color-1-15);
	--main-special-font-color-3: var(--color-1-70);
	--main-special-font-color-4: var(--color-1-85);
	--main-special-font-color-5: var(--color-1-95);
	--main-special-2-bg-color-0: var(--color-1-100);
	--main-special-2-bg-color-1: var(--color-1-15);
	--main-special-2-bg-color-2: var(--color-1-25);
	--main-special-2-bg-color-3: var(--color-1-45);
	--main-special-2-bg-color-4: var(--color-1-75);
	--main-special-2-bg-color-5: var(--color-1-90);
	--main-special-2-font-color-1: var(--color-1-95);
	--main-special-2-font-color-2: var(--color-1-75);
	--main-special-2-font-color-3: var(--color-1-0);
	--main-special-2-font-color-4: var(--color-1-25);
	--main-special-2-font-color-5: var(--color-1-15);
	--body-max-width: 150rem;
	--lazy-load-image-background-height: auto;
	--main-nav-height: 6rem;
	--main-transition-duration: 0.3s;
	--padding-main-1: 1em;
	--padding-main-1-three-quarters: 0.75em;
	--padding-main-1-half: 0.5em;
	--padding-main-1-quarter: 0.25em;
	/* --border-main-1: 1rem;
	--border-main-1-three-quarters: 0.75rem;
	--border-main-1-half: 0.5rem;
	--border-main-1-quarter: 0.25rem; */

	--sectionWrapper-box-shadow-length: 1rem;
	--sectionWrapper-margin-bottom: var(--padding-main-1-half);
	--sectionWrapper-padding: var(--padding-main-1-half);
	--modalContainer-background-color: var(--main-bg-color-0-95);
	--FormControl-min-width: none;
	--input-width: 25rem;
}

body.dark {
	--main-bg-color-0: var(--color-1-0);
	--main-bg-color-0-95: var(--color-1-0-95);
	--main-bg-color-1: var(--color-1-10);
	--main-bg-color-2: var(--color-1-20);
	--main-bg-color-3: var(--color-1-70);
	--main-bg-color-4: var(--color-1-85);
	--main-bg-color-5: var(--color-1-95);
	--main-font-color-0: var(--color-1-95);
	--main-font-color-1: var(--color-1-95);
	--main-font-color-2: var(--color-1-85);
	--main-font-color-3: var(--color-1-25);
	--main-font-color-4: var(--color-1-20);
	--main-font-color-5: var(--color-1-10);
	--sectionWrapper-box-shadow-length: 0.25rem;
	--main-special-bg-color-5: var(--color-2-20);
}
/* 
.special-scrollbar
::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
}
.special-scrollbar
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}
.special-scrollbar
::-webkit-scrollbar-thumb {
    background-color: var(--main-special-bg-color-5);
    border-radius: 1rem;
}
.special-scrollbar
::-webkit-scrollbar-track {
    background-color: var(--main-bg-color-2);
}

::selection {
    color: var(--main-special-bg-color-3);
    background-color: var(--main-special-font-color-4);
} */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}

html,
body {
	width: 100%;
	height: 100%;
	/* min-height: 100vh; */
	max-width: var(--body-max-width);
	margin: auto;
}

body {
	font-family: sans-serif, system-ui, monospace;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	font-size: var(--current-font-size);
	background-color: var(--main-bg-color-2);
	color: var(--main-font-color-1);
	overflow-y: auto;
	overflow-x: hidden;
}

h1 {
	font-size: var(--header1);
}

h2 {
	font-size: var(--header2);
}

h3 {
	font-size: var(--header3);
}

h4 {
	font-size: var(--header4);
}

h5 {
	font-size: var(--header5);
}

h6 {
	font-size: var(--header6);
}

a {
	text-decoration: none;
}

a,
button,
label,
input[type='submit'],
input[type="button"] {
	cursor: pointer;
}

a,
button,
textarea {
	color: inherit;
}

a,
button,
label {
	font-size: inherit;
}

textarea,
input,
select {
	font-size: 75%;
}

nav ol,
nav ul {
	list-style: none;
}

:not([dir='rtl']) ol,
:not([dir='rtl']) ul {
	padding-left: 2em;
}

[dir='rtl'] ol,
[dir='rtl'] ul {
	padding-right: 2em;
}

nav ol,
nav ul,
:not([dir='rtl']) nav ol,
:not([dir='rtl']) nav ul,
[dir='rtl'] nav ol,
[dir='rtl'] nav ul {
	padding: 0;
}

img {
	max-width: 100%;
}

button:disabled,
input[type='submit']:disabled {
	cursor: not-allowed;
	user-select: none;
	filter: grayscale(0.75) blur(0.05rem) brightness(0.5) hue-rotate(45deg);
}

strong {
	font-weight: bolder;
}

em {
	font-style: italic;
}

small {
	font-size: 80%;
}

input[type='radio'],
input[type='checkbox'] {
	accent-color: var(--main-special-bg-color-5);
}

/**/
blockquote {
	background-color: var(--main-special-bg-color-2);
	padding: 0.1em 0.5em;
	color: black;
	position: relative;
	margin: var(--padding-main-1) 0;
}

:not([dir='rtl']) blockquote {
	padding-left: 1.5em;
}

[dir='rtl'] blockquote {
	padding-right: 1.5em;
}

blockquote::before {
	content: '';
	position: absolute;
	top: 0;
	padding: 0.5em;
	background-color: var(--main-special-bg-color-5);
	height: 100%;
}

:not([dir='rtl']) blockquote::before {
	left: 0;
}

[dir='rtl'] blockquote::before {
	right: 0;
}
/**/

/**/
code[data-code-inline='true'] {
	vertical-align: bottom;
	display: inline-block;
	background-color: var(--main-font-color-3);
	color: var(--main-bg-color-3);
	padding: 0.05em 0.25em;
	margin-top: 0.1em;
	border-radius: 0.25em;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}
/**/

/**/
a.animation-1 {
	position: relative;
	transition: filter ease-in-out var(--main-transition-duration)
		calc(var(--main-transition-duration) * 0.5);
}

a.animation-1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(100%);
	width: 100%;
	padding: 0.0625em 0;
	background-color: var(--main-bg-color-4);
	transition: all ease-in var(--main-transition-duration);
}

a.animation-1:hover::after,
a.animation-1:focus::after {
	width: 0;
}

a.animation-1:hover,
a.animation-1:focus {
	filter: drop-shadow(0rem 0rem 0.3rem var(--main-bg-color-3));
}
/**/

@media screen and (max-width: 700px) {
	:root {
		/* font-size: 60%; */

		--header1: var(--size-22);
		--header2: var(--size-20);
		--header3: var(--size-18);
		--header4: var(--size-16);
		--header5: var(--size-14);
		--header6: var(--size-12);
		--padding-main-1: calc(1em * 0.9);
		--padding-main-1-three-quarters: calc(0.75em * 0.9);
		--padding-main-1-half: calc(0.5em * 0.9);
		--padding-main-1-quarter: calc(0.25em * 0.9);
		/* --current-font-size: var(--size-10); */
	}
}

@media screen and (max-width: 400px) {
	:root {
		/* font-size: 60%; */

		--header1: var(--size-20);
		--header2: var(--size-18);
		--header3: var(--size-16);
		--header4: var(--size-14);
		--header5: var(--size-12);
		--header6: var(--size-11);
		--padding-main-1: calc(1em * 0.75);
		--padding-main-1-three-quarters: calc(0.75em * 0.7);
		--padding-main-1-half: calc(0.5em * 0.8);
		--padding-main-1-quarter: calc(0.25em * 0.85);
		/* --current-font-size: var(--size-10); */
	}
}
