@charset "UTF-8";

/* --- General Styles --- */
/* Fondo general con imagen */
body {
  background-color:#ffffff;
  background-image:url(https://img.mfcimg.com/photos2/213/21363481/212-437-824-755-14556295.jpg);
  background-size:cover;
/* La imagen cubre toda la pantalla */
  background-attachment:fixed;
/* Hace que la imagen de fondo se quede fija mientras se hace scroll */
  background-position:center;
/* Centra la imagen */
  color:#eae0ef;
  font-family:'Verdana',sans-serif;
  font-size:14px;
  margin:0;
  padding:0;
}

/* Estilos para los enlaces */
a:link,a:active,a:hover {
  color:#f6efef;
}

a:visited {
  color:#eefaf8;
}

/* --- Profile Section --- */
/* Sección de perfil con fondo oscuro y letras blancas */
.profile_section_content {
  color:#fff;
/* Letras blancas para mayor contraste */
  padding:15px;
  margin:15px;
  background-color:rgba(0,0,0,0.5);
/* Fondo oscuro con opacidad */
  border-radius:8px;
  box-shadow:0 0 15px rgba(0,0,0,0.3);
/* Sombra suave */
}

/* Fondo transparente de la sección de perfil */
.profile_section_background {
  background-color:transparent;
  background-image:none;
}

/* Bordes redondeados y sombra en las imágenes */
.img_radius_shadow {
  border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,0.3);
}

/* Encabezados de las secciones del perfil */
.profile_section_content .heading {
  padding:12px;
  background-color:rgba(0,0,0,0.7);
/* Fondo oscuro */
  color:#f6e9e9;
  font-family:'Verdana',sans-serif;
  font-weight:bold;
  font-size:16px;
  border-radius:5px;
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  text-shadow:2px 2px 4px rgba(0,0,0,0.7);
/* Sombra en el texto */
}

/* Contenido de la sección */
.content {
  padding:15px;
}

/* Estilos para el feed de noticias */
.my_mfc_news_feed {
  width:100%;
  height:330px;
  border-radius:10px;
  box-shadow:0 0 10px rgba(0,0,0,0.2);
}

/* --- Contenedores de sección con fondo oscuro --- */
/* Secciones de "Quiero ver más", "Mostrar tu amor" y "Declaración principal" */
#main-statement,#want-to-see-more-of-me,#show-your-love-and-appreciation {
  background-color:rgba(0,0,0,0.7);
/* Fondo oscuro */
  padding:15px;
  margin-bottom:20px;
  border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,0.3);
/* Sombra suave */
}

#buttons-container-more-of-me,#buttons-container-love-and-appreciation {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Estilos de botones dentro de estas secciones */
#buttons-container-more-of-me a,#buttons-container-love-and-appreciation a {
  border-radius:5px;
  padding:10px;
  background-color:#f6efef;
  text-decoration:none;
  transition:background-color .3s;
}

#buttons-container-more-of-me a:hover,#buttons-container-love-and-appreciation a:hover {
  background-color:#f6f2f2;
}

/* Colores y sombras de texto */
#main-statement,#want-to-see-more-of-me,#show-your-love-and-appreciation {
  color:#fff;
/* Texto blanco para contraste */
  text-shadow:2px 2px 4px rgba(0,0,0,0.7);
/* Sombra sutil en el texto */
}

/* --- Styling for Username, Gender, and Comments --- */
/* Estilo de los campos de nombre, género y comentarios */
.username,.gender,.comments {
  color:#fff;
/* Blanco para mayor contraste */
  font-weight:bold;
  font-size:16px;
/* Tamaño de texto más grande */
  text-shadow:2px 2px 4px rgba(0,0,0,0.7);
/* Sombra para visibilidad */
}

/* --- Sección de Intereses --- */
/* Fondo rosado claro para la sección de intereses */
#interests {
  background-color:rgba(255,228,235,0.8);
/* Fondo rosado con transparencia */
  padding:20px;
  border-radius:12px;
  margin-bottom:20px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
/* Sombra suave */
}

#interests h3 {
  font-size:18px;
  color:#e3a0d1;
/* Lila para el título */
  text-align:center;
  font-weight:bold;
}

#interests p {
  color:#9c7e9f;
/* Gris lavanda */
  font-size:14px;
  line-height:1.6;
  text-align:justify;
}

/* --- Sección de Trabajos --- */
/* Fondo azul pastel para la sección de trabajos */
#jobs {
  background-color:rgba(232,242,246,0.8);
/* Azul pastel con algo de transparencia */
  padding:20px;
  border-radius:12px;
  margin-bottom:20px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
/* Sombra suave */
}

#jobs h3 {
  font-size:18px;
  color:#88c8df;
/* Azul claro para los títulos */
  text-align:center;
  font-weight:bold;
}

#jobs p {
  color:#7c6a9b;
/* Gris lavanda para el texto */
  font-size:14px;
  line-height:1.6;
  text-align:justify;
}