:root {
        --background-color: #fff;
        --hulu-color: #0387bc;
        --blue: 1, 122, 174;
        /* #017AAE */
        --light-blue: 28, 193, 255;
        /* #1CC1FF */
      }

      body {
        /* align-items: center;
  background-color: var(--background-color);
  display: flex;
  justify-content: center;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  width:100vw;
  height: 100vh; */
      }

      #loader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-color);
        z-index: 999999;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .hide {
        display: none !important;
      }

      .absolute-centered {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .jakarta-sans-font {
        font-family: "Plus Jakarta Sans", sans-serif;
      }

      .zen-dots-font {
        font-family: "Zen Dots", cursive;
      }

      .rubik-font {
        font-family: "Rubik", sans-serif;
        font-weight: 500;
      }



      /* #green-filter {
  background: radial-gradient(rgba(var(--blue), 0.05), rgba(var(--light-blue), 0.4) 80%);
  height: 100%;
  left: 0px;
  position:fixed;
  top: 0px;
   inset: 0; 
   width: 100vw;
  z-index: 1;
} */

      .gradient {
        filter: blur(3em);
        height: 80px;
        left: -5%;
        position: fixed;
        inset: 0;
        width: 110%;
        width: 100vw;
      }

      /* #top-gradient {
  background: linear-gradient(
    to right, 
    rgba(var(--blue), 0.75) 0% 20%,  
    transparent 10% 20%,
    rgba(var(--light-blue), 0.5) 20% 50%, 
    rgba(var(--blue), 0.5) 50% 70%, 
    rgba(var(--light-blue), 0.75) 70%
  );
  top: -50px;
}

#bottom-gradient {
  background: linear-gradient(
    to right, 
    rgba(var(--blue), 0.75) 0% 10%,  
    transparent 10% 30%,
    rgba(var(--blue), 0.5) 30% 50%, 
    transparent 50% 70%,
    rgba(var(--light-blue), 0.5) 70% 80%, 
    transparent 80%
  );
   top: -50px;
} */

      #logo-wrapper {
        position: fixed;
        /* or absolute if body is relative */
        inset: 0;
        /* top:0; right:0; bottom:0; left:0 */
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
      }

      #logo {
        opacity: 0;
        position: relative;
        z-index: 2;
      }

      #logo-border {
        background-color: var(--hulu-color);
        border-radius: 2.25em;
        height: 160%;
        width: 140%;
        z-index: 1;
      }

      #logo-border-inner {
        background-color: var(--background-color);
        border-radius: 2em;
        height: calc(160% - 0.5em);
        width: calc(140% - 0.5em);
        z-index: 2;
      }

      #logo-text {
        position: relative;
        z-index: 3;
      }

      #hulu-text {
        color: var(--hulu-color);
        font-size: 8em;
        height: 120px;
        line-height: 120px;
      }

      #originals-text {
        color: white;
        font-size: 3em;
        letter-spacing: 0.12em;
      }

      @keyframes bounce {

        from,
        3.33%,
        8.83%,
        16.66% {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transform: translate3d(0, 0, 0);
        }

        6.66%,
        7.16% {
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          transform: translate3d(0, -15px, 0) scaleY(1.1);
        }

        11.66% {
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          transform: translate3d(0, -7px, 0) scaleY(1.05);
        }

        13.33% {
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transform: translate3d(0, 0, 0) scaleY(0.95);
        }

        15% {
          transform: translate3d(0, -2px, 0) scaleY(1.02);
        }
      }

      #top-gradient,
      #bottom-gradient,
      #green-filter {
        will-change: transform, opacity, filter;
        backface-visibility: hidden;
        transform: translateZ(0);
        /* promote to its own layer early */
      }

      @media(max-width: 800px) {
        #logo-wrapper {
          transform: scale(0.7);
        }
      }

      @media(max-width: 600px) {
        #restart-button {
          left: auto;
          right: 10px;
          transform: none;
        }
      }