* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #ccc;
  position: relative;
  font-family: "Rubik", sans-serif;
}

.gradient-bg {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e942ff), to(#8838ff));
  background-image: linear-gradient(to bottom, #e942ff, #8838ff);
  width: 40%;
  height: 50vw;
  border-radius: 0 0 50% 50%;
  position: absolute;
  top: -3rem;
  left: -15rem;
  z-index: -1;
}

.container {
  width: 90%;
  height: auto;
  margin: 0 auto;
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
}

.mobile {
  width: 21%;
  height: 33.5rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1.5rem;
  margin: 0 auto;
  position: absolute;
  left: 10rem;
  top: 4rem;
}

.mobile__top {
  background-image: -webkit-gradient(linear, left top, right top, from(#8838ff), to(#e942ff));
  background-image: linear-gradient(to right, #8838ff, #e942ff);
  border-radius: 1rem 1rem 0 0;
  padding: 2rem 0.75rem 0.75rem 0.75rem;
  color: white;
  position: relative;
}

.mobile__top--whitebg {
  width: 60%;
  height: 2vw;
  background-color: white;
  position: absolute;
  top: -0.5rem;
  left: 2.75rem;
  border-radius: 0.75rem;
}

.mobile__top--profile-section {
  display: -ms-grid;
  display: grid;
  height: 2rem;
  -ms-grid-columns: 10% 15% 70% 5%;
      grid-template-columns: 10% 15% 70% 5%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mobile__top--pic {
  float: left;
}

.mobile__top--pic img {
  border: 1px solid white;
  border-radius: 1rem;
}

.mobile__top--name p {
  font-size: 0.85rem;
}

.mobile__top--name p small {
  font-size: 0.6rem;
  opacity: 0.4;
}

.mobile__chat {
  position: relative;
  font-size: 0.75rem;
  width: 100%;
  height: 85%;
  background-color: #f5f3f7;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 0 0 1rem 1rem;
}

/* .mobile__chat--left{
    width:50%;
    height:auto;
} */
.mobile__chat--convo-left {
  position: absolute;
  left: 0.55rem;
}

.mobile__chat--convo-left p {
  margin: 0.75rem 0;
  width: 75%;
  color: #9241c8;
  padding: 0.5rem;
  font-size: 0.65rem;
  line-height: 1rem;
}

.mobile__chat--convo-left .mobile__chat--msg {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0.85rem;
}

.mobile__chat--reply-left {
  position: relative;
  top: 18rem;
}

.mobile__chat--right {
  position: absolute;
  right: 0.75rem;
  top: 9rem;
  width: 65%;
}

.mobile__chat--convo-right {
  position: absolute;
}

.mobile__chat--convo-right p {
  color: #6e5d7e;
  font-size: 0.65rem;
  line-height: 1rem;
  padding: 0.5rem;
  margin: 0.75rem 0;
}

.mobile__chat--convo-right .mobile__chat--msg {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0.85rem;
}

.mobile__chat--images {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto;
      grid-template-columns: auto auto auto;
  grid-gap: 0.3rem;
}

.mobile__chat--images img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
}

.mobile__chat--type-msg {
  background-color: white;
  position: relative;
  /* bottom: 1px; */
  /* left: 1rem; */
  top: 23.5rem;
  padding: 0.5rem 1rem;
  width: 93%;
  margin: 0 auto;
  border-radius: 0.75rem;
}

.mobile__chat--type-msg p {
  opacity: 0.6;
  font-size: 0.65rem;
  float: left;
  margin-top: 0.25rem;
  margin-right: 4.48rem;
}

.intro {
  position: relative;
  left: 29rem;
  top: 14rem;
  width: 35%;
}

.intro h1 {
  color: #3e2753;
  font-weight: 500;
}

.intro p {
  color: #a39daa;
  line-height: 1.5rem;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .container {
    -ms-grid-columns: 100%;
        grid-template-columns: 100%;
    padding: 2rem 0;
  }
  .gradient-bg {
    width: 50%;
    height: 100vw;
    border-radius: 0 0 100% 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .mobile {
    width: 85%;
    position: static;
    height: 35.5rem;
  }
  .mobile__chat--send-icon {
    position: absolute;
  }
  .mobile__chat--type-msg {
    top: 24.5rem;
    height: 3rem;
    padding: 1rem;
  }
  .mobile__top--whitebg {
    height: 2vh;
    top: -0.3rem;
  }
  .intro {
    width: 85%;
    position: static;
    padding: 2rem 0;
    margin: 0 auto;
  }
}

@media (max-width: 900px) and (min-width: 768px) {
  .mobile {
    width: 37%;
    left: 4rem;
  }
  .mobile__top--whitebg {
    height: 2vh;
  }
  .intro {
    left: 24rem;
    top: 14rem;
  }
}

@media (max-width: 1024px) and (min-width: 901px) {
  .mobile {
    width: 28%;
    left: 6rem;
  }
  .intro {
    left: 27rem;
    top: 14rem;
  }
}
/*# sourceMappingURL=style.css.map */