html {
	scroll-behavior: smooth;
}

body {
   font-family: "Cormorant Garamond", sans-serif;
   font-size:30px;
   background-image: url(Recursos/bluebackground.jpg);
   background-size: cover;
   background-position: center; 
   color:white;
  
  
}




.encabezado {
	color:pink;
	font-family: "Cinzel", sans-serif;
	font-size:45px;
	margin-left:50px;
	
}


/* Fondo del encabezado */
.hero {
	
       background:
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        url(Recursos/headerbackground.jpg);
    background-size: cover;
    background-position: center;
	
    height: 200px;


    display: flex;
    justify-content: flex-end; /* Mueve los botones a la derecha */
    align-items: center;       /* Centra verticalmente */
    padding-right: 30px;
	margin-bottom:50px;
	text-align:left;
}

h1 {
	font-family: "Lucida Calligraphy";
	color:  white;
	font-size:40px;
	text-align:left;
	padding-right:130px;
	
}

.intro{
	font-family: "Lucida Calligraphy";
	color: pink;
	background:rgba(155, 155, 155, 0.8);
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
	border:10px solid black;
	margin-left:50px;
	margin-right:50px;
	text-indent:40px;
}

/* Contenedor de los botones */
.menu {
    display: flex;
    gap: 20px; /* Separación entre botones */
}

/* Estilo de los botones */
.btn {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;

    border-radius: 8px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    transition: 0.3s;
}

.contenedor-boton{
	text-align: center;
}

.btn:hover {
    background-color: white;
    transform: scale(1.05);
}



.fila-filosofo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin: 40px 0;
}

.fila-filosofo .texto {
    flex: 2; /* El texto ocupa más espacio */
	text-indent: 40px;
	margin-left:50px;
	font-size:30px; 
	color:black;
	background-color:rgb(168, 168, 155);
	border: 10px solid pink;
}

.fila-filosofo .foto {
	margin-top:80px;
    flex: 1; /* La foto ocupa menos */
}

.fila-filosofo img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    border: 10px solid pink;
}

footer {
	text-align: center;
}