Move styles to head, lower woo audio

_includes/weather.njk

@@ -1,117 +1,6 @@
 <!-- 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>