global.css

*,
*::before,
*::after {
	box-sizing: inherit;
}
html,
body {
	height: 100%;
}
html {
	box-sizing: border-box;
	overflow: hidden;
}
body {
	overflow: auto;
	overflow-x: hidden;
}

:root {
	--font-text: "Inter", sans-serif;
	--font-code: "Fira Mono", monospace;

	--bg-base: #fafed7;
	--bg-dark: #2f2f2f;
	--bg-overlay: #000000cf;
	--bg-drawing-hover: #9b9b9b52;
	--bg-floating: #191919;
	--bg-surface: #f8f9fa;
	--bg-overflow: #dee2e6;
	--bg-btn-inactive: #434343;
	--bg-btn-inactive-dark: #2e2e2e;

	--fg-muted: #9d9d9d;
	--fg-muted-on-accent: #8fcabb;
	--error: #e03131;
	--accent: #078969;
	--accent-light: #80c3a0;
	--accent-dark: #136853;
	--fg-switch-low: #515151;
	--fg-switch-high: #f3f3f3;

	--cursor-interactive: default;
	--line-height-copy: 1.5;
}

body {
	font-family: var(--font-text);
	margin: 0;
	background: var(--bg-base);
	position: relative;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-dark);
}

@keyframes shake {
	0% {
		transform: translate(2px, 1px) rotate(0deg);
	}
	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}
	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}
	30% {
		transform: translate(0px, 2px) rotate(0deg);
	}
	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}
	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}
	70% {
		transform: translate(2px, 1px) rotate(-1deg);
	}
	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}
	90% {
		transform: translate(2px, 2px) rotate(0deg);
	}
	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

.shake {
	animation-name: shake;
	animation-duration: 0.5s;
	transform-origin: 50% 50%;
	animation-iteration-count: infinite;
}

.copy-container {
	width: 100%;
	max-width: 900px;
	margin: 40px auto;
	padding: 10px;
}

.copy-container > h1 {
	margin: 0;
	font-size: 2.5rem;
}

.copy-container p {
	line-height: var(--line-height-copy);
}

.grecaptcha-badge {
	visibility: hidden;
}

select {
	line-height: 1.2;
	background: var(--bg-btn-inactive);
	background: white;
	color: var(--bg-btn-inactive);
	border: 2px solid var(--bg-btn-inactive);
	padding: 8px 12px;
	padding-right: 20px;
	appearance: none;
	display: block;
	font-size: 0.9rem;
	font-family: inherit;
	outline: none;
	width: 100%;
	user-select: none;
}