*{
    padding: 0;
    margin: 0;
}


.header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 20px;
    background-color:white; 
}


.logo img {
    height: 250px; 
    width:250px;
   
}


.titulo h1 {
    font-size: 50px; 
    color: #0a0a0a;
    font-weight: 800;
    margin-left: -20px; 
}

#menu{
    width: 450px;
    padding-top: 13px;
    margin: auto;
}
#menu ul a{
    color: #000;
    text-decoration: none;
    font: 16px verdana;
    padding: 13px 20px 19px 20px;
}
#menu ul a:hover{
    color: #f2f2f2;
    background: #6e6e6e;
}

#main{
    background: #6e6e6e;
    height: 2000px;
}

#color{
    color: #000;
}

.navbar {
    background-color: hsl(298, 33%, 61%); 
  }
  .navbar-nav .nav-link {
    color: #000000; 
  }
  .navbar-nav .nav-link:hover {
    color: #383636; 
  }



  .contenedor {
    width: 100%; /* Ancho completo */
    height: 50vh; /* Altura completa de la ventana */
    display: flex; /* Usamos flexbox para alinear el contenido */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

.contenedor1 {
    width: 100%; /* Ancho completo */
    height: 60vh; /* Altura completa de la ventana */
    display: flex; /* Usamos flexbox para alinear el contenido */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

.contenedor2 {
    width: 100%; /* Ancho completo */
    height: 60vh; /* Altura completa de la ventana */
    display: flex; /* Usamos flexbox para alinear el contenido */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

/* Estilos para el contenedor interno de contenido */
.contenido {
    text-align: center; /* Centra el texto dentro del contenedor */
    padding: 20px;
    background-color: white; /* Fondo blanco para el contenido */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 80%; /* Ancho del contenedor */
    max-width: 600px; /* Ancho máximo del contenedor */
}

.contenido1 {
    text-align: center; /* Centra el texto dentro del contenedor */
    padding: 20px;
    background-color: white; /* Fondo blanco para el contenido */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 80%; /* Ancho del contenedor */
    max-width: 600px; /* Ancho máximo del contenedor */
}
.contenido2 {
    text-align: center; /* Centra el texto dentro del contenedor */
    padding: 20px;
    background-color: white; /* Fondo blanco para el contenido */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 80%; /* Ancho del contenedor */
    max-width: 600px; /* Ancho máximo del contenedor */
}

h1 {
    font-size: 36px;
    color: #0e0d0d;
    margin-bottom: 20px;
}


p {
    font-size: 18px;
    color: #050505;
}


.img-square {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Relación de aspecto 1:1 (cuadrado) */
    overflow: hidden; /* Esconde cualquier parte que sobresalga */
}

.img-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
}


table {
    width: 50%;
    border-collapse: collapse;
    margin: 20px auto; /* Centrar la tabla */
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #0e0d0d;
}

th {
    background-color: #D6A6FF; /* Morado claro para los encabezados */
    color: rgb(14, 13, 13); /* Texto blanco para los encabezados */
}

td {
    background-color: #F3E5F5; /* Morado muy claro para las celdas */
}

tr:nth-child(even) td {
    background-color: #E1BEE7; /* Color más claro para las filas pares */
}

img {
    width: 90px;
    height: 90px;
    border-radius: 50%; /* Para las fotos en forma de círculo */
}