<main>
	<button>TOGGLE ME</button>
</main>

<footer>
	<p>Demo for <em><a href="https://brm.us/toggles" target"_top">https://brm.us/toggles</a></em></p>
</footer

<!-- CSS Toggles Polyfill -->
<script src="https://unpkg.com/@oddbird/css-toggles@1.0.2/dist/css-toggles.min.js" type="module"></script>

html {
  toggle-root: lightswitch;
}

button {
  toggle-trigger: lightswitch;
}

button::before {
	content: '🌚 ';
}
html:toggle(lightswitch) button::before {
	content: '🌝 ';
}




html, body {
	height: 100%;
	margin: 0;
}

body {
	display: grid;
	place-content: center;
}

main {
	text-align: center;
}