body{
    background-image: url('https://static.vecteezy.com/system/resources/previews/008/969/736/non_2x/abstract-polygon-triangular-background-in-coral-color-low-poly-style-gradien-vector.jpg');
    background-size:cover;
    background-repeat: no-repeat;
}
@import url('https://fonts.google.com/share?selection.family=Uncial+Antiqua|Uncial+Antiqua:400,700|Uncial+Antiqua:400,700&display=swap');

.imagen-frente, .imagen-atras {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ajusta al tamaño del contenedor */
    height: 100%; /* Ajusta al tamaño del contenedor */
    border-radius: 10px; /* Bordes redondeados */
    transition: transform 0.3s ease; /* Animación suave */
    backface-visibility: hidden; /* Oculta la cara trasera al rotar */
}

.imagen-atras {
    transform: rotateY(180deg); /* Oculta la imagen trasera inicialmente */
}

.redes:active .imagen-frente {
    transform: rotateY(180deg); /* Rota la imagen frontal */
}

.redes:active .imagen-atras {
    transform: rotateY(0deg); /* Muestra la imagen trasera */
}

.tps:active .imagen-frente {
    transform: rotateY(180deg); /* Rota la imagen frontal */
}

.tps:active .imagen-atras {
    transform: rotateY(0deg); /* Muestra la imagen trasera */;
}

.nombre {
    font-family: 'Uncial Antiqua', normal; /* Cambia la fuente */;
    color:#f1797f;
    font-size: 25px;
    text-align: center; /* Centra el texto */;
}

.foto {  
    height: auto; /* Mantiene la proporción de la imagen */
    width: 90%; /* Ajusta al tamaño del contenedor */
    margin: 0px auto; /* Centra la imagen horizontalmente */
    justify-content:center;
    flex-wrap: wrap; /* Permite que los elementos se ajusten a la siguiente línea */;
    text-align: center; /* Centra el contenido horizontalmente */
}

    
.flex-container {
    background:#dfdfdf;
    display:flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten a la siguiente línea */;
    justify-content: center; /* Centra horizontalmente */;
    align-content: flex-start;
    width: 90%; /* Ajusta el ancho al 90% del contenedor padre */
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
    margin: 0px auto;
    padding: 0px;
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}

.tps {
    margin: 10px;
    padding: 10px;
    align-content: center;
    flex-wrap: wrap;
    justify-content:center;
    align-items: flex-start;
    position: relative;
    width: 45px; /* Ancho del botón */
    height: 45px; /* Alto del botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */ 
}

.redes {
    margin: 10px;
    padding: 10px;
    align-content: center;
    flex-wrap: wrap /* Permite que los elementos se ajusten a la siguiente línea */;
    justify-content: center /* Centra horizontalmente */;
    align-items: flex-start;
    position: relative;
    width: 35px; /* Ancho del botón */
    height: 35px; /* Alto del botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

.descripcion {
    font-size: calc(1rem + 0.5vw);
    text-align: justify;
    word-wrap: break-word;
    width: 100%;
    max-width: 300px;
    margin: 08px auto;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; /* Cambia la fuente */;
    font-size: 11px;
    color: #e95555;
}