@import url("../../slides/css/talk.css");

#intro {
	align-items: start;
	padding-left: 4em;
	background: url("images/svelte-machine.avif") no-repeat bottom / 100% auto,
	radial-gradient(circle at 40% 30%,#ebf3f9,#d6dee4);

	h1 {
		margin-bottom: 2em;
		color: #4a4a55;
		text-shadow: none;
		font-size: 20vh;
		font-weight: 500;

		.logo {
			height: 1em;
			height: 1cap;
		}
	}
}

.frame-by-frame {
	position: relative;
	.delayed {
		position: absolute;
		top: 0;
		left: 0;
	}

	.current {
		z-index: 1;
	}
}

#css-reactive {
	background: transparent;
	color: inherit;

	pre {
		font-size: 70%;
		box-shadow: 0 0 0 .15em white;
	}

	.editor-container {
		gap: .5em;
	}

	.demo-target {
		font-size: 150%;

		input {
			scale: 2;
			transform-origin: bottom left;
		}
	}
}

#reactivity-hard {
	form {
		margin-block: 1em;
		font-size: 120%;
	}
}

.svelte-demo {
	h1 {
		position: absolute;
		z-index: 2;
		bottom: 1em;
		right: var(--slide-padding);
		max-width: 7em;
		text-align: right;
	}

	iframe {
		/* --zoom: 1.8;
		width: calc(100% / var(--zoom));
		height: calc(100% / var(--zoom));
		transform: scale(var(--zoom)); */
		width: 100%;
		height: 100%;
	}
}

#web-apis {
	img {
		max-height: calc(100vh - 25em);
	}
	pre {
		font-size: 50%;
	}
}