<section class="hero">
  <h1>Hello Pauly, how are you</h1>

  <div class="overlay"></div>
          <!-- The circles -->
           <div class="theOverlay circle circle1"></div>l
  <div class="theOverlay circle circle2"></div>l
  <!-- Remember, due to browser requirementsm we need to mute autoplays -->
          <video loop muted autoplay>
          <!-- Link to your video here -->
    <<<source src="/wp-content/themes/paulnew/custom_dist/video/nuky.mp4" type="video/mp4" / >
</video>

</section>
        
        

    .hero {
          /* Minimum height, we'll expand on this over at [1]. */
      min-height: 500px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
  /* Use this for customising: https://bennettfeely.com/clippy/ */
      clip-path:
          polygon(
            0% 7%, 7% 13%, 9% 12%, 16% 8%, 20% 12%,
            23% 20%, 37% 11%, 46% 21%, 46% 30%, 52% 30%,
            52% 21%, 58% 20%, 61% 7%, 70% 8%, 82% 12%,
            92% 4%, 100% 1%, 100% 100%, 0% 100%
          );
    }
          /* [1] here we use a block to expand it outwards at 40% */
          .hero .expander {
            padding-bottom: 40%;
          }
/* Use this for customising: https://html-css-js.com/css/generator/text-shadow/ */
    .hero h1 {
      position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
      color: white;
      text-shadow:
            #FFF 0px 0px 5px, #FFF 0px 0px 10px,
            #FFF 0px 0px 15px, #9d9aff 0px 0px 20px,
          #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px,
          #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
      z-index: 500;
    }

    .hero video {
      position: absolute;
      left: 0;
      top: 0;
      min-width: 100%;
      min-height: 100%;
      z-index: 400;
    }

    .hero .theOverlayBlock {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

    }
/*
  This will change when you press the buttons...
  Remember, this effects the whole overlay background,
  as well as the two circles. Just the background-image.

  Try playing around with the mix-blend-mode too =)

  For it to work in Safari, then we need to use an opacity instead
  of a blend mode. The effect is very similar but it allows for it
  to work on iOs.
*/

    .hero .theOverlay {
      background-image: linear-gradient(90deg, #001ff5, #fa1d1f);
      mix-blend-mode: color;
      z-index: 450;

    }

/* This will show up on safari only.

  Because the mix-blend-mode doesn't really work in sfarai, i'm using a opacity
          to give off a similar vibe. It's not the same but close enough.

          I've also added in a .safariExpain inorder to explain things just to
          safarai users. It defaults to display none, then switchesto display: bock
          forourpartnt;s]]//.s//

          Remember, all iOS  browsre are the Webit safari, just with differnet skins. Incuding Chrome on iPad. */



      .safariExplain {
        display: none;
      }

  @media  not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) {

      .hero .theOverlay {
        opacity: 0.5;
      }

      .safariExplain {
        display: block;
      }
    }}
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
    .hero .circle1 {
      top: 25px;
      right: 25px;
      width: 40vh;
      height: 40vh;
    }

    .hero .circle2 {
      bottom: 25px;
      left: 25px;
      width: 20vh;
      height: 20vh;
    }x;
    }

    .hero .circle {
      position: absolute;

      border-radius: 50%;
      z-index: 475;
    }