 html,
 body {
     width: 100%;
     height: 100%;
 }

 header {
     flex-wrap: wrap;
     height: 60px;
 }

 body {
     background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
     background-size: 400% 400%;
     animation: gradient 15s ease infinite;
 }

 @keyframes gradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }


 .galeria {

     align-content: center;
     align-items: center;
     justify-content: center;


 }

 img {
     width: 230px;
     height: 230px;
     object-fit: cover;

 }

 h1 {
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     text-align: center;
     margin-bottom: 30px;
     color: antiquewhite;
     -webkit-text-stroke: 1px black;
 }

 button {

     flex-wrap: wrap;
     display: inline-block;
     padding: 0.9em 1.8em;
     text-transform: uppercase;
     text-decoration: none;
     letter-spacing: 4px;
     color: transparent;
     border: 3px solid orangered;
     font-size: 14px;
     position: relative;



     font-family: Verdana, Geneva, Tahoma, sans-serif;
     background: transparent;
     cursor: pointer;

 }

 button::before {
     content: "Volver";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #363636;
     color: antiquewhite;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.5s;
 }

 button:hover::before {
     left: 100%;
     transform: scale(0) rotateY(360deg);
     opacity: 0;
 }

 button::after {
     content: "Volver";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: #363636;
     color: #A6FF00;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.5s;
     transform: scale(0) rotateY(0deg);
     opacity: 0;
 }

 button:hover::after {
     left: 0;
     transform: scale(1) rotateY(360deg);
     opacity: 1;
 }