#new-post {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background-color: var(--content-color);
    height: 4rem;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    padding: 10px;
    right: 2rem;
    bottom: 2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
    z-index: 10;
}

#new-post-icon {
    color: white;
    font-size: 2rem;
}

#new-post:hover { scale: 1.1; }
#new-post:active { scale: .95; }

#new-post-prompt {
    position: absolute;
    background-color: white;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 500px;
    padding: 1rem 2rem;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
    z-index: 20;
}

#new-post-prompt h1 {
    width: 100%;
}

#new-post-prompt button {
    background-color: var(--content-color);
    width: fit-content;
    border-radius: 5px;
    padding: .5rem 2rem;
    margin-left: auto;
}

#new-post-prompt button i {
    font-size: 1.5rem;
    color: white;
}

#post-content, #post-title {
    width: 100%;
    background-color: var(--content-color);
    border-radius: 10px;
    padding: 1rem;
    color: white;
    font-size: 1.5rem;
    caret-color: white;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#post-content { resize: none; }

#post-title:focus, #post-content:focus { outline: none; }

/* ––––––––––––––––– Post Area ––––––––––––––––– */

#no-posts {
    text-align: center;
}

#post-area {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 0;
    flex-grow: 1;
}

.post-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 2px var(--content-color);
    border-radius: 10px;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    z-index: 0;
}

.post-box h2, .content, .stats { width: 100%; }

.content {
    padding: .5rem 0;
    font-size: 1.1rem;
}

.stats {
    display: flex;
    flex-direction: row;
}

.info, .likes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 50%;
}

.likes { justify-content: start; }
.info { justify-content: end; }

.like-count {
    margin-right: 1rem;
}

.btn-like {
    flex-grow: 0;
}

.liked {
    color: rgb(0, 157, 255);
    text-shadow: 
        1px 1px rgb(0, 157, 255),
        1px -1px rgb(0, 157, 255),
        1px 0 rgb(0, 157, 255),
        
        -1px 1px rgb(0, 157, 255),
        -1px -1px rgb(0, 157, 255),
        -1px 0 rgb(0, 157, 255),
        
        0 1px rgb(0, 157, 255),
        0 -1px rgb(0, 157, 255),
        0 0 rgb(0, 157, 255)
    ;
}