.cont
  .background
    .center-back
    .center-circle
    -for (a=0;a<7;a++)
      .bubble-effect
        -for (i=0;i<1;i++)
          .bub
    .horizontal-blob
.picture
.snowflake

<a href="https://www.linkedin.com/in/jonathaninacio/" target="_blank"><div class="TH." style="position:absolute;bottom:5px;right:5px;width:17px;height:22px;border:1px solid black;" >
  <div style="margin:1px 0 0px 1px;width:15px;height:5px;background-color:black;"></div>
  <div style="margin:0px 6px;width:5px;height:5px;background-color:black;"></div>
  <div style="margin:5px 0px 6px 6px;width:5px;height:5px;background-color:black;"></div>
</div> </a>

body {
  margin:0;
  padding:0;
  background: white;
  height: 100vh;
  overflow: hidden;
}

.cont{
  position: absolute;
  margin: auto;
  width: calc(100% + 20px);
  height:calc(100% + 20px);
  top:-10px;
  left:-10px;
  filter: blur(30px) contrast(40);

  .background{
    position:relative;
    width:100%;
    height:100%;
    background-color: white;

    .center-back{
      display: block;
      margin: auto;
      width: 400px;
      height: 400px;
      position:absolute;
      top: calc(50% - 400px/2);
      left: calc(50% - 400px/2);
      box-sizing: border-box;
      border:solid 80px gray;
      background-color: white; 
      border-radius:50%;
    }

    .center-circle{
      background-color: black; 
      border-radius:50%;
      position: absolute;
      top: calc(50% - 250px/2);
      left: calc(50% - 250px/2);
      width: 250px;
      height: 250px;
    }

    .horizontal-blob{
      position:absolute;
      width:100px;
      height:100px;
      background-color:black;
      top:calc(50% - 180px/2);
      border-radius:50%;
        @keyframes test {
          from { left:calc(20% - 180px/2); }
          to { left:calc(80% - 180px/2); }
        }
      animation: test 4s ease-in-out infinite alternate;
      border:solid 40px gray;
      mix-blend-mode: multiply;
    }

    .bubble-effect{
      mix-blend-mode: multiply;
      position:relative;
      width:10px;
      height:10px;
      margin-top:-10px;
      top: 50%;
      left:50%;
      background-color:red;
        @keyframes ft {
         from {  top:calc(50% - 20px); transform: rotate(0deg); }
         to { top:calc(50% + 20px); transform: rotate(360deg); }
        }
      animation: ft 10s ease-in-out infinite alternate ;

      .bub{
        position:absolute;
        width:100px;
        height:100px;
        top:-90px; // halfsize+border
        left:-90px;
        border:solid 40px rgb(200,200,200);
        background-color:black;
        border-radius:50%;
          @keyframes fg {
            from {left: -50px;}
            to {left: -130px;}
          }
        animation: fg 1s ease-in-out infinite alternate;
      }

      @for $i from 1 through 7 {&:nth-child(#{$i}) {
        .bub{
          $translationY: random(200) - 100 + px;
          $translationX: random(200) - 100 + px;
          transform : translate($translationY, $translationX);
        }
      }}
    }
  }
}

////////////////////////////// - Pictures -

.picture{
  position:absolute;
  width:100%;
  height:100%;
  top:-30px;
  left:0;
  background-image: url('https://images.pexels.com/photos/1081111/pexels-photo-1081111.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-size: cover;
  mix-blend-mode: lighten;
}

.snowflake{
  position:absolute;
  width:150px;
  height:150px;
  top:calc(50% - 150px/2);
  left:calc(50% - 150px/2);
  filter: brightness(15);
background-color: white;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Snowflake.svg/240px-Snowflake.svg.png");
  background-size: 100% 100%;
  background-repeat:no-repeat;
}