/*
  WE LOVE TEA, TOO
  Background and logo transition — 54-second repeating cycle

  Timing:
    00–24s  black background / white logo
    24–27s  transition to white background / original logo colors
    27–51s  white background / original logo colors
    51–54s  transition to black background / white logo

  The SVG artwork is embedded below, so this HTML/CSS pair does not
  require a separate logo file.
*/

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  overflow: hidden;
  background-color: #000;
  animation: page-background-cycle 54s linear infinite;
}

.page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wltt-logo {
  display: block;
  width: min(60vw, 60vh);
  max-width: 60%;
  max-height: 60%;
  aspect-ratio: 174.46 / 219.12;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTc0LjQ2IDIxOS4xMiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOnVybCgjbGluZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjEzMi4zMiIgeTE9Ii01Ljg3IiB4Mj0iLTE3Ljk4IiB5Mj0iMjY1LjI5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIuMTEiIHN0b3AtY29sb3I9IiNlZmM4M2IiLz48c3RvcCBvZmZzZXQ9Ii4yNCIgc3RvcC1jb2xvcj0iI2YwNTYzYyIvPjxzdG9wIG9mZnNldD0iLjI3IiBzdG9wLWNvbG9yPSIjZTU1MzUxIi8+PHN0b3Agb2Zmc2V0PSIuMzIiIHN0b3AtY29sb3I9IiNkMjRlNzgiLz48c3RvcCBvZmZzZXQ9Ii4zNyIgc3RvcC1jb2xvcj0iI2M2NGI5MSIvPjxzdG9wIG9mZnNldD0iLjM5IiBzdG9wLWNvbG9yPSIjYzI0YTlhIi8+PHN0b3Agb2Zmc2V0PSIuNzkiIHN0b3AtY29sb3I9IiMwMGIyYzAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMGIyYzAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDEuMDRRMCwwLDEuNjIsMGgxMi4wOXExLjM2LDAsMS45OC4zOXQxLjE5LDEuNjhsNi41MywxNS4yNiw3LjU3LTE0LjQ4cS45MS0xLjY5LDEuNDYtMi4yN1EzMi45OSwwLDMzLjYzLDBxLjY1LDAsMS4yLjU4LjU1LjU4LDEuNDYsMi4yN2w3LjU2LDE0LjQ4LDYuNTQtMTUuMjZxLjU4LTEuMjksMS4xOS0xLjY4LjYyLS4zOSwxLjk4LS4zOWgxMi4wOXExLjYyLDAsMS42MiwxLjA0LDAsLjM4LS4zMywxLjE2bC0xOC44OCw0MS4wMXEtLjkxLDItMS40NiwyLjY4LS41NS42OC0xLjI2LjY4LS42NSwwLTEuMjMtLjY1LS41OC0uNjQtMS42Mi0yLjU4bC04Ljg2LTE2LjYzLTguODYsMTYuNjNxLTEuMDMsMS45NC0xLjYxLDIuNTgtLjU5LjY1LTEuMjMuNjUtLjcyLDAtMS4yNi0uNjgtLjU1LS42OC0xLjQ2LTIuNjhMLjMyLDIuMlEwLDEuNDIsMCwxLjA0Wk03Mi44MywwaDI4LjkxcTEuOTQsMCwxLjk0LDEuOTR2Ny43NnEwLDEuOTQtMS45NCwxLjk0aC0xNC40OXEtLjY0LDAtLjkuMjMtLjI2LjIzLS4yNi45NHYyLjk3cTAsLjY1LjI2LjkxLjI2LjI2LjkuMjZoMTIuMzZxMS45NCwwLDEuOTQsMS45NHY3LjQzcTAsMS45NS0xLjk0LDEuOTVoLTEyLjM2cS0uNjQsMC0uOS4yMi0uMjYuMjMtLjI2Ljk0djMuMDRxMCwuNjUuMjYuOTEuMjYuMjUuOS4yNWgxNC41NnExLjk0LDAsMS45NCwxLjk0djcuNzdxMCwxLjk0LTEuOTQsMS45NGgtMjguOThxLTEuOTQsMC0xLjk0LTEuOTRWMS45NFE3MC44OSwwLDcyLjgzLDBaTTYuNDksNTcuNjJoMTEuMzJxMS45NCwwLDEuOTQsMS45NHYyOC43MnEwLC42NS4yNi45MS4yNi4yNi45MS4yNmgxNC41NXExLjk0LDAsMS45NCwxLjk0djkuNTdxMCwxLjk0LTEuOTQsMS45NEg2LjQ5cS0xLjk0LDAtMS45NC0xLjk0di00MS40UTQuNTUsNTcuNjIsNi40OSw1Ny42MlpNNDIuODQsNjguMDFxMy4xNy01LjQsOC44My04LjM4LDUuNjYtMi45OCwxMi44NC0yLjk4LDcuMjQsMCwxMi45MywyLjk4LDUuNywyLjk3LDguODcsOC4zOCwzLjE2LDUuNCwzLjE3LDEyLjMyLDAsNi45Mi0zLjE3LDEyLjI1LTMuMTcsNS4zNC04Ljg3LDguMzEtNS42OSwyLjk4LTEyLjkzLDIuOTgtNy4yNSwwLTEyLjg3LTIuOTgtNS42My0yLjk3LTguOC04LjMxLTMuMTctNS4zMy0zLjE3LTEyLjI1UTM5LjY3LDczLjQxLDQyLjg0LDY4LjAxWk02OS4zOSw4OC45OXEyLjE3LTEuMTYsMy40LTMuMzksMS4yMy0yLjIzLDEuMjMtNS4yNywwLTMuMDQtMS4yMy01LjMxLTEuMjMtMi4yNi0zLjQtMy40Ni0yLjE3LTEuMTktNC44OC0xLjE5LTIuNzIsMC00Ljg1LDEuMTktMi4xNCwxLjItMy4zMywzLjQ2LTEuMiwyLjI3LTEuMiw1LjMxLDAsMy4wNCwxLjIsNS4yNywxLjE5LDIuMjMsMy4zMywzLjM5LDIuMTMsMS4xNyw0Ljg1LDEuMTdRNjcuMjMsOTAuMTYsNjkuMzksODguOTlaTTg3LjYsNTguNTlxMC0uOTcsMS41NS0uOTdoMTEuNjRxMS4zLDAsMS45NC40Mi42NS40MywxLjMsMS43Mmw5LjE4LDE4LjQzLDkuMTItMTguNDNxLjY1LTEuMjksMS4zLTEuNzIuNjQtLjQyLDEuOTQtLjQyaDExLjE5cTEuNTUsMCwxLjU1Ljk3LDAsLjU5LS4zMywxLjE3bC0yMS42Niw0MS4wN3EtLjk3LDEuODgtMS42OSwyLjYyLS43MS43NC0xLjY4Ljc0LS45LDAtMS42MS0uNzQtLjcyLS43NC0xLjc1LTIuNjJsLTIxLjY3LTQxLjA3UTg3LjYsNTkuMTgsODcuNiw1OC41OVpNMTQzLjU1LDU3LjYyaDI4LjkxcTEuOTQsMCwxLjk0LDEuOTR2Ny43N3EwLDEuOTQtMS45NCwxLjk0aC0xNC40OXEtLjY1LDAtLjkxLjIyLS4yNi4yMy0uMjUuOTR2Mi45OHEwLC42NC4yNS45LjI2LjI2LjkxLjI2aDEyLjM1cTEuOTQsMCwxLjk0LDEuOTR2Ny40NHEwLDEuOTQtMS45NCwxLjk0aC0xMi4zNXEtLjY1LDAtLjkxLjIzLS4yNi4yMi0uMjUuOTN2My4wNHEwLC42NS4yNS45MS4yNi4yNi45MS4yNmgxNC41NXExLjk0LDAsMS45NCwxLjk0djcuNzZxMCwxLjk0LTEuOTQsMS45NGgtMjguOTdxLTEuOTQsMC0xLjk0LTEuOTR2LTQxLjRRMTQxLjYxLDU3LjYyLDE0My41NSw1Ny42MlpNMTMuMzgsMTI4LjkzcS0uMjMtLjIzLS45NC0uMjNIMy45cS0xLjk0LDAtMS45NC0xLjk0di05LjU3cTAtMS45NCwxLjk0LTEuOTRoMzQuNjFxMS45NCwwLDEuOTQsMS45NHY5LjU3cTAsMS45NC0xLjk0LDEuOTRoLTguNTRxLS42NSwwLS45MS4yMy0uMjUuMjMtLjI1Ljk0djI4LjcxcTAsMS45NC0xLjk0LDEuOTRoLTExLjMycS0xLjk0LDAtMS45NC0xLjk0di0yOC43MVExMy42MSwxMjkuMTUsMTMuMzgsMTI4LjkzWk00Ni45MiwxMTUuMjVoMjguOTFxMS45NCwwLDEuOTQsMS45NHY3Ljc2cTAsMS45NC0xLjk0LDEuOTRoLTE0LjQ5cS0uNjUsMC0uOTEuMjMtLjI1LjIyLS4yNS45M3YyLjk4cTAsLjY1LjI1LjkxLjI2LjI1LjkxLjI1aDEyLjM1cTEuOTQsMCwxLjk0LDEuOTR2Ny40NHEwLDEuOTQtMS45NCwxLjk0aC0xMi4zNXEtLjY1LDAtLjkxLjIzLS4yNS4yMy0uMjUuOTR2My4wNHEwLC42NC4yNS45LjI2LjI2LjkxLjI2aDE0LjU1cTEuOTQsMCwxLjk0LDEuOTR2Ny43NnEwLDEuOTQtMS45NCwxLjk0aC0yOC45N3EtMS45NCwwLTEuOTQtMS45NHYtNDEuMzlRNDQuOTgsMTE1LjI1LDQ2LjkyLDExNS4yNVpNOTYuMDcsMTU4LjM5cS0uNjUsMS4yOS0xLjI5LDEuNzEtLjY1LjQyLTEuOTQuNDJoLTExLjE5cS0xLjU2LDAtMS41Ni0uOTcsMC0uNTguMzMtMS4xNmwyMS42Ni00MS4wN3EuOTgtMS44OCwxLjY5LTIuNjIuNzEtLjc0LDEuNjgtLjc1LjksMCwxLjYyLjc1LjcxLjc0LDEuNzQsMi42MmwyMS42Nyw0MS4wN3EuMzIuNTguMzIsMS4xNiwwLC45Ny0xLjU1Ljk3aC0xMS42NHEtMS4zLDAtMS45NC0uNDItLjY1LS40Mi0xLjMtMS43MWwtOS4xOC0xOC40M0w5Ni4wNywxNTguMzlaTTEzLjM4LDE4Ni41NXEtLjIzLS4yMi0uOTQtLjIySDMuOXEtMS45NCwwLTEuOTQtMS45NHYtOS41OHEwLTEuOTQsMS45NC0xLjk0aDM0LjYxcTEuOTQsMCwxLjk0LDEuOTR2OS41OHEwLDEuOTQtMS45NCwxLjk0aC04LjU0cS0uNjUsMC0uOTEuMjItLjI1LjIzLS4yNS45NHYyOC43MnEwLDEuOTQtMS45NCwxLjk0aC0xMS4zMnEtMS45NCwwLTEuOTQtMS45NHYtMjguNzJRMTMuNjEsMTg2Ljc4LDEzLjM4LDE4Ni41NVpNNDUuMzUsMTgzLjI1cTMuMTctNS40LDguODMtOC4zNyw1LjY2LTIuOTgsMTIuODQtMi45OCw3LjI0LDAsMTIuOTQsMi45OCw1LjY5LDIuOTcsOC44Niw4LjM3LDMuMTcsNS40LDMuMTcsMTIuMzIsMCw2LjkzLTMuMTcsMTIuMjYtMy4xNyw1LjM0LTguODYsOC4zMS01LjcsMi45OC0xMi45NCwyLjk4LTcuMjQsMC0xMi44Ny0yLjk4LTUuNjMtMi45Ny04LjgtOC4zMS0zLjE3LTUuMzMtMy4xNy0xMi4yNlE0Mi4xOCwxODguNjUsNDUuMzUsMTgzLjI1Wk03MS45LDIwNC4yNHEyLjE3LTEuMTYsMy40LTMuMzksMS4yMy0yLjI0LDEuMjMtNS4yOCwwLTMuMDMtMS4yMy01LjMtMS4yMy0yLjI2LTMuNC0zLjQ2LTIuMTYtMS4yLTQuODgtMS4yLTIuNzIsMC00Ljg1LDEuMi0yLjE0LDEuMi0zLjMzLDMuNDYtMS4yLDIuMjctMS4yLDUuMywwLDMuMDUsMS4yLDUuMjgsMS4xOSwyLjIzLDMuMzMsMy4zOSwyLjEzLDEuMTcsNC44NSwxLjE3UTY5Ljc0LDIwNS40MSw3MS45LDIwNC4yNFpNOTkuMDQsMTgzLjI1cTMuMTYtNS40LDguODItOC4zNyw1LjY2LTIuOTgsMTIuODQtMi45OCw3LjI1LDAsMTIuOTQsMi45OCw1LjY5LDIuOTcsOC44Niw4LjM3LDMuMTcsNS40LDMuMTcsMTIuMzIsMCw2LjkzLTMuMTcsMTIuMjYtMy4xNyw1LjM0LTguODYsOC4zMS01LjY5LDIuOTgtMTIuOTQsMi45OC03LjI0LDAtMTIuODctMi45OC01LjYyLTIuOTctOC43OS04LjMxLTMuMTctNS4zMy0zLjE3LTEyLjI2UTk1Ljg3LDE4OC42NSw5OS4wNCwxODMuMjVaTTEyNS41OSwyMDQuMjRxMi4xNi0xLjE2LDMuMzktMy4zOSwxLjIzLTIuMjQsMS4yMy01LjI4LDAtMy4wMy0xLjIzLTUuMy0xLjIzLTIuMjYtMy4zOS0zLjQ2LTIuMTctMS4yLTQuODktMS4yLTIuNzEsMC00Ljg1LDEuMi0yLjEzLDEuMi0zLjMzLDMuNDYtMS4yLDIuMjctMS4xOSw1LjMsMCwzLjA1LDEuMTksNS4yOCwxLjIsMi4yMywzLjMzLDMuMzksMi4xNCwxLjE3LDQuODUsMS4xN1ExMjMuNDIsMjA1LjQxLDEyNS41OSwyMDQuMjRaTTE0MC43MiwxNzIuNDRjLTEuMjQtLjkyLTIuNTgtMS43NC0zLjk4LTIuNTNzLS44OS0xLjYyLS44OS0xLjYybDMuOTQtNi45M3EtMi4yNi0uNTEtMy44MS0yLjM2LTEuNTYtMS44NC0xLjU2LTQuNjIsMC0yLjIsMS4wNC0zLjkxLDEuMDMtMS43MiwyLjg4LTIuNjksMS44NC0uOTcsNC4xNy0uOTcsMi40NiwwLDQuMjcuOTQsMS44MS45NCwyLjgxLDIuNjgsMSwxLjc1LDEsNC4xNCwwLDIuMjctLjc0LDQuNS0uNzQsMi4yMy0yLjQzLDUuMjdsLTQuNjYsOC41NEMxNDIuMzEsMTczLjcyLDE0MC43MiwxNzIuNDQsMTQwLjcyLDE3Mi40NFoiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: logo-color-cycle 54s linear infinite;
}

@keyframes page-background-cycle {
  0%,
  44.444444% {
    background-color: #000;
  }

  50%,
  94.444444% {
    background-color: #fff;
  }

  100% {
    background-color: #000;
  }
}

@keyframes logo-color-cycle {
  0%,
  44.444444% {
    filter: brightness(0) invert(1);
  }

  50%,
  94.444444% {
    filter: none;
  }

  100% {
    filter: brightness(0) invert(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .wltt-logo {
    animation: none;
  }

  body {
    background-color: #000;
  }

  .wltt-logo {
    filter: brightness(0) invert(1);
  }
}