html {
  font-family: 'Inconsolata', monospace;
}

body {
  background-color: hsla(238, 100%, 62%, 0.1);
}

[data-content] {
  display: none; /* This line hides content by default */
}

.active[data-content] {
  display: block; /* This line shows content when it has the 'active' class */
}



.menu {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  grid-gap: 5px;
  justify-content: space-around;
}

.content .menu {
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-top: 1cm;
  margin-left: 1cm;
  margin-right: 1cm;
  color: rgb(59, 80, 27);
  margin-bottom: 1cm;
  font-size: 100%;
  font-style: normal;
  font-weight: 600;
  cursor: pointer;
}

.text-box {
  border: 2px black;
  border-style: double;
  padding: 7px;
  background-color: hsla(260, 80%, 60%, 0.2);
  display: flexbox;
}

body {
  /*background-image: url('graph2.png'); /* Cambia 'background.jpg' por la ruta de tu imagen */
  background-size: 30%; /* Escala la imagen para cubrir todo el fondo */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: right top; /* Posiciona la imagen a la derecha, en la parte superior */
  background-attachment: fixed; /* Hace que la imagen permanezca fija mientras se desplaza */
  font-family: 'Inconsolata', monospace; /* Mantiene la tipografía actual */
  margin: 0; /* Elimina márgenes predeterminados del navegador */
  padding: 0; /* Elimina paddings predeterminados */
}


.column1 img {
  width: 200px; /* Tamaño de la imagen */
  height: auto; /* Mantiene proporciones */
  border-radius: 5px; /* Esquinas redondeadas en la imagen */
}

.column2 {
  flex: 1; /* Hace que el texto ocupe el espacio restante */
  text-align: left; /* Alinea el texto a la izquierda */
}



.content {
  padding: 10px 10px 10px 10px;
  margin: auto;
  width: calc(80% - 60px); /* Resta el padding de los márgenes laterales */
  text-align: justify;
  border: 0px solid gray;
  border-top-width: 0px;
  border-bottom-width: 0px;
  height: auto;
  background-color: hsla(185, 100%, 62%, 0.2);
  gap: 20px; /* Espacio entre columnas */
  align-items: center; /* Centra verticalmente las columnas */
}

.content .header {
  text-align: left;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-top: 0cm;
  color: rgb(59, 80, 27);
  margin-bottom: -0.2cm;
}

  


.content .column1 {
  text-align: right;
  float: left;
  margin-top: 20px;
  width: 20%;
}

.content .column2 {
  text-align: center;
  float: left; 
  margin-right: 0px;
  width: 50%;
  color: rgb(59, 80, 27);
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.content .column3 {
  text-align: left;
  float: right;
  margin-top: 10px;
  width: 25%;
}

.contact-info {
  display: flex; /* Flexbox para alinear elementos en la misma línea */
  gap: 40px; /* Espacio entre los enlaces */
  justify-content: center;
  flex-wrap: wrap; /* Opcional: permite que los enlaces se muevan a la siguiente línea si no hay suficiente espacio */
}

.contact-info a {
  text-decoration: none; /* Opcional: quita el subrayado */
  color: blue; /* Opcional: estilo del enlace */
}

.content .name {
  text-align: center;
  color: darkblue;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.content .body .authors {
  font-size: 15px;
  color: gray;
}

.content .body .pub {
  font-size: 15px;
  color: gray;
}

ul {
  padding-left: 0.5cm;
  list-style: none;
}

.about ul {
  list-style: none; /* Elimina los bullets */
  padding: 0; /* Elimina el padding predeterminado del <ul> */
  margin: 0; /* Elimina el margen predeterminado del <ul> */
}

.about li {
  margin-bottom: 10px; /* Añade espacio entre los elementos de la lista */
  line-height: 1.6; /* Mejora la legibilidad */
}

.publications {
  list-style-type: disc; /* Reemplaza con tu imagen */
}

.content ol.about li {
  margin-bottom: 0.2cm;
}

.content .body li {
  margin-bottom: 0.3cm;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.bold {
  font-weight: bold;
}

#link {
  text-decoration: none;
}

.authors #link {
  text-decoration: none;
  font-weight: bold;
  color: darkblue;
}

#hlist ul{
  margin-top: 0cm;
  list-style: none;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#hlist li{
  margin-top: 0cm;
  display: inline-block;
  margin-right: 10px; 
}

/* Configurar las columnas */
#hlist ul {
  columns: 3; /* Cambia a 2 si prefieres dos columnas */
  -webkit-columns: 3;
  -moz-columns: 3;
  list-style-type: disc; /* Usa viñetas de círculos */
  padding-left: 20px; /* Espacio para las viñetas */
  text-align: left; /* Alinea el texto a la izquierda dentro de las columnas */
}

/* Estilo para los enlaces */
#hlist a {
  color: darkblue; /* Cambia el color del enlace */
  text-decoration: none; /* Sube el subrayado para destacar */
}

#hlist a:hover {
  color: darkred; /* Cambia el color cuando pasas el mouse por encima */
}

#hlist ul {
  columns: 3; /* Número de columnas */
  column-gap: 20px; /* Espaciado entre las columnas */
}

#hlist ul li {
  display: block; /* Asegura que cada elemento ocupe su propia línea */
}

#teaching {
  display: block;
}
.header h2 {
  color: rgb(59, 80, 27);}
.body ul {
  list-style-type: disc;
  margin-left: 20px;
}