@import url("/assets/fonts/Inter.css");
@import url("/assets/fonts/Poppins.css");
@import url("/assets/fonts/JetBrains_Mono.css");
@import url('https://fonts.googleapis.com/css2?family=Linefont:wght@4..1000&display=swap');
@import url('./icons.css');

:root[data-theme="light"],
:root:not([data-theme]) {
	color-scheme: light;

	--text: #0B0B0B;
	--background: #FFFFFF;
	--primary: #E77E7E;
	--secondary: #FFB3B3;
	--accent: #92C4D8;

	--okay: #186727;
	--warning: #AfA220;
	--danger: #811818;
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--text: #FFFFFF;
	--background: #0B0B0B;
	--primary: #7B3F3F;
	--secondary: #5A2C2C;
	--accent: #27596D;

	--okay: #09C42C;
	--warning: #DECF20;
	--danger: #A50F0F;
}

/* :root[data-theme="light"],
:root:not([data-theme]) {
	color-scheme: light;

	--text: #010513;
	--background: #f0f2ff;
	--primary: #576bef;
	--secondary: #fe8176;
	--accent: #fede3e;

	--okay: #186727;
	--warning: #AfA220;
	--danger: #811818;
}
:root[data-theme="dark"] {
	color-scheme: dark;

	--text: #ebeffe;
	--background: #00020e;
	--primary: #1024a7;
	--secondary: #890c01;
	--accent: #c1a101;

	--okay: #09C42C;
	--warning: #DECF20;
	--danger: #A50F0F;
} */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(68px + 4rem);
}

body {
	background-color: var(--background);
	color: var(--text);
	font-family: "Inter";
	font-weight: 400;
	padding: 1rem 10%;
	padding-top: 68px;
	margin: 0px;
	width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
}

html {
	font-size: 100%;
}

/* 16px */

h1 {
	font-size: 4.210rem;
	/* 67.36px */
}

h2 {
	font-size: 3.158rem;
	/* 50.56px */
}

h3 {
	font-size: 2.369rem;
	/* 37.92px */
}

h4 {
	font-size: 1.777rem;
	/* 28.48px */
}

h5 {
	font-size: 1.333rem;
	/* 21.28px */
}

small {
	font-size: 0.750rem;
	/* 12px */
}

.row {
	display: inline-flex !important;
	flex-direction: row !important;
	gap: 1rem;
}

.column {
	display: inline-flex !important;
	flex-direction: column !important;
	gap: 1rem;
}

.h-center {
	display: inline-flex;
	justify-content: center;
}

.v-center {
	display: inline-flex;
	align-items: center;
}

nav {
	position: fixed;
	border-bottom: 1px solid color-mix(in srgb, var(--text), transparent 90%);
	background-color: var(--background);
	top: 0px;
	left: 0px;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 15%;
	box-sizing: border-box;
	z-index: 2147483646;

	transition: padding, border-bottom;
	transition-duration: 400ms;
}

nav.scroll {
	padding-top: 0.5rem;
}

nav:not(.scroll):has(.banner.show) {
	padding-top: 3.5rem;
}

nav .banner {
	position: absolute;
	top: -3rem;
	left: 0px;
	background-color: var(--accent);
	height: 3rem;
	width: 100%;
	transition: top;
	transition-duration: 400ms;
	color: var(--background);
}

nav:not(.scroll) .banner.show {
	top: 0px;
}

nav .sitename .img {
	position: relative;
	width: 30px;
	height: 30px;
	transform-origin: center center;
}

nav .sitename .img::before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	z-index: -1;
}

nav .sitename .img.animate {
	animation: brain-pulse 1s;
}

nav .sitename .img.animate::before {
	animation: brain-pulse_before 1s;
}

:root[data-theme="light"] nav .sitename p,
:root:not([data-theme]) nav .sitename p {
	color: var(--primary) !important;
}

nav .menu {
	display: none !important;
}

@media only screen and (width < 700px) {
	nav {
		padding: 0.5rem 1rem;
	}

	nav .links {
		display: none !important;
	}

	nav .menu {
		display: flex !important;
	}

	nav .links.show {
		display: flex !important;
		position: fixed;
		width: 100%;
		flex-direction: column-reverse;
		align-items: center;
		top: 3rem;
		left: 0px;
		background-color: var(--background);
		box-sizing: border-box;
		padding: 0.5rem 0.5rem;
		border-bottom: 1px solid color-mix(in srgb, var(--text), transparent 90%);
	}

	nav:has(.banner.show):not(.scroll) .links.show {
		top: 7.2rem;
	}
}

header {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	gap: 1rem;
}

header .explode {
	width: 138px;
	height: 138px;
	transform-origin: top left;
	/* --slope: 0.00703112840467;
	--y-int: -5.42171206226;
	--scale: calc( var(--slope) * var(--window-width) + var(--y-int) );
	scale: max( min(var(--scale), 4), 0 ); */
	scale: 4;
}

@media only screen and (width < 1370px) {
	header .explode {
		display: none;
	}
}

section {
	width: 100%;
}

.button,
button {
	padding: 0.5em 2em;
	background-color: var(--primary);
	border-radius: 0.5rem;
	transition: transform ease 0.2s, box-shadow ease 0.2s;
	display: inline-block;
	font-size: 1rem;
	z-index: 2;
	white-space: nowrap;
	border: none;
	cursor: pointer;
}

.button:hover,
button:hover {
	transform: translate(0, -3px);
	box-shadow: 0 20px 80px -10px var(--primary);
}

::placeholder {
	color: var(--background);
	opacity: 1;
	/* Firefox */
}


[href],
[onclick] {
	cursor: pointer;
}

[href]:not(.hilight, .button),
[onclick]:not(.hilight, .button) {
	color: color-mix(in srgb, var(--text), var(--primary) 50%);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	padding: 0 1rem;
}

[href]:not(.hilight)::before,
[onclick]:not(.hilight)::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 50%;
	left: 0px;
	display: inline-block;
	width: 0%;
	height: 0.5rem;
	background-color: color-mix(in srgb, var(--text), var(--primary) 75%);
	opacity: 0;
	transition: opacity, translate, width;
	transition-duration: 300ms;
	border-radius: 0.25rem;
}

.hilight {
	position: relative;
	color: var(--text);
	text-decoration: none;
}

.hilight::after {
	content: "";
	z-index: -1;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% 0px;
	display: inline-block;
	width: 100%;
	height: 50%;
	background-color: var(--primary);
	opacity: 1;
	transition: opacity, translate, width;
	transition-duration: 300ms;
	border-radius: 0.25rem;
}

.hilight:hover:after {
	opacity: 1;
	translate: -50% 5px;
	width: calc(100% + 2rem);
}

@keyframes brain-pulse {
	0% {
		scale: 1;
	}

	25% {
		scale: 0.95;
	}

	70% {
		scale: 1;
	}

	100% {
		scale: 1;
	}
}

@keyframes brain-pulse_before {
	0% {
		background-color: rgba(255, 82, 82, 0.7);
		scale: 0;
	}

	70% {
		background-color: rgba(255, 82, 82, 0);
		scale: 1.5;
	}

	100% {
		background-color: rgba(255, 82, 82, 0);
		scale: 1;
	}
}

.gradient {
	background: linear-gradient(120deg, var(--primary), var(--accent));
}

.text-gradient {
	background: linear-gradient(120deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.card {
	border-radius: 10px;
	background-color: var(--secondary);
	box-sizing: border-box;
	padding: 1rem;
}

.card:not(.constant) {
	transition: scale, filter;
	transition-duration: 400ms;
}

.card:not(.constant):hover {
	z-index: 999;
	scale: 1.1;
}

*:has(.card:not(.constant):hover)>.card:not(.constant):not(:hover) {
	filter: brightness(80%);
}

@media (pointer: none),
(pointer: coarse) {
	.card:not(.constant):hover {
		z-index: initial;
		scale: 1;
	}

	*:has(.card:not(.constant):hover)>.card:not(.constant):not(:hover) {
		filter: brightness(100%);
	}
}

.text-gradient span {
	animation: letter-bounce 1s infinite;
}

@keyframes letter-bounce {

	from,
	to {
		translate: 0px 0px;
		scale: 1;
	}
}

div#theme-toggle {
	position: relative;
	transform-origin: center center;
	transition: scale, rotate;
	transition-duration: 400ms;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
}

div#theme-toggle>[data-theme] {
	transition: opacity, translate, scale;
	transition-duration: 400ms;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 1;
	width: 24px;
	height: 24px;
	user-select: none;
	transform-origin: center center;
}

div#theme-toggle:active {
	scale: 0.9;
	rotate: -22.5deg;
}

:root[data-theme="dark"] div#theme-toggle [data-theme="light"],
:root[data-theme="light"] div#theme-toggle [data-theme="dark"] {
	opacity: 0;
	translate: 5px 0;
	scale: 0.5;
}

div#theme-toggle>[data-theme=dark],
div#theme-toggle>[data-theme=light] {
	background-color: var(--text);
}



.explode {
	position: relative;
	width: 552px;
	height: 552px;
	overflow: hidden;
}

.explode * {
	position: absolute;
	transition: translate, rotate, scale, opacity;
	transition-duration: 400ms;
	user-select: none;
	transition-timing-function: cubic-bezier(1, 0, 1, 0);
}

.explode *:nth-child(1) {
	clip-path: polygon(0 0, 40% 40%, 35% 60%, 0 50%);
}

.explode *:nth-child(2) {
	clip-path: polygon(0 0, 40% 40%, 35% 60%, 100% 0%);
}

.explode *:nth-child(3) {
	clip-path: polygon(100% 0%, 35% 60%, 70% 75%, 100% 0%);
}

.explode *:nth-child(4) {
	clip-path: polygon(0% 50%, 35% 60%, 70% 75%, 0% 100%);
}

.explode *:nth-child(5) {
	clip-path: polygon(100% 0%, 70% 75%, 0% 100%, 100% 100%);
}

.explode.boom *:nth-child(1) {
	translate: -7.5px 0px;
	rotate: 5deg;
	scale: 0.9;
}

.explode.boom *:nth-child(2) {
	translate: 2.5px -5px;
	rotate: -5deg;
	scale: 1.1;
}

.explode.boom *:nth-child(3) {
	translate: 5px 2.5px;
	rotate: 10deg;
	scale: 1.1;
}

.explode.boom *:nth-child(4) {
	rotate: 10deg;
	translate: -10px 7.5px;
	scale: 0.9;
}

.explode.boom *:nth-child(5) {
	rotate: 20deg;
	translate: 12.5px 15px;
	scale: 0.9;
}

.explode *:nth-child(6) {
	transition-duration: 0ms;
	transition-delay: 400ms;
	user-select: all;
}

.explode.boom *:nth-child(6) {
	transition-delay: 0ms;
}

.explode.boom *:nth-child(6) {
	opacity: 0;
}

div#theme-change-cover {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 2147483647;
	user-select: none;
	pointer-events: none;
}

div#theme-change-cover.animate {
	background: red;
	pointer-events: all;
	animation: swoosh 1s forwards linear;
	--accent-light: #92C4D8;
	--accent-dark: #27596D;
}

div#theme-change-cover.animate[theme-to="light"] {
	background-color: var(--accent-light);
}

div#theme-change-cover.animate[theme-to="dark"] {
	background-color: var(--accent-dark);
}

@keyframes swoosh {
	from {
		clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
		/* background-color: var(--background); */
	}

	25% {
		clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 0%);
		/* background-color: var(--background); */
	}

	50% {
		clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
		/* background-color: var(--background); */
	}

	50.01% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
		/* background-color: var(--text); */
	}

	75% {
		clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
		/* background-color: var(--text); */
	}

	to {
		clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
		/* background-color: var(--text); */
	}
}

@keyframes swoosh-in {
	from {
		clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
	}

	50% {
		clip-path: polygon(0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 0%);
	}

	to {
		clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
	}
}

@keyframes swoosh-out {
	from {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
		/* background-color: var(--text); */
	}

	50% {
		clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
		/* background-color: var(--text); */
	}

	to {
		clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
		/* background-color: var(--text); */
	}
}

.clickable {
	cursor: pointer;
}

body:has(dialog[open]) {
	overflow: hidden
}

dialog {
	position: relative;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	margin: 0px;
	background: var(--secondary);
	border: 3px solid var(--primary);
	padding: 1rem;
	border-radius: 2rem;
}

lable[for] {
	margin-right: 1rem;
}

input[role=switch] {
	--time: 1s;
	--state-off: var(--background);
	--state-on: var(--text);
	--dot-size: 1rem;
	--dot-margin: 0.2rem;
	--border-thickness: 0.2rem;
	--border-color: var(--text);
	;
	position: relative;
	appearance: none;
	box-sizing: border-box;
	border: 3px solid var(--state-on);
	box-sizing: content-box;
	width: calc(var(--dot-size) * 3);
	height: var(--dot-size);
	padding: var(--dot-margin);
	border-radius: var(--dot-size);
	overflow: hidden;
	background: var(--state-off);
	transition: background 200ms;
	cursor: pointer;

	&:before {
		content: "";
		position: relative;
		display: inline-block;
		left: 0px;
		width: var(--dot-size);
		height: var(--dot-size);
		background: var(--text);
		border-radius: calc(var(--dot-size) / 2);
		transition: width, left, background;
		transition-duration: 200ms;
	}

	&:checked {
		background: var(--text);

		&:before {
			z-index: 1;
			left: calc(100% - var(--dot-size));
			background: var(--background);
		}
	}

	&:active:not([disabled]) {
		&:before {
			width: calc(var(--dot-size) * 1.5);
		}

		&:checked:before {
			left: calc(100% - var(--dot-size) * 1.5);
		}
	}

	&[disabled] {
		border-color: color-mix(in srgb, white 50%, var(--border-color));
		cursor: not-allowed;

		&:checked {
			background: color-mix(in srgb, white 50%, var(--text));
		}

		&:checked:before {
			background: color-mix(in srgb, white 50%, var(--background));
		}

		&:not(:checked) {
			background: color-mix(in srgb, white 50%, var(--background));
		}

		&:not(:checked):before {
			background: color-mix(in srgb, white 50%, var(--text));
		}
	}
}

:focus-visible {
	outline: 3px solid var(--accent);
}