body {
	
	background-color: #E6EAE8;

	max-width: 100%;
  overflow-x: hidden;

}



html, body {
    height: 100%;
}


.twitter-tweet.twitter-tweet-rendered {
  width: 100% !important;
  margin-left: 0 !important;
}


a.profile-name {
    color: #7430a7; /* Cambia este color al que desees */
}


/* Clase personalizada para el bloque de Twitter */
.custom-twitter-class {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 20px;
}




.main_column.column.sticky-column {
        margin-top: 40px; /* Ajusta este valor según sea necesario */
        border: 3px solid blue; /* Borde azul de 3px */
        padding: 1px; /* Ajusta el padding según sea necesario */
        box-sizing: border-box; /* Asegura que el padding esté incluido en el ancho y alto */
        border-radius: 5px; /* Añade bordes redondeados */
    }



a {
	color: #3800ff;
	text-decoration: none;
	margin: 0px;
}

#post_body twitter-tweet {
    align-items: center;
}

#post_body {
    
}

#post_body img {
   /* margin-left: 0 !important;  Asegura que las imágenes no se desplacen */
}


  /*.top_bars {
	width: 100%;

	height: 40px;
	background-color: #BDBDBD;
	border-bottom: 0.25em solid #1894ca;
	margin: 0 0 10px 0;
	display: inline-flex;
	
	z-index: 10;
}
*/

/*estilos para el area de recorte de suvida de imagen de perfil***/


 #downloadMessage {
            display: none;
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #f8d7da;
            color: #721c24;
            padding: 10px;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            z-index: 1000;
        }




#Overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    display: none;
}

/*estilos para el area de recorte de suvida de imagen de perfil   fin***/

/* Estilos para el contenedor del iframe   para usuarios online*/
#usuarios-en-linea-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 75%; /* Establece la relación de aspecto (para un aspecto cuadrado, usa 100%) */
    height: 0;
}





.usuario-en-linea {
    color: green; /* Cambia el color a verde o el estilo que desees */
}


#usuarios-en-linea-frame {
    width: 350px;
    height: 200px;
    border: none;
}

/* Estilos para el contenedor del iframe   para usuarios online*/




/* Estilos para pantallas de escritorio */
@media only screen and (min-width: 768px) {
  .mi-clase {
    width: 550px;
  }
}

/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {
  .mi-clase {
    width: 100%;
  }
}


/************************************************/




@media  screen and (max-width: 768px){
.responsive-video {
    width: 100%;
    height: auto;
   
  }
}
  

@media (min-width: 768px) {
  .responsive-video {
    width: 70%;
    height: auto;
   
  }
}




/****************************************************/


 


nav.s{
	display: inline-block;
	text-align: center;
}

nav.s a {
	
	
	color: #0000FF;
	text-decoration: none;
	font-size: 17px;
	margin-left: 10px;
	margin-right: 20px;

}





.top_bar {
	width: 100%;

/*	height: 40px; */
	background-color: #4d44c0;
	border-bottom: 0.25em solid #ca18c5;
	margin: 0 0 10px 0;
	display: inline-flex;
	position: fixed;
	z-index: 10;
}

.logo a{
	font-family: 'Bellota-BoldItalic', sans-serif;
	margin-left: 10px;
	font-size: 30;
	position: relative;
	top: 9px;
	text-shadow: #73B6E2 0.5px 0.5px 0px;
	color: #1086BA;
}

a:hover {
	text-decoration: none;
}

nav {
	float: right;
	right: 1px;
	position: absolute;
	margin: 10px;
}

nav a{
	position: relative;
	color: #fff;
	text-decoration: none;
	font-size: 17px;
	margin-right: 8px;
	margin-left: 15px;
}


nav img {
    
    border-radius:50%;
}


@media  screen and (max-width: 768px){
nav a{
	position: relative;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	margin-right: 7px;
	margin-left: 6px;
}

}


@media  screen and (max-width: 350px){
nav a{
	position: relative;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	margin-right: 2px;
	margin-left: 4px;
}
}



nav a:hover {
	border-bottom: 7px solid #e67e22;
	color: #fff;
}




/* Estilo para usuarios en línea */
.user_online {
    color: green; /* Color de texto verde para indicar en línea */
    font-weight: bold; /* Texto en negrita para resaltar */
}

/* Estilo para usuarios desconectados */
.user_offline {
    color: red; /* Color de texto rojo para indicar desconectado */
    font-weight: bold; /* Texto en negrita para resaltar */
}


/**********************importante************************************/

.sticky-column {
  position: sticky;
  top: 40px;
  align-self: flex-start;
  float: right;
  width: 40%;
  height: 100%;
  align-items: just;
  min-height: 170px;
  overflow-y: scroll; /* Agregado para permitir el desplazamiento vertical */
  max-height: calc(100vh - -300px); /* Limita la altura máxima al tamaño de la ventana menos la altura del encabezado */
}


.wrapper {
	 position: relative;
  width: 100%;
  display: flex;
  flex-direction: row; /* Cambiar a disposición horizontal */
  align-items: flex-start; /* Alinear los elementos en la parte superior */
  background: transparent;
   
    min-height: calc(100% - 100px);

}


.main_column {
  position: sticky;
  
  align-self: flex-start;
  float: right;
  width: 40%;
  height: 100%;
  align-items: just;
  min-height: 170px;
  overflow-y: scroll; /* Agregado para permitir el desplazamiento vertical */


}


.column {
    align-items: just;
    background-color: #f0f0f0;
 
    border: 1px solid #47656f00;
    border-radius: 5px;
    box-shadow: 2px 2px 1px #a220e5;
    z-index: 1;
    color: #555;
    padding-top:50px
  
}


.user_details column {

	  position: sticky; /* Hace que esta parte sea pegajosa */
    top: 50px; /* Ajusta la posición superior según sea necesario */
    align-self: flex-start; /* Alinea arriba */
flex: 1;
 /* Estilo para la columna izquierda */
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    /* Otros estilos para .user_details */
z-index: 1;

}

/************************************************/

.user_details_derecha {
    width: 30%;
    min-height: calc(100vh - 50px);
    position: sticky;
    top: 50px; /* Asegura que haya un espacio desde la parte superior */
    align-self: flex-start;
    background-color: #f5f5f5;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 30px; /* Ajusta este valor según tus preferencias */
}


.user_details_derecha .post-popular-container {
    max-height: calc(100% - 20px);
   
}


.user_details_derecha .post-popular-container table {
    width: 100%;
    table-layout: fixed;
    margin: 0 auto;
    border-spacing: 0; /* Elimina el espacio entre las celdas de la tabla */
}


 .user_details_derecha .post-popular-container table td {
    padding: 10px;
    border-bottom: 3px solid #ccc;
    word-wrap: break-word;
    
    position: relative; /* Añade posición relativa para alinear el td de usuario */
}


.status_post {
    background-color: #eee;
    width: 100%;
    height: auto;
    font-size: 15px;
    min-height: 75px;
    cursor: pointer;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 0px; /* Separación entre posts */
    box-sizing: border-box;
    position: relative; /* Asegurar que el contenido respeta el flujo normal */
    z-index: 1; /* Asegurar que no se solapan */
}






.user_details_derecha img {
    max-width: 100%; /* Ajusta el tamaño máximo de las imágenes */
    height: auto; /* Ajusta la altura automáticamente para mantener la proporción */
    display: block; /* Hace que la imagen no se pegue a la derecha */
     padding: 0px;

}





.user_details_derecha .post-popular-container table td .user-info {
    margin-right: 1px; /* Ajusta este valor según sea necesario para reducir el espacio */
}



.user_details_derecha iframe {
    width: 100%; /* Cambiado a porcentaje para adaptarse al contenedor */
    width: 100%; /* Asegura que se adapte al ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente según el ancho */
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
    border-left: 2px solid #ccc; /* Hace la línea divisoria más gruesa */
}



/*************************************************************************/


.user_details_izquierda {
    width: 30%;
    min-height: calc(100vh - 40px);
    position: sticky;
    top: 40px;
    align-self: flex-start;
   
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.user_details_izquierda .additional_content {
    max-height: calc(100% - 20px); /* Ajusta según sea necesario */
    overflow-y: auto; /* Agrega desplazamiento si es necesario */
}

.user_details_izquierda img {
    max-width: 100%; /* Ajusta el tamaño máximo de las imágenes */
    height: auto;
     padding: 10px;
     border-radius:20%;
}



/**********************************************************************/








/* Estilos para la clase .additional_content */
/* Estilos para la clase .additional_content */
.additional_content {
    width: 100%; /* Ocupa todo el ancho disponible */
    margin-top: 20px; /* Ajusta el margen superior según sea necesario */
    background-color: #f0f0f0; /* Cambia el color de fondo si es necesario */
    padding: 10px; /* Agrega relleno si es necesario */
    border: 1px solid #ccc; /* Agrega un borde si es necesario */
}




/******************************************************************/


/********************************************************/

/* Estilos para dispositivos móviles y desktop */
.profile_left {
  background-color: #37B0E9;
  color: #CBEAF8;
  padding: 2px;
  width: 10%; /* Ancho para dispositivos de escritorio */
  padding-top: 2px;
}


.profile_left img {
	
	width: 50px;
	margin: 50px;
	border: 1px solid #83D6FE;
	border-radius: 100px;
}


.profile_info {
	display: list-item;
	background-color: #2980b9;
	width: 100%;
	padding: 10px 0 10px 0;
}





.profile_main_column {
  background-color: #f0f0f0;
  color: #333;
 /* padding: 30px; */
  width: 70%; /* Ancho para dispositivos de escritorio */
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 767px) {
  .wrapper {
    flex-direction: column;
  }

  .profile_left, .profile_main_column {
    width: 100%;
    margin: 60px 0;
  }
}





/****************form nuevos mejorados******************************/
 /* Ajustar el margen superior del contenedor principal de la columna */
    .main_column {
        margin-top: 20px; /* Ajusta este valor según sea necesario */
    }

    /* Estilos para el área de texto */
    textarea#post_text {
        width: 100%;
        height: 90px;
        padding: 10px;
        font-size: 16px;
        border: 3px solid #ccc;
        border-radius: 5px;
        transition: border-color 0.3s;
        box-sizing: border-box; /* Asegura que el padding esté incluido en el ancho */
        animation: blinkBorder 1s step-start infinite;
    }

    textarea#post_text:focus {
        border-color: #66afe9;
        outline: none;
    }

    /* Animación de titileo para el borde del área de texto */
   /* Animación de borde giratorio */
@keyframes rotateBorder {
    10% { box-shadow: 0 0 5px 2px #66afe9; }
    25% { box-shadow: 5px 0 5px 2px #66afe9; }
    50% { box-shadow: 0 5px 5px 2px #66afe9; }
    75% { box-shadow: -5px 0 5px 2px #66afe9; }
    100% { box-shadow: 0 0 5px 2px #66afe9; }
}

textarea#post_text {
    animation: rotateBorder 1.5s linear infinite;
}




    /* Estilos para el botón de subir foto */
    label.file_label {
        display: inline-block;
        padding: 5px 5px;
        font-size: 16px;
        color: #fff;
        background-color: #761869;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-top: 1px; /* Espacio entre el área de texto y el botón de subir foto */
      /*  animation: blinkButton 1s step-start infinite;*/
    }

    label.file_label:hover {
        background-color: #0056b3;
    }

    /* Animación de parpadeo para el botón de subir foto */
    @keyframes blinkButton {
        0% { background-color: #761869; }
        50% { background-color: #0056b3; }
        100% { background-color: #007bff; }
    }

    /* Estilos para el botón de publicar */
    .submit-button {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        color: #fff;
        background-color: #683470;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        box-sizing: border-box; /* Asegura que el padding esté incluido en el ancho */
        margin-top: 0px; /* Espacio entre el botón de subir foto y el botón de publicar */
    }

    .submit-button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    .submit-button:hover:not(:disabled) {
        background-color: #218838;
    }

  
   /* Ajuste de margen superior para el formulario */
    .post_form {
        margin-top: 20px; /* Ajusta este valor según sea necesario */
        padding-top: 10px;
    }
/*******fin nuevos css mejorados*******************************/




/* Estilo cuando el bot??n est?? habilitado */
.post_form .submit-button:enabled {
    background-color: #007bff; /* Cambia el color de fondo cuando est?? habilitado */
    color: #fff; /* Cambia el color del texto cuando est?? habilitado */
}

/* Estilo cuando el bot??n est?? deshabilitado */
.post_form .submit-button:disabled {
    background-color: #ccc; /* Cambia el color de fondo cuando est?? deshabilitado */
    color: #666; /* Cambia el color del texto cuando est?? deshabilitado */
}


.post_form input[type="submit"]:active {
	padding: 5px 4px 4px 5px;
}


/**************************************/








.post_profile_pic {
	float: left;
	margin-right: 8px;
}

.post_profile_pic img {
    border-radius: 20px;
    margin-top: 10px; /* Ajusta el valor según lo que necesites */
}





/*--------------------------------------------*/




/*---------------------------------------------------------*/






/*---------------------------*/


/*---------------------------*/



.newsfeedPostOptions {
	padding: 0px;
	text-decoration: none;
	color:#5169f0;
	border:none;
	margin-bottom: 10px;
}

.newsfeedPostOptions iframe {
    background-color:azul ;
	border: 0px;
	height: 17px;
	width: 120px;
}

.comment_like {
	background-color: transparent;
	border: none;
	font-size: 14px;
	color: #3498db;
	padding: 0;
	height: auto;
	width: auto;
	margin: 0;
}

.like_value {
	display: inline;
	font-size: 14px;
}





.profile_info p {
	margin: 0 0 0 20px;
	word-wrap: break-word;
}

.danger {
	background-color: #e74c3c;
}
.warning {
	background-color: #f0ad4e;
}
.default {
	background-color: #bdc3c7;
}
.success {
	background-color: #2ecc71;
}
.info {
	background-color: #3498db;
}
.deep_blue {
	background-color: #0043f0;
}

.profile_left input[type="submit"] {
	width: 90%;
	height: 30px;
	border-radius: 5px;
	margin: 7px 0 0 7px;
	border: none;
	color: #fff;
}

#accept_button {
	width: 20%;
	height: 28px;
	border-radius: 5px;
	margin: 5px;
	border: none;
	color: #fff;
	background-color: #2ecc71;
}
#ignore_button {
	width: 20%;
	height: 28px;
	border-radius: 5px;
	margin: 5px;
	border: none;
	color: #fff;
	background-color: #e74c3c;
}

.delete_button {
	height: 22px;
	width: 22px;
	padding: 0;
	float: right;
	border-radius: 4px;
	right: 0px;
	position: relative;
}


.profile_info_bottom {
	margin: 10 0 0 7px;

}

#message_textarea {
    
	width: 80%;
		height: 100px;
	margin-right: 8px;
	border-radius: 5px;
	border: 1px solid #D3D3D3;
	font-size: 12px;
}
#message_submit {
	height: 70px;
	width: 60px;
	margin: 0;
	position: absolute;
	border:none;
	background-color: #0040FF;
	color: #FFFFFF;
	border-radius: 5px;
	font-family: 'Bellota-BoldItalic', sans-serif;
	text-shadow: #73B6E2 0.5px 0.5px 0px;
}
.message {
	border: 1px solid #000;
	border-radius: 5px;
	padding: 5px 10px;
	display: inline-block;
	color: #fff;
}

.message#blue {
	background-color: #3498db;
	border-color: #2980b9;
	float: right;
	margin-bottom: 5px;
}
.message#green {
	background-color: #2ecc71;
	border-color: #27ae60;
	float: left;
	margin-bottom: 5px;
}

.loaded_messages {
	height: 65%;
	min-height: 300px;
	max-height: 400px;
	overflow: auto;
	margin-bottom: 35px;
}

.loaded_conversations {
	max-height: 216px;
	overflow: auto;
}

.user_found_messages {
	border-bottom: 1px solid #D3D3D3;
	padding: 8px 8px 10px 8px;
}

.user_found_messages:hover {
	background-color: #D3D3D3;
}

.user_found_messages img {
	height: 35px;
	float: left;
}

#grey {
	color: #8C8C8C;
}


.tab-content {
	margin-top: 25px;
	padding-bottom:60px ;
}

.dropdown_data_window {
    background-color: #fff;
    border: 1px solid #DADADA;
    border-radius: 0 0 8px 8px;
    border-top: none;
    width: 300px;
    position: absolute;
    right: 10px;
    top: 40px;
    overflow: auto;
}

.notification_badge {
	padding: 3px 7px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	background-color: #F00;
	border-radius: 10px;
	position: absolute;
	left: 8px;
	top: -5px;
}

.resultDisplayNotification {
	height: auto;
    color: #1485BD;
    padding-bottom: 7px;
}

.resultDisplayNotification img {
    height: 40px;
    border-radius: 5px;
    margin: 1px 12px 0px 2px;
    float: left;
}

.timestamp_smaller {
	font-size: 85%;
	margin: 0;
}




.small_profile_pic {
	height: 55px;
    margin: 1px 12px 0 2px;
    float: left;
}

#settings_input {
	border: 1px solid #ccc;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
}

.settings_submit {
	border: none;
    padding: 7px 12px;
    border-radius: 5px;
    color: #fff;
}


.message .deleteButton {
   color: red;
   margin: 0 5px 5px 0;
   cursor: pointer;
}
/* imagenes del post-----------------------*/




/* imagenes del post-----------------------*/

/* imagenes del post-----------------------*/

@media  screen and (max-width: 768px){
    
    .top_bar {

	width: 100%;
	
	height: 60px;
	background-color: #5742a0;
	border-bottom: 0.25em solid #ca18c5;
	margin: 0 0 10px 0;
	display: inline-flex;
	position: fixed;
	z-index: 10;
	margin-right: 500px
}


.logo a{

}


}


@media  screen and (max-width: 768px){

nav {
display: inline-block;
	right: 1px;
	position: absolute;
	margin: 10px;
}

     }





nav.s{
position: relative;
	color: red;
	text-decoration: none;
	font-size: 17px;


}



nav.s a {
	
	
	color: #0000FF;
	text-decoration: none;
	font-size: 17px;


}


 

    

    
 
    
    
    
    
    
    
    
   @media  screen and (max-width: 768px){
    .wrapper {
	margin: 0 auto;
	width: 100%;
	
	position: relative;

}

    }
    


/* imagenes del post----------------------------------------------------------------------------*/

.postedImage img {
  max-width: 100%;
  max-height: 91vh; /* Ajusta la altura máxima al 50% de la altura del viewport */
  width: auto; /* Ajusta el ancho automáticamente */
  height: auto; /* Ajusta la altura automáticamente */
  display: block;
  margin: 10px auto;
}



    /* Ajustes específicos para dispositivos móviles */
@media screen and (max-width: 768px) {
  .postedImage img {
    max-width: 100%;
 /*   max-height: none; /* Removemos la restricción de altura máxima */
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
   /* Elimina cualquier margen para asegurar que no haya espacios a los lados */
  }
}


/* Ajustes específicos para dispositivos móviles */
@media screen and (max-width: 1000px) {
  .postedImage img {
    max-width: 100%;
 /*   max-height: none; /* Removemos la restricción de altura máxima */
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
   /* Elimina cualquier margen para asegurar que no haya espacios a los lados */
  }
}

/* Ajustes específicos para pantallas grandes */
@media screen and (min-width: 1024px) {
  #post_body {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
  }
}




 @media  screen and (max-width: 800px){
    
    .user_details {
    	
display: none;
}


}





 @media  screen and (max-width: 768px){
    
    .user_details {
    	
display: none;
}


}

    
     
    


/* Estilo para dispositivos móviles */
@media (max-width: 767px) {
    .user_details_derecha,
    .user_details_izquierda {
        display: none; /* Oculta en dispositivos móviles */
    }
}




/* Estilo para dispositivos móviles */
@media (max-width: 800px) {
    .user_details_derecha,
    .user_details_izquierda {
        display: none; /* Oculta en dispositivos móviles */
    }
}



/* Estilo para dispositivos móviles */
@media (max-width: 767px) {
    .user_details_izquierda {
        display: none; /* Oculta en dispositivos móviles */
    }
}



/* Estilo para dispositivos móviles */
@media (max-width: 800px) {
    .user_details_izquierda {
        display: none; /* Oculta en dispositivos móviles */
    }
}



/* Estilos específicos para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
  .sticky-column {
    width: 100%; /* Ocupar todo el ancho en dispositivos móviles */
    height: auto; /* Altura automática para adaptarse al contenido */
    max-height: none; /* Eliminar la altura máxima */
    overflow-y: auto; /* Agregar desplazamiento vertical solo cuando sea necesario */
  }

  .user_details {
    width: 100px; /* Ocupar todo el ancho en dispositivos móviles */
    float: none; /* Eliminar el flotante */
  }
  
   .main_column {
     padding-top: 50px;
	width: 100%;
	z-index: 1;
	
}
  
  
  .post_form textarea {
	width: 80%;

}

}



@media screen and (min-width: 768px) {
    .ocultar-en-pc {
        display: none;
    }
}

    .notis {
    font-size: 14px; /* Cambia el tamaño de fuente a 20px (puedes ajustar el valor según tus necesidades) */
    margin: 8px; /* Establece un margen de 10px en todos los lados del div */
    color: blue; /* Color de texto azul */
}
    
    
    
    
    /* post-styles.css */

.post-content {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    font-size: 18px;
    color: #333;
    margin: 20px 0;
}

/* ... Otros estilos sugeridos aquí ... */
/* Mejorar la legibilidad del texto */
.post-content {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    font-size: 18px;
    color:#b5a0c8;
    margin: 20px 0;
}

/* Espaciado entre párrafos */
.post-content p {
    margin-bottom: 15px;
}

/* Encabezados claros y definidos */
.post-content h1,
.post-content h2,
.post-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
    color: #111;
}

/* Estilo para citas */
.post-content blockquote {
    margin: 20px 0;
    padding: 10px 20px;
    border-left: 5px solid #ccc;
    background: #f9f9f9;
    color: #666;
    font-style: italic;
}


/* Botones de compartir */
.share-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.share-buttons a {
    display: inline-block;
    margin-left: 10px;
    text-decoration: none;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
}

.share-buttons a.facebook {
    background: #3b5998;
}

.share-buttons a.twitter {
    background: #55acee;
}

.share-buttons a.linkedin {
    background: #0077b5;
}

.share-buttons a:hover {
    opacity: 0.8;
}


/* Imágenes dentro del contenido del post */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* Estilo para imágenes con borde */
.post-content img.bordered {
    border: 5px solid #ddd;
    padding: 5px;
    border-radius: 10px;
}



/* Estilo para la sección de comentarios */
.comments-section {
    margin-top: 40px;
}

.comments-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #222;
}

.comment {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fafafa;
}

.comment .comment-author {
    font-weight: bold;
    margin-bottom: 5px;
}

.comment .comment-text {
    margin-top: 10px;
}

.main_column {
    width: 60%; /* Ajusta el ancho según sea necesario */
    margin: 0 auto; /* Centra el contenedor */
    float: none; /* Asegura que el contenedor no flote */
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}







@media only screen and (max-width: 768px) {
    .main_column {
        width: 90%; /* Ajusta el ancho para pantallas más pequeñas */
         padding-top: 100px;
    }

    .header {
        position: relative; /* Permite que el header se comporte de manera diferente en pantallas pequeñas */
    }

    body {
        margin-top: 0; /* Quita el margen superior en dispositivos móviles */
    }
}

    /* Ajustes para dispositivos móviles */
@media only screen and (max-width: 768px) {
    .main_column {
        width: 100%;
        margin: 0 auto;
        
    }

   }

   


.post-text-margin {
    margin-left: 10px;
    margin-right: 10px;
}










/* Ajustes para asegurar que se ve bien en todas las pantallas */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Evitar el scroll horizontal */
}

.main_column {
/*    padding: 0;  */
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}


/*****************************************************/

    
  
.profile_pic img {
    width: 150px;  /* Ajusta esto al tamaño deseado */
    height: 150px; /* Asegura que la imagen mantenga un tamaño cuadrado */
    object-fit: cover; /* Para que la imagen se recorte y mantenga su proporción */
    border-radius: 50%; /* Para darle un efecto de círculo */
}

  




/*--- rotacion pra el logo ---------*/
.rotate {
    display: inline-block; /* Asegúrate de que el elemento sea un bloque en línea */
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



/*--- rotacion pra el logo fin--------------------*/