style.scss

html {
    box-sizing: border-box;
}

body {
    margin: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(16,137,173);
background: radial-gradient(circle, rgba(16,137,173,1) 3%, rgba(31,64,92,1) 94%);
}


.lottie-info {
    display: flex;
    width: 800px;
    display: flex;
    align-items: flex-start;
    .bubbles {
        margin-right: -10rem;
    }
    .octopus {
        margin-left: -10rem;
    }
}


.speech-bubble {
    display:flex;
    background-color:rgb(31, 173, 223);
    padding:20px;
    border-radius:30px;
    min-width:40px;
    max-width:220px;
    min-height:40px;
    margin-top: 3rem;
    margin-left: -13rem;
    position:relative;
    align-items:center;
    justify-content:center;
    text-align:center;
    button.conversation {
        color:rgb(211, 237, 244);
        border: solid 2px;
        background-color: #1e5376;
        border-color: #0e6793 #1e5376 #1e5376 #0e6793;
        border-radius: 100px;
        padding: 0.5rem 1.5rem;
        cursor: pointer;
        transition: 0.3s;
    }
    button.conversation:hover {
        background-color: #1e5376;
        border-color:  #1e5376 #0e6793 #0e6793 #1e5376;
    }
    button.conversation:active {
        box-shadow: inset 0px 0px 15px rgba(4, 47, 61, 0.9);
        transform: scale(0.98);
    }
    button.conversation:disabled {
        cursor: default;
        filter: brightness(80%)
    }
  }
  .speech-bubble:before,
  .speech-bubble:after {
    content:"";
    background-color:rgb(31, 173, 223);
    border-radius:50%;
    display:block;
    position:absolute;
    z-index:-1;
  }
  .speech-bubble:before {
    width:44px;
    height:44px;
    top:-12px;
    left:28px;
    box-shadow:-50px 30px 0 -12px rgb(31, 173, 223);
  }
  .speech-bubble:after {
    bottom:-14px;
    right:96px;
    width:30px;
    height:30px;
    box-shadow: 110px -30px 0 0 rgb(31, 173, 223),
               -28px -6px 0 -2px rgb(31, 173, 223),
               -24px 17px 0 -6px rgb(31, 173, 223),
               -35px 30px 0 -10px rgb(31, 173, 223);
    
  }


footer {
    position:absolute;
    bottom:0;
    width:100%;
    text-align: end;
    padding: 2rem;
    margin-right: 5rem;
    color: #82bde4;
    a {
        color: #000;
    }
    a:hover {
        color:#fff;
    }
}



@media only screen and (max-width: 748px) {
    .lottie-info {
        width: 100%;
    }
}