.video-background {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: -1; /* Make sure the video stays behind other content */
  }
  
  .video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top, #c6c6c6, #ffffff 10vh, #e7e7e7 10vh, #EEE);
  }
  
  .ready {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(5, 1fr);
    -webkit-animation: lateral 6000ms linear infinite both;
            animation: lateral 6000ms linear infinite both;
    -webkit-animation-delay: 625ms;
            animation-delay: 625ms;
  }
  
  .R {
    grid-template-areas: "a1 a6 a8" "a2 . a9" "a3 a7 ." "a4 . a10" "a5 . a11";
  }
  .R > :nth-child(8),
  .R > :nth-child(9) {
    top: 12.5px;
    position: relative;
  }
  .R > :nth-child(10) {
    left: -12.5px;
    position: relative;
  }
  
  .E {
    grid-template-areas: "a1 a6 a9" "a2 . ." "a3 a7 a10" "a4 . ." "a5 a8 a11";
  }
  
  .A {
    grid-template-areas: ". a1 ." "a2 . a7" "a3 . a8" "a4 a6 a9" "a5 . a10";
  }
  .A > :nth-child(2) {
    left: 12.5px;
    position: relative;
  }
  .A > :nth-child(7) {
    left: -12.5px;
    position: relative;
  }
  
  .D {
    grid-template-areas: "a1 a6 a8" "a2 . a9" "a3 . a10" "a4 . a11" "a5 a7 .";
  }
  .D > :nth-child(n+8) {
    top: 12.5px;
    position: relative;
  }
  
  .Y {
    grid-template-areas: "a1 . a6" "a2 . a7" "a3 . a8" ". a4 ." ". a5 .";
  }
  .Y > :nth-child(3) {
    left: 12.5px;
    position: relative;
  }
  .Y > :nth-child(8) {
    left: -12.5px;
    position: relative;
  }
  
  .letter {
    display: grid;
    grid-gap: 4px;
  }
  
  .block {
    --ratio: calc(var(--index) / 50);
    --delay: calc(calc(var(--ratio) * 625ms) + 625ms);
    transform-style: preserve-3d;
    transform: rotate(calc(var(--angle) * 1deg)) translate3d(calc(var(--sign) * 200vw), 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-name: block-intro;
            animation-name: block-intro;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: var(--delay);
            animation-delay: var(--delay);
    animation-direction: reverse;
    -webkit-animation-duration: 6000ms;
            animation-duration: 6000ms;
    position: relative;
    z-index: -1;
    height: 25px;
    width: 25px;
    will-change: transform;
  }
  .block .face {
    display: block;
    position: absolute;
    background-color: #2e92de;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    width: 25px;
    height: 25px;
    border: solid 1px #2f454f;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .block .face-1 {
    transform-origin: bottom center;
  }
  .block .face-2 {
    transform: rotateX(-90deg);
    transform-origin: bottom center;
    overflow: hidden;
  }
  .block .face-2:before {
    content: "";
    position: absolute;
    background-color: #00d2ff99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-animation: shimmer 6000ms linear;
            animation: shimmer 6000ms linear;
    -webkit-animation-delay: var(--delay);
            animation-delay: var(--delay);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  .block .face-3 {
    transform: rotateY(90deg);
    transform-origin: right center;
  }
  
  @-webkit-keyframes block-intro {
    40% {
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
      -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.8, 0.04);
              animation-timing-function: cubic-bezier(0.95, 0.05, 0.8, 0.04);
    }
    70% {
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
    80% {
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg);
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
    100% {
      transform: rotate(0deg) translate3d(150vw, 0, 0) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  
  @keyframes block-intro {
    40% {
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
      -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.8, 0.04);
              animation-timing-function: cubic-bezier(0.95, 0.05, 0.8, 0.04);
    }
    70% {
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 1, 0, 90deg);
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
    80% {
      transform: rotate(0deg) translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg);
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
    100% {
      transform: rotate(0deg) translate3d(150vw, 0, 0) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @-webkit-keyframes lateral {
    from {
      transform: translateX(12%);
    }
    to {
      transform: translateX(-12%);
    }
  }
  @keyframes lateral {
    from {
      transform: translateX(12%);
    }
    to {
      transform: translateX(-12%);
    }
  }
  @-webkit-keyframes shimmer {
    from, 25% {
      transform: scale(2, 1) rotate(-45deg) translate(-100%);
    }
    35%, to {
      transform: scale(2, 1) rotate(-45deg) translate(0%);
    }
  }
  @keyframes shimmer {
    from, 25% {
      transform: scale(2, 1) rotate(-45deg) translate(-100%);
    }
    35%, to {
      transform: scale(2, 1) rotate(-45deg) translate(0%);
    }
  }

 /**
   * The first theme for this menu
   */


  .circular-menu {
    position: fixed;
    bottom: 1em;
    right: 1em;
  }
  
  .circular-menu .floating-btn {
    display: block;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background-color: hsl(4, 98%, 60%);
    box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, 0.26);
    color: hsl(0, 0%, 100%);
    text-align: center;
    line-height: 3.9;
    cursor: pointer;
    outline: 0;
  }
  
  .circular-menu.active .floating-btn {
    box-shadow: inset 0 0 3px hsla(0, 0%, 0%, 0.3);
  }
  
  .circular-menu .floating-btn:active {
    box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, 0.4);
  }
  
  .circular-menu .floating-btn i {
    font-size: 1.3em;
    transition: transform 0.2s;
  }
  
  .circular-menu.active .floating-btn i {
    transform: rotate(-45deg);
  }
  
  .circular-menu:after {
    display: block;
    content: " ";
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    background-color: hsl(4, 98%, 60%);
    transition: all 0.3s ease;
  }
  
  .circular-menu.active:after {
    transform: scale3d(5.5, 5.5, 1);
    transition-timing-function: cubic-bezier(0.68, 1.55, 0.265, 1);
  }
  
  .circular-menu .items-wrapper {
    padding: 0;
    margin: 0;
  }
  
  .circular-menu .menu-item {
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    z-index: -1;
    display: block;
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    font-size: 1em;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    text-align: center;
    line-height: 3;
    background-color: hsla(0, 0%, 0%, 0.1);
    transition: transform 0.3s ease, background 0.2s ease;
  }
  
  .circular-menu .menu-item:hover {
    background-color: hsla(0, 0%, 0%, 0.3);
  }
  
  .circular-menu.active .menu-item {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .circular-menu.active .menu-item:nth-child(1) {
    transform: translate3d(1em, -7em, 0);
  }
  
  .circular-menu.active .menu-item:nth-child(2) {
    transform: translate3d(-3.5em, -6.3em, 0);
  }
  
  .circular-menu.active .menu-item:nth-child(3) {
    transform: translate3d(-6.5em, -3.2em, 0);
  }
  
  .circular-menu.active .menu-item:nth-child(4) {
    transform: translate3d(-7em, 1em, 0);
  }
  
  /**
   * The other theme for this menu
   */
  
  .circular-menu.circular-menu-left {
    right: auto;
    left: 1em;
  }
  
  .circular-menu.circular-menu-left .floating-btn {
    background-color: hsl(217, 89%, 61%);
  }
  
  .circular-menu.circular-menu-left:after {
    background-color: hsl(217, 89%, 61%);
  }
  
  .circular-menu.circular-menu-left.active .floating-btn i {
    transform: rotate(90deg);
  }
  
  .circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
    transform: translate3d(-1em, -7em, 0);
  }
  
  .circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
    transform: translate3d(3.5em, -6.3em, 0);
  }
  
  .circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
    transform: translate3d(6.5em, -3.2em, 0);
  }
  
  .circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
    transform: translate3d(7em, 1em, 0);
  }