<div id="banner" onclick="rotateTheme()">
            <script>
              var themeIndex = 3; // determines starting theme, tracks current theme
              var themeColor = ["rgba(255,227,206,1.0)","rgba(24,56,94,1.0)","rgba(153,153,153,1.0)","rgba(171,166,254,1.0)"];
              var themeColorTint = ["rgba(255,227,206,0.5)","rgba(24,56,94,0.5)","rgba(153,153,153,0.5)","rgba(171,166,254,0.5)"];
              if (themeColor.length != themeColorTint.length) console.log("Color and tint array lengths mismatch.");
              else console.log("Loaded " + themeColor.length + " themes.");

              function setTheme(index) { // allows fo
                console.log("Initial theme: " + index + ".");
                document.getElementById("banner").style.backgroundImage = "url('res/banner" + index + ".png')";
                console.log("Initial theme color: " + themeColor[index-1] + ".");
                document.documentElement.style.setProperty("--main-color",themeColor[index-1],null);
                document.documentElement.style.setProperty("--main-color-tint",themeColorTint[index-1],null);              }

              function rotateTheme() {
                themeIndex++;
                if (themeIndex > themeColor.length) themeIndex=1;
                console.log("Switching to theme: " + themeIndex + ".");
                document.getElementById("banner").style.backgroundImage = "url('res/banner" + themeIndex + ".png')";
                console.log("Switching to theme color: " + themeColor[themeIndex-1] + ".");
                document.documentElement.style.setProperty("--main-color",themeColor[themeIndex-1],null);
                document.documentElement.style.setProperty("--main-color-tint",themeColorTint[themeIndex-1],null);
              }

              setTheme(themeIndex); // set initial theme
            </script>
          </div>