@tailwind base;
@tailwind components;
@tailwind utilities;

html {
	font-family: 'Outfit Variable', sans-serif;
}

body.light-mode {
	background: #e4ebff;
}
body {
	background-color: #1c1c1f;
}
body::after {
	content: '';
	position: absolute;
	left: 0px;
	top: 0;
	background-image: url(/pattern_square.svg);
	opacity: 0.2;
	mask-image: radial-gradient(70% 80% at 50% 50%, black 40%, transparent 70%);
	-webkit-mask-image: radial-gradient(70% 80% at 50% 50%, black 40%, transparent 70%);
	mask-image: radial-gradient(
		70% 80% at calc(var(--cursorX) * 100%) calc(var(--cursorY) * 100%),
		black 40%,
		transparent 70%
	);
	-webkit-mask-image: radial-gradient(
		70% 80% at calc(var(--cursorX) * 100%) calc(var(--cursorY) * 100%),
		black 40%,
		transparent 70%
	);
	width: 100%;
	height: 100%;
	z-index: -100;
}
.box {
	height: 100%;
	width: 100%;
}
.char-hover {
	color: rgb(147 51 234);
	filter: drop-shadow(0 0 5px #6447ea);
}
@keyframes binary {
	25% {
		content: '01010101 01101110 01100001 00100000 01110110 01100101 01111010 00100000 01100011 01101111 01101110 01110110 01100101 01110010 01110100 01101001 01100100 01101111 00100000 01110011 01110101 00100000 01110011 01110101 01100101 11110001 01101111 00100000 01100101 01101110 00100000 01110010 01100101 01100001 01101100 01101001';
	}
	50% {
		content: '01100100 01100001 01100100 00101100 00100000 01110011 01100101 00100000 01110011 01101001 01101110 01110100 01101001 11110011 00100000 01100001 01100010 01110010 01110101 01101101 01100001 01100100 01101111 00101100 00100000 01110100 01100001 01101110 01110100 01101111 00100000 01110000 01101111 01110010 00100000 01101100 ';
	}
	75% {
		content: '01100001 00100000 01101101 01100001 01100111 01101110 01101001 01110100 01110101 01100100 00100000 01100100 01100101 00100000 01110011 01110101 00100000 01110000 01110010 01101111 01100101 01111010 01100001 00100000 01100011 01101111 01101101 01101111 00100000 01110000 01101111 01110010 00100000 01101100 01100001 00100000 ';
	}
	100% {
		content: '01100001 01101100 01100101 01100111 01110010 11101101 01100001 00100000 01111001 00100000 01100110 01100101 01101100 01101001 01100011 01101001 01100100 01100001 01100100 00100000 01110001 01110101 01100101 00100000 01100101 01101100 01101100 01101111 00100000 01101100 01100101 00100000 01100011 01101111 01101110 01100110 01100101 01110010 11101101 01100001 00101110 00001010 ';
	}
}
.box::before,
.box::after {
	animation: 1s linear 1s infinite normal none running binary;
	content: '01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100 01100101 01001111 01110000 01100101 01101110 00100000 01110100 01101000 01100101 00100000 01100011 01101111 01101110 01110011 01101111 01101100';
	left: 0px;
	color: white;
	font-size: 16px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	width: 100%;
	opacity: 0.3;
	-webkit-mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 5%,
		rgb(0, 0, 0) 20%,
		rgb(0, 0, 0) 80%,
		rgba(0, 0, 0, 0) 95%
	);
	mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 5%,
		rgb(0, 0, 0) 20%,
		rgb(0, 0, 0) 80%,
		rgba(0, 0, 0, 0) 95%
	);
	white-space: nowrap;
	overflow: hidden;
	z-index: 200;
}
.box::before {
	bottom: 0px;
}
body.light-mode .box::before,
body.light-mode .box::after {
	color: black;
	opacity: 0.5;
}
body.light-mode::after {
	filter: invert(1);
	opacity: 0.4;
}
body.light-mode main {
	background: rgba(255, 255, 255, 0.75);
	color: black;
}
body.light-mode dialog {
	background: white;
	color: black;
}
