:root {
  --headcolor: #8C5088;
	--Lcolor: #2D69C8;
  --Rcolor: #008580;
}
body {
  color: white;
  font-family: "Shantell Sans", cursive;
	background-color: #222;
  background-image: linear-gradient(#000, #111);
}
#header {
  background-color: var(--headcolor);
  box-shadow: 1em 0em var(--headcolor), 0em -1em var(--headcolor), 1em -1em var(--headcolor), -1em -1em var(--headcolor), -1em 0em var(--headcolor);
  width: 100%;
  position: sticky;
  top: 1%;
  display: flex;
  justify-content: center;
}
#pfp {
  width: 3.5em;
  height: 3.5em;
  object-fit: cover;
  transform: scaleX(-1);
  box-shadow: -.12em .12em .25em #555;
  border-radius: 100%;
}
#contact {
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
  font-size: 2.8em;
  text-shadow: .1em .1em .2em #555;
  margin: 0%;
  padding: .08em .2em .25em;
}
.bubble {
  max-width: 70%;
  margin: .6em 2%;
  padding: .4em 1.4em;
  clear: both;
}
.chat-left {
  background-color: var(--Lcolor);
  box-shadow: 0 0 1em var(--Lcolor);
  float: left;
  border-radius: 5em 5em 5em 0;
}
.chat-right {
  background-color: var(--Rcolor);
  box-shadow: 0 0 1em var(--Rcolor);
  float: right;
  border-radius: 5em 5em 0 5em;
}
.text {
  font-size: 1.3em;
  text-shadow: .1em .1em .2em #555;
}
.info-center {
  font-family: "Comfortaa", sans-serif;
  background-color: rgb(0 0 0 / 50%);
  border-radius: 5em;
  width: fit-content;
	margin: 1em auto 0;
  padding: 0 .5em;
  clear: both;
}
.info-right {
  font-family: "Comfortaa", sans-serif;
  font-size: .9em;
  background-color: rgb(0 0 0 / 50%);
  border-radius: 5em;
  text-align: end;
  width: fit-content;
	margin: 0 3% 0 auto;
  padding: 0 .4em;
  clear: both;
}
.image {
  box-shadow: 0 0 1em #555;
  border-radius: 5em 5em 5em 1em;
  margin: 1em 0 0;
	max-width: 95%;
  transition: transform .7s, position .7s, left .7s, border-radius .7s, box-shadow .1s;
}
.image:hover {
  cursor: zoom-in;
}
.image:active {
  transform: scale(1.7) translate(10%, 0);
  cursor: auto;
  border-radius: 0 0 0 0;
  box-shadow: none;
}
#typing {
  font-weight: 800;
  letter-spacing: .7em;
}
#typing #dot1 {
  animation-play-state: paused;
}
#typing #dot2 {
  animation-play-state: paused;
}
#typing #dot3 {
  animation-play-state: paused;
}
#typing:hover #dot1 {
  animation-play-state: running;
}
#typing:hover #dot2 {
  animation-play-state: running;
}
#typing:hover #dot3 {
  animation-play-state: running;
}
#dot1 {
  display: inline-block;
  animation: bounce 0.4s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
}
#dot2 {
  display: inline-block;
  animation: bounce 0.4s cubic-bezier(0.5, 0.05, 1, 0.5) .15s infinite alternate;
}
#dot3 {
  display: inline-block;
  animation: bounce 0.4s cubic-bezier(0.5, 0.05, 1, 0.5) .3s infinite alternate;
}
@keyframes bounce {
  from {
  	transform: translate3d(0, -.2em, 0);
    opacity: 70%;
    }
  to {
    transform: translate3d(0, .3em, 0);
    opacity: 100%;
    }
}