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

body {
  background-color: #f15dff;
  animation: gradient 5.5s ease-in infinite;
  display: block;
  font-family: "Lobster", cursive;
  height: 100vh;
}

.img-blur {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: 0 13%;
  position: absolute;
  z-index: -1;
  animation: makeBlurred;
  animation-duration: 1.2s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}

h1 {
  margin-bottom: 35px;
  font-family: fantasy;
  font-size: 50px;
  background-color: #ff93ff;
  color: #9d2277;
  border-bottom: dashed;
  text-align: center;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

a {
  text-decoration: none;
}

.wrapper {
  display: flex;
  margin: auto;
  flex-direction: row;
  max-width: 500px;
}

.col {
  width: 10%;
}

.middle {
  width: 80%;
}

.goBack {
  position: fixed;
  bottom: 20px;
  left: 10px;
  font-size: 4.2rem;
}

.conversationIcon {
  background-color: whitesmoke;
  padding: 3px 9px;
  border-radius: 50%;

  margin-right: 15px;
  animation: pulse 1s ease-in-out infinite;
}

.confesate-aca {
  position: fixed;
  display: flex;
  flex-direction: row;
  bottom: 40px;
  height: 50px;
  right: 10px;
  font-size: 2rem;
  text-shadow: 2px 2px 5px rgb(245, 245, 245);
  animation: neon 2s ease-in-out infinite;
}

.confesion {
  background-color: rgb(255, 255, 255);
  margin-top: 15px;
  padding: 4px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  border-radius: 4px;
  border: 2px solid aliceblue;
}

.lastConfesion {
  margin-bottom: 85px !important;
}

.confesion-titulo {
  font-weight: 400;
  margin-bottom: 10px;
}

.confesion-text {
  margin-bottom: 10px;
}

.confesion-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@keyframes makeBlurred {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(20px);
    transform: scale(0.9);
  }
}

@keyframes gradient {
  20% {
    background: #ff9be1;
  }
  40% {
    background: #ff9bee;
  }
  60% {
    background: #ff9be1;
  }
}

@keyframes neon {
  0% {
    text-shadow: -2px 2px -1px rgb(255, 255, 255);
  }
  50% {
    text-shadow: 2px 2px 10px rgb(255, 255, 255);
  }
  100% {
    text-shadow: -2px 2px -1px rgb(255, 255, 255);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@media screen and (min-width: 870px) {
  .goBack {
    position: relative;
    left: -10px;
    font-size: 3rem;
  }

  .confesate-aca {
    position: relative;
    white-space: nowrap;
    margin-top: 20px;
  }
}