@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.title.block {
			margin-top: 3rem;
			padding: 1rem;
			rotate: -5deg;
			scale: 2;
			transform-origin: top left;
		}
	}
}

@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;
				}
			}
		}
	}
}
