@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: 55px;
  z-index: 1;
  position: fixed;
  top: 220px;
  left: 2%;
}
ul{
display: flex;
flex-direction: column;
list-style: none;
}
li{
  width: 50px;
  margin: 0px 0px;
}
li img{
  border-radius: 10px;
  width: 100%;
  box-shadow: 2px 2px 2px rgb(253, 252, 252);
  transition: 500ms;
}
li img:hover{
  transform: scale(1.2);
  transform: translate(10px, -20px);  /* Desplaza el elemento 10px hacia la derecha y 20px hacia abajo */
  box-shadow: 2px 2px 2px rgb(220, 238, 117);

}

/*---------------------*/
/*
.social {
  width: 98%;
  max-width: 50px;
  position: fixed;
  z-index: 1;
  left: 3%;
  top: 250px;
}*/
/*
.social ul {

}
.social img {
  border-radius: 9px;
  width: 100%;
  box-shadow: 2px 2px 3px rgb(112, 106, 106);
}
/*
.social ul li a {
  display: flex;
  flex-direction: column;

  padding: 8px 0px;
  text-decoration: none;
}*/
/*
.social ul li a:hover {
  width: 105%;
}
*/