.gradient-background {
    /* background: linear-gradient(135deg,#78C1F3, #9BE8D8); (from color palette) */
    background: linear-gradient(45deg,#74d7ff, #c8f444);
    background-size: 180% 180%;
    animation: gradient-animation 18s ease infinite;
  }

/*
.image-background {  
  background-image: url("https://www.teahub.io/photos/full/237-2373741_kids-background.jpg");
}
*/

main{
    min-height: calc(100vh - 135px);
}

header {
    background-color:darkred;
    color:white;
    font-size: 30px;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100vw;
    font-family: 'Cooperplate';
}

.nav-style{
    background-color: darkred;
    color:white;
}

.maya-logo {
    background-color: darkred;
    color:white;
    font-size: 25px;
    font-family: "Gugi", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: right;
    margin-right: 10px;
    width: 100vw;
    height: 35px;
}


.logo-img {
    height: 60;
    margin: 0;
    padding: 0;
    background-color: darkred;
    }

.megrim-regular {
    font-family: "Megrim", system-ui;
    font-weight: 400;
    font-style: normal;
  }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.footer-box{
    background-color: darkred;
    color:white;
    font-size: 15px;
    font-family: 'Cooperplate';
    text-align: center;
    width: 100vw;
    height: 25px;
}

.contenedor1{
    width: 100% auto;
    margin: 10% auto; 
    display: flex;
    justify-content: center;
   
}


.button-wrap{
    display: inline-block;
    margin: 25px;
    /*webkit-perspective: 800;
    perspective: 800; */
    align-items: center;
    /* flex-wrap: wrap; */
}

.button{
    width: 300px;
    height: 300px;
    border-style: groove;   
    border-top-right-radius: 50px;
    border-color: #8b0000;
    border-width: 5px;
    align-content: center;
    background: #F8FDCF;
    object-fit: fill; 
    position: relative; 
    /* transform-style: preserve-3d; */
    /* transition: .7s ease; */
    /*
   AQUI SE PUEDE AGREGAR LAS SOMBRAS
   */
    }


/* .front, .back{
     width: 100%;
     height: 100%;
     top:0;
     left:0;
     justify-content: center;
     align-items: center;
     font-weight: bold;
     backface-visibility: visible;
     -webkit-backface-visibility: visible;
     } */

.front{
    margin-top: 1em;
    height: 70%;
    /* align-items: center; */
    /* justify-content: center; */
    /* margin: auto; */
    /* font-weight: bold; */
}

/* .back{
    padding: 15px;
    display: flex;
    justify-content: right;
    align-items: right;
    font-weight: bold;
    color: rgb(0, 0, 0);
    font-family: "open sans";
    } */

.button-wrap:hover .button{
    /* transform: rotateY(180deg); */
    transform: scale(1.1,1.1);   
}


.front figure img{
    margin-top: 0px;
    width: 200px;
    height: 230px;
    background-size: cover;
    align-items: center;
}

h1{
    font-family: 'Cooperplate';
    font-size: 70px;
    text-align: center;
    color: #0d3562;
}

h2{
    font-family: 'Cooperplate';
    font-size: 30px;
    text-align: center;
    color: #0d3562;
}

h3{
    margin-top: 30px;
    font-family: 'Cooperplate';
    font-size: 30px;
    text-align: center;
    color: black;
}

h4{
    font-family: 'Cooperplate';
    font-size: 25px;
    text-align: center;
    color: black;
}

/* h2::after, h2::before{
    content: '';
    position: absolute;
    width: 120px;
    height: 3px;
    background-color: currentColor;
    top: 50px;
    
} */

h2::before{
    left: 390px;
}

h2::after{
    left: 790px;
}