@import url('https://fonts.googleapis.com/css2?family=Updock&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=PT+Serif:wght@700&family=Roboto:ital,wght@0,400;1,300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lobster+Two&family=Redressed&display=swap");
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/*---------------------*/

.social {
  width: 98%;
  max-width: 50px;
  position: fixed;
  z-index: 1;
  left: 3%;
  top: 300px;
}
.social ul {
  list-style: none;
}
.social img {
  border-radius: 10px;
  width: 100%;
  background-color: #fff;
}
.social ul li a {
  display: flex;
  flex-direction: column;

  padding: 8px 0px;
  text-decoration: none;
}

.social ul li a:hover {
  width: 105%;
}

.mdd-imagen-flotante {
  position: fixed;
  z-index: 9999;
  top: 300px;
  right: 3%;
  width: 98%;
  max-width: 150px;
  height: auto;
  animation: mdd-flotar 3s ease-in-out infinite;
}

@keyframes mdd-flotar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}