@charset "UTF-8";

@layers entry calculator authors;

@layer entry {
	body > main > section#entry {
		width: 1070px;

		> h1 {
			&:is(#brand) {
				position: relative;
				z-index: 400;
				margin: unset;
				margin-left: 2rem;
				font-family: "Cascadia Code", sans-serif;
				font-size: 7rem;

				+ h2#slogan {
					position: relative;
					z-index: 380;
					margin: unset;
					margin-top: -1.4rem;
					margin-left: 15rem;
				}
			}
		}

		section.block {
			--margin-text: 8px;
			--padding: 1rem;
			--border-radius: 8px;
			--border: 2px;
			--border-color: #2b2a2acc;
			--glass-background-color: #1a1a1acc;
			z-index: 500;
			position: absolute;
			padding: calc(var(--padding, 0px) * 0.7) var(--padding);
			border-radius: var(--border-radius);

			&:has(:is(h1, h2, h3, h4, h5):first-child) {
				border-radius: 0px var(--border-radius) var(--border-radius);
			}

			> :is(h1, h2, h3, h4, h5):first-child {
				--left: 0px;
				--top: var(--margin-text, 8px);
				--block-top: calc(var(--padding, 0px) * 0.7) + var(--border, 0px);
				margin-left: calc((var(--block-top) - var(--left, 0px)) * -1);
				margin-top: calc((var(--block-top) + 1em + var(--top, 0px)) * -1);
				margin-bottom: calc((var(--block-top) * -1 + var(--top, 0px)));
				font-family: "Rubik";
				font-weight: 400;
				padding: unset;
				font-family: "Rubik";
				font-weight: 400;
				padding: unset;
			}

			> :is(ol, ul) {
				margin: unset;
				padding: unset;
				font-family: "Rubik";
				list-style: none;
				counter-reset: entry;
				color: var(--hint-text-color, var(--text-color));
			}

			> :is(ol, ul) > li {
				counter-increment: entry;

				&:first-of-type {
					/*   counter-set: entry 0; */
				}

				&:before {
					--left: var(--margin-text, 8px);
					position: absolute;
					left: calc(
						(var(--padding, 0px) + var(--border, 0px) + var(--left, 0px)) * -1
					);
					margin-right: 10px;
					content: counter(entry);
					color: var(--text-color);
				}
			}

			&:is(#simple.white) {
				--glass-background-color: #fff;
				--border-color: #fff;
				z-index: 600;
				top: 175px;
				margin-left: 460px;
				font-weight: 600;
				border-radius: var(--border-radius, 8px);
				color: #000;

				> :is(h1, h2, h3, h4, h5):first-child {
					margin-left: 7px;
					color: var(--text-color);
				}
			}

			&:is(#services) {
				--border-color: #fff;
				--glass-background-color: #00000070;
				--blur: 5px;
				z-index: 550;
				margin-left: 110px;
				top: 195px;
			}

			&:is(#special) {
				--border-color: #fff;
				--glass-background-color: #00000070;
				--blur: 5px;
				z-index: 550;
				margin-left: 630px;
				top: 265px;
			}
		}
	}
}

@layer calculator {
	body > main > section#calculator {
		position: relative;
		width: min(600px, 60vw);
		display: flex;
		flex-direction: column;

		> div#lines {
			width: 100%;
			height: 300px;
			overflow: hidden;
			border-radius: 0 0 0.75rem 0.75rem;
			border: 2px solid #fff;
			filter: contrast(50);

			> h3.title {
				z-index: 300;
				position: absolute;
				top: 5vh;
				width: 100%;
				text-align: center;
				font-family: "Cascadia Code";
				font-size: 5rem;
				filter: blur(2px);
				font-weight: 800;
				color: #fff;
				text-shadow:
					0px 0px 500px #f00,
					0px 0px 20px #000;
				animation: 1.425s ease-in-out irot infinite alternate;
				translate: 0 0;
				transition:
					opacity 1s cubic-bezier(0, 1, 0, 1),
					translate 1s cubic-bezier(0, 1, 0, 1);

				&::before {
					position: absolute;
					z-index: -1;
					content: var(--text);
					animation:
						2.5625s ease-in-out ipurple infinite alternate,
						1.125s ease-in-out irot infinite alternate,
						0.475s cubic-bezier(0, 0.8, 0.2, 1) iscl infinite forwards;
				}

				@starting-style {
					opacity: 0;
					translate: 0 -480px;
				}
			}

			> canvas {
				z-index: 200;
				filter: blur(2.5px);
			}
		}

		> div.content.block {
			margin-top: 20vh;
			height: 60vh;
			display: flex;
			overflow: hidden;
			border-radius: 0.75rem;
			border: 2px solid #fff;

			> div.input {
				width: 400px;
				background-color: #fff;
			}
		}
	}
}

@keyframes ipurple {
	0% {
		color: #900;
	}

	100% {
		color: #f00;
	}
}
@keyframes irot {
	0% {
		rotate: -3deg;
	}

	100% {
		rotate: 3deg;
	}
}
@keyframes iscl {
	0% {
		scale: 1.2;
	}

	100% {
		scale: 1;
	}
}
@keyframes idrp {
	0% {
		translate: 0px 0px;
		box-shadow: 0px 0px rebeccapurple;
	}

	100% {
		translate: -4px -4px;
		box-shadow: 8px 8px rebeccapurple;
	}
}
@keyframes iwht {
	0% {
		background: #121212 radial-gradient(#2d2d2d 2%, #0000 4%);
		background-size: 64px 64px;
		background-position: center center;
		background-repeat: repeat;
	}
	50% {
		background: #121212 radial-gradient(#2d2d2d 2%, #0000 4%);
		background-size: 64px 64px;
		background-position: center center;
		background-repeat: repeat;
	}
	50.01% {
		background: #121212 radial-gradient(#2d2d2d 2%, #0000 4%);
		background-size: 64px 64px;
		background-position: 0 center;
		background-repeat: repeat;
	}
	78% {
		background: #121212 radial-gradient(#2d2d2d 2%, #0000 4%);
		background-size: 80px 80px;
		background-position: -2000px center;
		background-repeat: repeat;
	}

	99% {
		background: #fff radial-gradient(#fff 2%, #0000 4%);
		background-size: 96px 96px;
		background-position: -4000px center;
		background-repeat: repeat;
	}

	99.99% {
		background: #fff radial-gradient(#fff 2%, #0000 4%);
		background-size: 96px 96px;
		background-position: -4000px center;
		background-repeat: repeat;
	}

	100% {
		background: #000, linear-gradient(180deg, #000, #26003a);
	}
}

@layer authors {
	body > main > nav#authors {
		z-index: 1000;
		position: absolute;
		bottom: 1.5em;
		width: 100%;
		padding: 0.1em 0;
		display: inline-flex;
		background-color: #000c;
		backdrop-filter: blur(2px);

		> span.author {
			&:not(:last-child) {
				margin-right: 1.5rem;
			}

			> span.role {
				font-family: Rubik;
				font-weight: 600;
				opacity: 0.3;
				color: #fff;

				&:after {
					content: ":";
					margin-right: 0.3em;
				}
			}

			> a.name {
				opacity: 0.6;

				&:is(:hover, :focus) {
					opacity: 1;
				}

				&:is(:active) {
					color: #009;
				}
			}
		}
	}
}