/* used for banner */
:root{
    --radius-1: 100%;
    --radius-2: 100%;
    --radius-3: 100%;
    --radius-4: 100%;
    --radius-5: 100%;
    --radius-6: 100%;
    --radius-7: 104%;
    --radius-8: 100%;
    --width-1: 330px;
    --height-1: 290px;
    --width-2: 295px;
    --height-2: 285px;
    --blob-1-t: -1em;
    --blob-1-l: -1em;
    --blob-2-t: -16em;
    --blob-2-l: 63em;
    --text-b1-t: -34em;
    --text-b1-l: 20em;
    --text-b2-t: -39em;
    --text-b2-l: 40em;
    --button-1-t: -38em;
    --button-color: #f6ebe6;
  }

/* main banner */

  .banner{
    background-color: rgb(35,54,101);
    overflow: hidden;
  }

/* banner text */
  .banner-text{
    position: relative;
    top: var(--text-b1-t);
    right: auto;
    left: var(--text-b1-l);
    color: white;
    z-index: 1;
    transition: position 2s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .banner-text2{
    position: relative;
    top: var(--text-b2-t);
    right: auto;
    left: var(--text-b2-l);
    color: white;
    z-index: 1;
    transition: position 2s cubic-bezier(0.25, 1, 0.5, 1);
  }

/* decorating both blobs */
  .blob{
    position: relative;
    border-radius: var(--radius-1) var(--radius-2) var(--radius-3) var(--radius-4) / var(--radius-5) var(--radius-6) var(--radius-7) var(--radius-8);
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    z-index: 1;
    transition: position 1s cubic-bezier(0.25, 1, 0.5, 1);
  }

  #blob1{
    position: relative;
    background-color: #63B4E5;
    left: var(--blob-1-l);
    top: var(--blob-1-t);
    width: var(--width-1);
    height: var(--height-1);
    transition: width 2s cubic-bezier(0.25, 1, 0.5, 1);
    transition: height 2s cubic-bezier(0.25, 1, 0.5, 1);
    transition: left 2s cubic-bezier(0.25, 1, 0.5, 1);
    transition: top 2s cubic-bezier(0.25, 1, 0.5, 1);
}
  #blob2{
    position: relative;
    background-color: #F2A5AA;
    left: var(--blob-2-l);
    top: var(--blob-2-t);
    width: var(--width-2);
    height: var(--height-2);
    transition: width 2s cubic-bezier(0.25, 1, 0.5, 1);
    transition: height 2s cubic-bezier(0.25, 1, 0.5, 1);
    transition: left 2s cubic-bezier(0.25, 1, 0.5, 1);
    transition: top 2s cubic-bezier(0.25, 1, 0.5, 1);
  }


/* button used for banner */
  .button {
    position: relative;
    top: var(--button-1-t);
    left: 39.5em;
    background-color: var(--button-color);
    border: none;
    border-radius: 26px;
    color: black;
    padding: 9px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition: 2s cubic-bezier(0.25, 1, 0.5, 1);
  }