@font-face {
	font-family: "Pixel Operator";
	src: url("PixelOperator.ttf") format("truetype");
}

@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

/* ROOT */
:root {
	--font-size: 1em;
	--font-family: "Pixel Operator";
	--transition: 0.5s ease-out;
	--pointer: url(assets/cursor_pointer.png), pointer;
}

/* CSS RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* html5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* rainbow gradient
    background: linear-gradient(90deg, rgba(92, 51, 45, 1) 9%, rgba(91, 58, 40, 1) 
	22%, rgba(92, 73, 45, 1) 35%, rgba(74, 72, 42, 1) 48%, 
	rgba(65, 78, 59, 1) 61%, rgba(59, 70, 76, 1) 74%, 
    rgba(74, 61, 78, 1) 87%, rgba(85, 58, 64, 1) 100%);
*/

/* GLOBAL */
/* accessibility */
.sr-only {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
}

/* main styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	image-rendering: pixelated;
}

:focus-visible {
	outline: 1px solid var(--text-color);	
}

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

html,
body {
	height: 100%;
	margin: 0;
	cursor: url(assets/cursor_default.png), auto;
}

body {
	background-image: var(--background-img);
	background-color: var(--bg-color);
	color: var(--text-color);
	overflow-x: hidden;
	image-rendering: crisp-edges;

	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

body,
button {
	font-family: var(--font-family);
	font-size: var(--font-size);
	line-height: 1.4em;
	text-transform: lowercase;
}

h1,
h2 {
	font-size: 1.5em;
	font-weight: bold;
}

h3 {
	font-size: 1.25em;
	font-weight: bold;
}

h1,
h2,
h3,
h4 {
	color: var(--link-color);
}

a,
nav ul li a span {
	color: var(--link-color);
	text-decoration: none;
	font-style: italic;
	cursor: var(--pointer);
}

.bold {
	font-weight: bold;
}

.override-case {
	text-transform: none !important;
}

/* colors test */
.red {
	color: var(--red);
}

.orange {
	color: var(--orange);
}

.yellow {
	color: var(--yellow);
}

.green {
	color: var(--green);
}

.teal {
	color: var(--teal);
}

.blue {
	color: var(--blue);
}

.violet {
	color: var(--violet);
}

.magenta {
	color: var(--magenta);
}

/* sparkles */
.sparkle-color {
	z-index: 9999;
	position: absolute;
	display: block;
	pointer-events: none;
}

.sparkle-color > * {
	animation: rainbow 8s ease infinite;
}

@keyframes rainbow {
	0% {
		background-color: var(--red);
	}

	13% {
		background-color: var(--orange);
	}

	25% {
		background-color: var(--yellow);
	}

	38% {
		background-color: var(--green);
	}

	50% {
		background-color: var(--teal);
	}

	63% {
		background-color: var(--blue);
	}

	75% {
		background-color: var(--violet);
	}

	88% {
		background-color: var(--magenta);
	}

	100% {
		background-color: var(--red);
	}
}

/* SETTINGS */
#docSettings {
	width: auto;
	height: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
	display: none;
}

#docSettings.active {
	display: flex;
}

#docSettings section {
	gap: 1.5em;
}

#docSettings .container {
	position: relative;
	width: 100%;
	height: fit-content;
	text-align: center;
	align-items: center;
}

#docSettings .setting-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
}

.setting-container > .container {
	flex-flow: row wrap;
}

.mode-btns,
.theme-btns,
.size-btns,
.font-btns {
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

#docSettings button {
	width: 48px;
	min-height: 48px;
	background-color: var(--container-color-2);
}

#docSettings .font-btns button {
	aspect-ratio: unset;
	width: fit-content;
	padding: 0 1em;
}

/* mode buttons */
.mode-btns button:nth-child(1) {
	background-image: var(--icon-moon);
}

.mode-btns button:nth-child(2) {
	background-image: var(--icon-sun);
}

/* theme buttons */
.theme-btns {
	max-width: 12em;
}

.theme-btns button:nth-child(1) {
	background-image: url(assets/icons/favicon.png);
}

.theme-btns button:nth-child(2) {
	background-image: url(assets/stars/star_r.png);
}

.theme-btns button:nth-child(3) {
	background-image: url(assets/stars/star_o.png);
}

.theme-btns button:nth-child(4) {
	background-image: url(assets/stars/star_y.png);
}

.theme-btns button:nth-child(5) {
	background-image: url(assets/stars/star_g.png);
}

.theme-btns button:nth-child(6) {
	background-image: url(assets/stars/star_t.png);
}

.theme-btns button:nth-child(7) {
	background-image: url(assets/stars/star_b.png);
}

.theme-btns button:nth-child(8) {
	background-image: url(assets/stars/star_v.png);
}

.theme-btns button:nth-child(9) {
	background-image: url(assets/stars/star_m.png);
}

#closeSettings {
	background-image: var(--icon-x);
	position: absolute;
	top: -1em;
	right: -1em;
	width: fit-content !important;
	height: 16px;
	aspect-ratio: 1;
	margin: 1.5em;
	background-color: transparent !important;
	display: block;
}

/* primary content */
header,
main,
footer,
#docSettings {
	background-color: var(--bg-color);
	padding: 2em;
	overflow: scroll;
	filter: drop-shadow(0em 0em 0.5em var(--shadow-color));
}

header {
	width: 25%;
}

main {
	width: 75%;
}

footer {
	width: 100%;
	display: flex;
	justify-content: center;
	height: fit-content;
}

.wrapper,
.main-wrapper {
	display: flex;
	gap: 1em;
}

.wrapper {
	width: 90vmin;
	min-height: 90vh;
	height: 100%;
	flex-flow: column nowrap;
	justify-content: center;
}

.main-wrapper {
	width: 100%;
	height: 75vmin;
	flex-flow: row nowrap;
}

/* containers & sections */
header .container,
main .container,
footer .container {
	width: 100%;
}

.container {
	gap: 1em;
}

.group,
.container,
section {
	display: flex;
	flex-flow: column nowrap;
	gap: 1em;
}

.group {
	gap: 0.25em;
}

/* buttons */
button {
	background-color: transparent;
	border: none;
	cursor: var(--pointer);
	color: var(--link-color);
}

button:hover {
	filter: brightness(135%) saturate(50%);
	transition: var(--transition);
}

.img-btn,
#docSettings .img-btn {
	background-position: center;
	background-repeat: no-repeat;
}

.img-btn:hover {
	filter: brightness(150%);
	transition: var(--transition);
}

/* nav toggling */
.page {
	display: none;
}

.active {
	display: flex;
}

.selected {
	background-color: var(--container-color) !important;
}

.dropdown-icon {
	background-image: var(--icon-dropdown);
	width: 8px;
	height: 8px;
	display: inline-block;
	transform: rotate(0deg);
	transition: 0.25s ease-out;
}

.dropdown-icon.active {
	transform: rotate(-180deg);
}

/* SIDEBAR */
#navToggle {
	background-color: var(--container-color);
	text-align: center;
	font-weight: bold;
	width: 100%;
	padding: 0.5em;
	cursor: var(--pointer);

	display: none;
}

header h2 {
	text-align: center;
	font-size: 1.125em;
}

nav,
nav ul {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5em;
	align-items: center;
	width: 100%;
}

nav section {
	width: 100%;
}

nav ul li {
	display: inline-block;
	position: relative;
	width: 100%;
	max-width: 200px;
}

nav ul li::before {
	content: "";
	position: absolute;
	background-color: var(--nav-color);
	z-index: -1;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

nav ul li:hover::before,
.dropdown-item:hover::before {
	filter: brightness(120%);
	transition: var(--transition);
}

nav ul li a,
.dropdown-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em;
	width: 100%;
	margin-bottom: 2px;
	border: none;
}

nav ul li a span {
	padding-bottom: 2px;
}

.dropdown-item {
	font-style: italic;
	cursor: var(--pointer);
	color: var(--link-color);
}

.dropdown-menu {
	display: none;
	gap: 0;
}

.dropdown-menu.active {
	display: flex;
}

.no-hover:hover::before {
	filter: none;
}

.external-icon {
	display: inline-block;
	content: "";
	background-image: var(--icon-external);
	width: 8px;
	height: 8px;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0.75;
}

/* nav color cycle */
.nav-red {
	--nav-color: var(--red-bg);
}
.nav-orange {
	--nav-color: var(--orange-bg);
}
.nav-yellow {
	--nav-color: var(--yellow-bg);
}
.nav-green {
	--nav-color: var(--green-bg);
}
.nav-teal {
	--nav-color: var(--teal-bg);
}
.nav-blue {
	--nav-color: var(--blue-bg);
}
.nav-violet {
	--nav-color: var(--violet-bg);
}
.nav-magenta {
	--nav-color: var(--magenta-bg);
}

/* MAIN */
#home.container section:first-child {
	gap: 0.125em;
}

#home section {
	gap: 0.5em;
}

#art img {
	max-width: 400px;
}

/* unordered lists */
main ul {
	list-style-position: inside;
}

main ul li {
	list-style-image: var(--li-img);
}

main ul li ul {
	list-style: "- " inside;
	padding-left: 1em;
}

#changelog ul li:first-child {
	font-weight: bold;
}

#changelog ul li ul li:first-child {
	font-weight: 400;
}

li.no-marker {
	list-style: none;
	padding-left: 0;
}

#comment {
	height: -webkit-fill-available;
}

#comment section {
	height: 100%;
}

iframe {
	filter: var(--filter);
	min-height: 600px;
}

#gifs .group {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
}

#gifs img {
	max-width: 100%;
}

.socials-marker:nth-child(1) {
	list-style-image: var(--icon-ig);
}
.socials-marker:nth-child(2) {
	list-style-image: var(--icon-lb);
}
.socials-marker:nth-child(3) {
	list-style-image: var(--icon-tumblr);
}
.socials-marker:nth-child(4),
.socials-marker:nth-child(5) {
	list-style-image: var(--icon-yt);
}

.socials-marker::marker {
	margin: 2px;
}

/* li color cycle */
.li-red {
	list-style-image: var(--red-star);
}
.li-orange {
	list-style-image: var(--orange-star);
}
.li-yellow {
	list-style-image: var(--yellow-star);
}
.li-green {
	list-style-image: var(--green-star);
}
.li-teal {
	list-style-image: var(--teal-star);
}
.li-blue {
	list-style-image: var(--blue-star);
}
.li-violet {
	list-style-image: var(--violet-star);
}
.li-magenta {
	list-style-image: var(--magenta-star);
}

/* FOOTER */
footer .container {
	gap: 1em;
	width: fit-content;
}

footer .group {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

#clock {
	word-spacing: 0.5em;
}

.button-container {
	width: 88px;
	height: 31px;
	position: relative;
}

.button-container {
	opacity: 0.67;
}

.button-bg {
	width: 88px;
	height: 31px;
	mix-blend-mode: color;
	filter: saturate(2);
	z-index: 99;
	position: absolute;
	top: 0;
	right: 0;
}

.button-container:nth-child(1) .button-bg {
	background: linear-gradient(90deg, var(--red-bg) 0%, var(--orange-bg) 100%);
}

.button-container:nth-child(2) .button-bg {
	background: linear-gradient(90deg, var(--yellow-bg) 0%, var(--green-bg) 100%);
}

.button-container:nth-child(3) .button-bg {
	background: linear-gradient(90deg, var(--teal-bg) 0%, var(--blue-bg) 100%);
}

.button-container:nth-child(4) .button-bg {
	background: linear-gradient(
		90deg,
		var(--violet-bg) 0%,
		var(--magenta-bg) 100%
	);
}

.button-container:hover {
	transition: var(--transition);
	opacity: 1;
}

.button-bg:hover {
	transition: var(--transition);
	opacity: 0;
}

#openSettings {
	background-image: var(--icon-gear);
	width: 16px;
	height: 16px;
}

/* RESPONSIVE */
@media (max-width: 700px) {
	body {
		height: fit-content;
	}

	.wrapper {
		margin: 1em;
	}

	.wrapper,
	.main-wrapper {
		gap: 1em;
		height: fit-content;
	}

	.main-wrapper {
		flex-direction: column;
	}

	#docSettings {
		width: 80vmin;
		height: 90vmax;
		overflow: scroll;
	}

	header,
	main {
		width: 100%;
	}

	header,
	main,
	footer,
	#docSettings {
		padding: 1.5em;
	}

	#navToggle {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5em;
	}

	nav section {
		display: none;
	}

	nav.active {
		display: flex;
	}

	#gifs .group {
		grid-template-columns: 1fr;
	}

	footer .group:nth-child(2) {
		flex-wrap: wrap;
		justify-content: center;
	}
}