body{
    margin: 0;
}

:root {
  --primary: #d63c6b;
  --primary-dk: #c41c4f;
  --accent: #5cc8ff;
  --accent-dk: #00a3f5;
}
.style-1.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.style-1.bg .guts {
  position: relative;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 400%;
  width: 200vw;
  height: 200vw;
  border-radius: 50%;
  
  background-image: linear-gradient(var(--primary), var(--accent)),
    linear-gradient(90deg, var(--accent), var(--primary));
  background-blend-mode: screen;
  
  transform: translate(-50%, -50%) rotate(0);
  
  animation-name: rotate;
  animation-delay: 2s;
  animation-duration: 10s;
  animation-timing-function: cubic-bezier(0, 0, 1, 1);
  animation-iteration-count: infinite;
}

@keyframes rotate {  
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}



.style-2 {
    min-height: 100vh;
    background: linear-gradient(57deg, #d000ff, #00d0ff, #ff0000, #fffa00, #00ff20);
    background-size: 1000% 1000%;
    -webkit-animation: ani 20s ease infinite;
    -moz-animation: ani 20s ease infinite;
    animation: ani 20s ease infinite;
  }
  @-webkit-keyframes ani {
      0%{background-position:4% 0%}
      50%{background-position:97% 100%}
      100%{background-position:4% 0%}
  }
  @-moz-keyframes ani {
      0%{background-position:4% 0%}
      50%{background-position:97% 100%}
      100%{background-position:4% 0%}
  }
  @keyframes ani { 
      0%{background-position:4% 0%}
      50%{background-position:97% 100%}
      100%{background-position:4% 0%}
  }






  .intro-3 {
    background:  linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde);
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-blend-mode: hard-light;
    -webkit-animation: hue-rotate 3s linear infinite;
            animation: hue-rotate 3s linear infinite;
  }
  
  @-webkit-keyframes hue-rotate {
    from {
      -webkit-filter: hue-rotate(0);
      -moz-filter: hue-rotate(0);
      -ms-filter: hue-rotate(0);
      filter: hue-rotate(0);
    }
    to {
      -webkit-filter: hue-rotate(360deg);
      -moz-filter: hue-rotate(360deg);
      -ms-filter: hue-rotate(360deg);
      filter: hue-rotate(360deg);
    }
  }
  
  @keyframes hue-rotate {
    from {
      -webkit-filter: hue-rotate(0);
      -moz-filter: hue-rotate(0);
      -ms-filter: hue-rotate(0);
      filter: hue-rotate(0);
    }
    to {
      -webkit-filter: hue-rotate(360deg);
      -moz-filter: hue-rotate(360deg);
      -ms-filter: hue-rotate(360deg);
      filter: hue-rotate(360deg);
    }
  }
  





  body {
    background: linear-gradient(45deg, #000, #000 50%, #fff 50%, #fff);
    background-size: 800% 800%;
    animation: bg 16s ease infinite;
}
.framer {
    --fc01: #aef;
    --fc02: #0af;
    --fc03: #04f;
    --size: 100px;
    position: relative;
    width: var(--size);
    height: var(--size);
    margin: calc(50vh - var(--size) * 1.5) auto 0 auto;
    background: linear-gradient(to bottom left, var(--fc01) 0%, var(--fc01) 50%, transparent 50%);
    box-shadow: var(--size) 0px 0px 0px var(--fc01), 0px var(--size) 0px 0px var(--fc02);
    animation: pulse 2s ease infinite;
}
.framer::before, .framer::after {
    content: "";
    position: absolute;
    width: var(--size);
    height: var(--size);
}
.framer::before {
    left: var(--size);
    top: var(--size);
    background: linear-gradient(to top right, var(--fc02) 0%, var(--fc02) 50%, transparent 50%);
}
.framer::after {
    top: calc(var(--size) * 2);
    left: 0px;
    background: linear-gradient(to bottom left, var(--fc03) 0%, var(--fc03) 50%, transparent 50%);
    transform: scale(1, 1);
    transition: transform 0.25s ease;
}
@keyframes bg {
    0% {
        background-position: 0% 50%;
   }
    50% {
        background-position: 100% 50%;
   }
    100% {
        background-position: 0% 50%;
   }
}
@keyframes pulse {
    0% {
        transform: translate(calc(var(--size) / 2 * -1), 0) scale3d(1, 1, 1);
   }
    50% {
        transform: translate(calc(var(--size) / 2 * -1), 0) scale3d(1.05, 1.05, 1.05);
   }
    100% {
        transform: translate(calc(var(--size) / 2 * -1), 0) scale3d(1, 1, 1);
   }
}