<!-- weather -->
		<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
		{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}

		<style>
			.fallingObject {
        color: #fff;
        font-size: 1em;
        font-family: Arial;
        pointer-events: none;
        text-shadow: 0 0 1px #000;
      }
      @keyframes fallingObjects-fall {
        0% {
          top: -10%;
        }
        100% {
          top: 100%;
        }
      }
      @keyframes fallingObjects-shake {
        0% {
          transform: translateX(0px);
        }
        50% {
          transform: translateX(80px);
        }
        100% {
          transform: translateX(0px);
        }
      }
      .fallingObject {
        position: fixed;
        top: -10%;
        z-index: 9999;
        user-select: none;
        cursor: default;
        animation-name: fallingObjects-fall, fallingObjects-shake;
        animation-duration: 10s, 3s;
        animation-timing-function: linear, ease-in-out;
        animation-iteration-count: infinite, infinite;
        animation-play-state: running, running;
      }
      .fallingObject:nth-of-type(0) {
        left: 1%;
        animation-delay: 0s, 0s;
        & > div {
					transform: rotate(45deg);
        }
      }
      .fallingObject:nth-of-type(1) {
        left: 10%;
        animation-delay: 1s, 1s;
        & > div {
					transform: rotate(10deg);
        }
      }
      .fallingObject:nth-of-type(2) {
        left: 20%;
        animation-delay: 6s, 0.5s;
        & > div {
					transform: rotate(60deg);
        }
      }
      .fallingObject:nth-of-type(3) {
        left: 30%;
        animation-delay: 4s, 2s;
        & > div {
					transform: rotate(84deg);
        }
      }
      .fallingObject:nth-of-type(4) {
        left: 40%;
        animation-delay: 2s, 2s;
        & > div {
					transform: rotate(267deg);
        }
      }
      .fallingObject:nth-of-type(5) {
        left: 50%;
        animation-delay: 8s, 3s;
        & > div {
					transform: rotate(200deg);
        }
      }
      .fallingObject:nth-of-type(6) {
        left: 60%;
        animation-delay: 6s, 2s;
        & > div {
					transform: rotate(20deg);
        }
      }
      .fallingObject:nth-of-type(7) {
        left: 70%;
        animation-delay: 2.5s, 1s;
        & > div {
					transform: rotate(78deg);
        }
      }
      .fallingObject:nth-of-type(8) {
        left: 80%;
        animation-delay: 1s, 0s;
        & > div {
					transform: rotate(3120deg);
        }
      }
      .fallingObject:nth-of-type(9) {
        left: 90%;
        animation-delay: 3s, 1.5s;
        & > div {
					transform: rotate(123deg);
        }
      }
		</style>
		<div class="fallingObjects" id="weather" aria-hidden="true">
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
			<div class="fallingObject">
				<div>{{ metadata.weatherSymbol }}</div>
			</div>
		</div>

		<script>
			const weather = document.getElementById("weather");
			const weatherToggle = document.getElementById("weatherToggle");
			const weatherPreference = localStorage.getItem("weather");

			// Initial weather preference check on page load
			if (weatherPreference == 0) {
				weather.classList.add("hidden");
				weatherToggle.checked = false;
			} else {
				weather.classList.remove("hidden");
				weatherToggle.checked = true;
			};

			// Handle weather setting toggle
			weatherToggle.addEventListener('change', function() {
				if (this.checked) {
					localStorage.setItem("weather", 1);
					weather.classList.remove("hidden");
				} else {
					localStorage.setItem("weather", 0);
					weather.classList.add("hidden");
				};
			});
		</script>
<!-- /weather -->
