<div class="controls">
  <button id="colors" class="btn-colors" aria-label="Change colors" title="Change colors">
    <svg data-icon="color" viewBox="0 0 512 512" width="100">
      <path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z" />
    </svg>
  </button>
  <button id="fullscreen" class="btn-fullscreen" aria-label="Toggle fullscreen" title="Toggle fullscreen">
    <svg data-icon="open" viewBox="0 0 448 512" width="100">
      <path d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z" />
    </svg>
    <svg data-icon="close" viewBox="0 0 512 512" width="100">
      <path d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z" />
    </svg>
  </button>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-content: center;
  grid-template-areas: "body";
  overflow: hidden;
}

body::before,
body::after {
  --size: 150vmax;
  --duration: 8s;
  
  content: "";
  grid-area: body;
  width: var(--size);
  height: var(--size);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

body::before {
  animation-name: rotate;
  animation-duration: var(--duration);
  background: linear-gradient(to left, var(--palette));
}

body::after {
  animation-name: rotate, fade;
  animation-duration: calc(var(--duration) / 2), var(--duration);
  background: linear-gradient(to right, var(--palette));
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}

@keyframes fade {
  50% {
    opacity: 0;
  }
}

/* Gradients generated at https://learnui.design/tools/gradient-generator.html */
body {
  --rotate: 0deg;
  --palette: #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060,
    #ffb56b;
}

[data-color="1"] {
  --rotate: 90deg;
  --palette: #004466, #006080, #007e90, #009b97, #29b794, #74d18b, #b7e881,
    #fffb80;
}

[data-color="2"] {
  --rotate: 180deg;
  --palette: #f3ff17, #ffde00, #ffb900, #ff8f39, #ff6062, #ff298b, #ff00b5, #ff1fdd;
}

[data-color="3"] {
  --rotate: 270deg;
  --palette: #054ce6, #0072ff, #008fff, #00a5ff, #00b8e4, #00c9bb, #00d890, #36e367;
}

/* Controls */
.controls {
  --offset: 0.5rem;
  position: fixed;
  top: var(--offset);
  left: var(--offset);
  right: var(--offset);
  width: calc(100% - var(--offset) * 2);
  display: flex;
  justify-content: space-between;
  padding-left: min(5vmin, env(safe-area-inset-left));
  padding-right: min(5vmin, env(safe-area-inset-right));
  z-index: 1;
}

button {
  display: flex;
  align-items: center;
  font-family: system-ui;
  font-size: inherit;
  padding: 1rem;
  color: white;
  fill: currentcolor;
  background-color: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:active {
  transform: translateY(1px);
}

.btn-colors [data-icon] {
  width: 1.4em;
  transform: rotate(var(--rotate));
}

.btn-fullscreen [data-icon] {
  width: 1.2em;
}

[data-icon="close"] {
  display: none;
}

.is-fullscreen [data-icon="open"] {
  display: none;
}

.is-fullscreen [data-icon="close"] {
  display: block;
}

const btnFullScreen = document.getElementById("fullscreen");
const btnColors = document.getElementById("colors");

btnFullScreen.addEventListener("click", toggleFullScreen);
btnColors.addEventListener("click", toggleColorClass);
document.addEventListener("fullscreenchange", toggleFullScreenClass);
document.addEventListener("webkitfullscreenchange", toggleFullScreenClass);

function toggleColorClass() {
  document.body.dataset.color == 3 ? document.body.dataset.color = 0 : document.body.dataset.color++;
}

function toggleFullScreenClass() {
  document.body.classList.toggle("is-fullscreen", document.fullscreenElement || document.webkitFullscreenElement);
}

function toggleFullScreen() {
  if (!document.fullscreenElement && !document.webkitFullscreenElement) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen();
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

function init() {
  document.body.dataset.color = 0;
  if (!document.fullscreenEnabled) {
    btnFullScreen.remove();
  }
}

init();