.big-post{
    position:fixed;
    left:5%;right:5%;bottom:5%;
    border:solid 1px gray;
    border-radius: 16px;
    z-index: 10000;
    background-color: white;
}

.big-post-add{
    border-left:solid 2px black;
    z-index: 100;
    background-color: var(--bg);
    display: flex;
    width:100%;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.big-post-close{
    position: absolute;
    right:0;
    top:0;
    transform: translate(50%,-50%);
    z-index: 1001;
    border-radius: 50%;
    background-color: white;
}

.big-post-inner{
    display:flex;
    flex-direction: row;
    height:100%;
}

.single-image{
    width: 100%;
    object-fit: cover;
    max-height: 100vh;
    min-height:40vh;
    cursor: pointer;
}

.two-images{
    width: 49.9%;
    height: 80vh;
    object-fit: cover;
    cursor: pointer;
}

.two-images-spacing{width:0.5%}

.three-images-left{
    width: 49.9%;
    height: 70vh;
    object-fit: cover; 
    cursor: pointer;
}

.three-images-right-container{
    width: 49.9%;
    display: flex;
    flex-direction: column;
}

.three-images-right{
    width: 100%;
    height: 35vh;
    object-fit: cover;
    cursor: pointer;
}

.last-image-cover{
    z-index: 2;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.527);
}

.multiple-image-container{
    width:50%;
    padding-top: 50%;
    position:relative;
}

.single-image-container{
    display: flex;
}

.multiple-image-image{
    width:100%;
    height:100%;
    position: absolute;
    left:0px; top:0px;
    object-fit: cover;
    cursor: pointer;
}

/* .single-image:hover,
.two-images:hover,
.three-images-left:hover,
.three-images-right:hover,
.multiple-image-image:hover,
.last-image-cover:hover
{
    opacity: 0.6;
} */

.post-creator-photo{
    height: 60px;
    width: 60px;
    border-radius: 30px;
    object-fit: cover;
}

.comment-creator-photo{
    height: 30px;
    width: 30px;
    border-radius: 30px;
    object-fit: cover; 
}

.comment-content-footer{
    display: flex;
    flex-direction: row-reverse;
}

.show-comment-reply{
    color:gray;
    text-align: right;
    cursor:pointer;
    font-size: 14px;
}

.show-comment-reply:hover{
    text-decoration: underline;
}

.comment-container{

}

.comment-container-last{

}

.post-info{
    padding:10px;
    font-weight: normal;
}

.comment-input-style{
    font-family: inherit;
    border:none;
    flex:4;
    box-sizing: border-box;
    padding: 10px 10px 10px 10px;
    font-size:16px;
    resize: none;
    margin:0px;
    background-color: var(--bg);
}

.comment-user-name{ 
    padding-left: 5px;
    align-self: center; 
    font-size: 13px; 
}
  
.comment-input-style:focus{
    outline:none;
}

.comment-content{
    border-left: solid 2px black;
}

.post{
    border: solid 1px #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 30px;
    transition: height 2s;
    overflow: hidden;
    background-color: white;
}

@media screen and (max-width:700px){
    .two-images{
        height:60vh;
    }
    .three-images-left{height:50vh;}
    .three-images-right{height:24.9vh;}
    .multiple-image-container{width:50%; padding-top: 50%;}
    .post{
        border-radius: 0px;
        border-width: 0px 0px 0px 0px;
    }
    .big-post{
        position:absolute;
        left:0;right:0;bottom:0;
        padding:0px;
        border:none;
    }
    .big-post-inner{
        display: flex;
        flex-direction: column;
    }
    .big-post-add{
        border-left: unset;
        position: absolute;
        flex-grow: inherit;
        left:0;right:0;
        overflow:hidden;
        z-index: 1000;
        transition: top 0.3s ease-in-out;
    }
    .big-post-close{
        transform:unset;
        margin:5px;
        background-color: rgba(255, 255, 255, 0.4);
    }
}