html, body {

        margin: 0;
        padding: 0;
        user-select: none;
        -webKit-user-select: none;
        cursor: default;
        -webKit-font-smoothing: antialiased;
        background-color: #fff;

      }

      .home .container {

        text-align: center;
        height: 90%;
        width:100%;
        display:flex;
        align-items: center;
        justify-content: center;

      }

      .home2 .container2 {

        text-align: center;
        height: 0%;
        width:100%;
        display:flex;
        align-items: center;
        justify-content: center;

      }

      .home .container h1 {

        color: #333;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helveltica Neue', sans-serif;
        font-weight: 300;

      }

      .home2 .container2 h2 {

        color: #333;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helveltica Neue', sans-serif;
        font-weight: 300;
        transform: translateY(-230px);

      }

      .home .container h1 #w1 {

        animation: fade2 7.2s linear infinite;
        animation-fill-mode: both;
        animation-delay: 2.2s;

      }

      .home .container h1 #w2 {

        animation: fade2 7.2s linear infinite;
        animation-fill-mode: both;
        animation-delay: 2.7s;

      }

      .home .container h1 #w3 {

        animation: fade2 7.2s linear infinite;
        animation-fill-mode: both;
        animation-delay: 3.2s;

      }

      .home2 .container2 h2 #w4 {

        animation: fade 8s infinite;
        animation-fill-mode: both;
        animation-delay: 3.6s;

      }


      @keyframes fade {

        0% {

          opacity: 0;

        }

        50% {

          opacity: 1;
          color: #fff;
          text-shadow: 0 0 20px #fff;
                      0 0 20px #fff;
                      0 0 40px #fff;
                      0 0 80px #fff;
                      0 0 120px #fff;
                      0 0 160px #fff;
                      0 0 200px #fff;
                      0 0 220px #fff;
                      0 0 240px #fff;
                      0 0 280px #fff;
                      0 0 320px #fff;
                      0 0 360px #fff;
                      0 0 400px #fff;
                      0 0 420px #fff;
                      0 0 440px #fff;
                      0 0 480px #fff;


        }

        100% {

          opacity: 0;

        }

      }

      @keyframes fade2 {

        0% {

          color: #333;
          opacity: .2;

        }

        25% {

          opacity: .5;

        }

        50% {

          opacity: 1;
          color: #fff;
          text-shadow: 0 0 20px #fff;
                      0 0 20px #fff;
                      0 0 40px #fff;
                      0 0 80px #fff;
                      0 0 120px #fff;
                      0 0 160px #fff;
                      0 0 200px #fff;
                      0 0 220px #fff;
                      0 0 240px #fff;
                      0 0 280px #fff;
                      0 0 320px #fff;
                      0 0 360px #fff;
                      0 0 400px #fff;
                      0 0 420px #fff;
                      0 0 440px #fff;
                      0 0 480px #fff;

        }

        75% {

          opacity: .5;

        }

        100% {

          opacity: .2;
          color: #333;


        }

      }

      @media (prefers-color-scheme: light) {

        html, body {

          background-color: #000;

        }

        .home .container h1 {

          color: #fff;

        }

      }

      @media (prefers-color-scheme: dark) {

        html, body {

          background-color: #000;

        }

        .home .container h1 {

          color: #fff;

        }

      }

      .rain {
        position: absolute;
        left: 0;
        width: 90%;
        height: 90%;
        z-index: 2;
         bottom: 50px;
      }

      .rain.back-row {
        display: none;
        z-index: 1;

        opacity: 0.5;
      }

      body.back-row-toggle .rain.back-row {
        display: block;
      }

      .drop {
        position: absolute;
        bottom: 100%;
        width: 15px;
        height: 90px;
        pointer-events: none;
        animation: drop 0.5s linear infinite;
      }

      @keyframes drop {
        0% {
          transform: translateY(0vh);
        }
        75% {
          transform: translateY(90vh);
        }
        100% {
          transform: translateY(90vh);
        }
      }

      .stem {
        width: 1.5px;
        height: 60%;
        margin-left: 7px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
        animation: stem 0.5s linear infinite;
      }

      @keyframes stem {
        0% {
          opacity: 1;
        }
        65% {
          opacity: 1;
        }
        75% {
          opacity: 0;
        }
        100% {
          opacity: 0;
        }
      }

      .splat {
        width: 20px;
        height: 10px;
        border-top: 2px dotted rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        opacity: 1;
        transform: scale(0);
        animation: splat 0.5s linear infinite;
        display: none;
      }

      body.splat-toggle .splat {
        display: block;
      }

      @keyframes splat {
        0% {
          opacity: 1;
          transform: scale(0);
        }
        80% {
          opacity: 1;
          transform: scale(0);
        }
        90% {
          opacity: 0.5;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.5);
        }
      }