<template>
  <div>
    <div class="bubble bubble-1"></div>
    <div class="bubble bubble-2"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({});
</script>

<style lang="scss" scoped>
.bubble {
  position: absolute;

  background: linear-gradient(
    135deg,
    rgba(133, 131, 131, 0.5) -12.75%,
    rgba(54, 54, 54, 0) 100.13%
  );
  border: 2px solid rgba(96, 96, 96, 0.5);
  border-radius: 50%;

  &-1 {
    bottom: -93.49px;
    left: -66.21px;

    width: 260px;
    height: 260px;

    animation: levitation-3 35s infinite;
  }

  &-2 {
    top: -80px;
    left: 430px;

    width: 120px;
    height: 120px;

    animation: levitation-2 35s infinite;
  }
}
</style>
