/* variables */
:root{
    --background-color:#0c1014;
    --text-color:#e6f5f5;
    --date-color:#99a89a;
    --interaction-color:#A8A8A8;
    --input-text-color:#a8a887;
    --border-color:#363636;
    --font-size: 14px;
    --hashtag:#708dff;
}

/* reset basico */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    font-family: "Poppins", sans-serif;
    font-size: var(--font-size);
    background-color: var(--background-color);
}


/* main */
.main-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8%;
    
   
}

/* sección general del post que incluye todo el post, desde la imagen del post hasta la sección de comentarios */

.post-section{
    display: flex;
    border: 1px solid  var(--border-color);
    max-width: 800px;
    max-height: 600px;
}

/* imagen del post */
.post-image{
  
}
.post-img{
    width: 450px;
    height: 600px;
}

/* contenedor de sección de la derecha de información del post y comentarios */
.post-body{
    display: flex;
    flex-direction: column; 
    height: 600px;

    color: var(--text-color);
    background-color: var(--background-color);

}

/* información del que publicó el post */
.post-header{
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 14px 16px;
    flex-wrap: wrap;

}
/* fotos de perfil en general, tanto de comentarios */
.author-avatar{
    height: 32px;
    width: 32px;
    border-radius: 50px;
    cursor: pointer;
    object-fit: cover;
}
/* información como el nombre del creador post y su ubicación en que realizó el post */
.author-info{
    padding:0px 10px;
    line-height: 16px;
}
.author-name{
    cursor: pointer;
    font-weight: 600;
    margin-right:10px;
    overflow-wrap: anywhere;
    /* color: var(--text-color); */
}
.author-location{
    font-weight: 300;
}




/* sección de descripción del post que el creador del post le colocó */

.op-post-information{
    margin-bottom: 10px;
}

.author{
    padding: 14px 16px;
    display: flex;
}

/* contenedor flex para hacerlo tipo más como instagram */
.author-body{
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
}
/* contneedor que guardará el username y hace cuanto fue el post*/
.author-data{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.author-date{
    color: var(--date-color);
}


/* contenedor que guardará la descripción del post y los hashtags del post */
.author-content{
    display: flex;
    flex-direction: column;
}

.author-text{
    /* color: var(--text-color); */
    overflow-wrap: anywhere;

}
.author-hashtags{
    color: var(--hashtag);
    cursor: pointer;
}


/* sección de comentarios */

.comments-section{
    flex: 1;
    overflow-y: auto;
}

.comments-container{

}
/* contenedor del comentario de forma individual */
.comment-div{

}
/* sección de interactuar con el comentario */
.comment-interaction{
    display: flex;
}
.interaction{
    color: var(--interaction-color);
    font-weight: 500;
    margin-right: 5px;
    cursor: pointer;
}
.delete-comment{
    border: none;
    background: none;
    cursor: pointer;
}




/* esto para que los inputs se queden hasta abajo del contenedor */
.comment-form-section{
    margin-top: auto;
}
/* iconos de me gusta, comentario, enviar... */
.interaction-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}
.interact-icon{
    cursor: pointer;
}

/* formulario de inputs */
.comment-form{
    display: flex;
    flex-direction: column;
}
.comment-input{
    background-color: var(--background-color);
    color: var(--input-text-color);
    padding-left: 5px;
    margin-bottom: 5px;
    height: 30px;
    border: none;
    font-family: "Poppins", sans-serif;
}
#submit-btn{
    font-family: "Poppins", sans-serif;
    color: var(--text-color);
    font-weight: bold;
    border: none;
    background:none;
    padding-bottom: 10px;
    cursor: pointer;
}