body {
  margin: 0;
  font-family: Arial;
  background-image: url("https://i.pinimg.com/736x/c0/25/24/c025243e4939771898f27240c416d20d.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* CONTENEDOR */
.app {
  max-width: 420px;
  margin: auto;
  padding: 10px;
}

/* PERFIL */
.profile {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #ffd6e7;
}

.pfp {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}

.ig {
  color: pink;
  text-decoration: none;
  font-size: 12px;
}

/* NAV */
.nav {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}

/* PÁGINAS */
.page {
  display: none;
  padding: 15px;
  border-radius: 15px;
  background: white;

  /* rayitas de hoja */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 28px,
      #ffd6e7 29px
    );

  animation: pageTurn 0.5s ease;
}

.page.active {
  display: block;
}

@keyframes pageTurn {
  from { transform: translateX(15px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* POSTS */
.post {
  margin-top: 10px;
}

.full-img {
  width: 100%;
  border-radius: 10px;
}

/* MENSAJES (SOLO BURBUJAS) */
.messages {
  margin-top: 10px;
}

.msg {
  padding: 8px 12px;
  border-radius: 15px;
  margin: 5px 0;
  font-size: 12px;
  max-width: 75%;
}

.left {
  background: #ffe4ec;
}

.right {
  background: #ffd6e7;
  margin-left: auto;
}

/* BOTÓN */
.open-btn {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 55px;
  cursor: pointer;
}

/* CONTROLES */
.controls {
  text-align: center;
  margin: 10px;
}

.controls button {
  background: none;
  border: none;
  font-size: 18px;
}