.article-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#article-top {
    background-color: var(--comments-section-background);
    border: 1px solid var(--comments-section-border);
    box-shadow: 4px 4px 6px var(--comments-section-shadow);
    border-radius: 8px;
    margin-bottom: 16px;
    width: 60%;
    padding: 16px;
}

.article-page-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: -4px;
}

.article-page-author {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: var(--article-page-author-color);
    margin-top: 4px;
}

.article-btn-container {
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: var(--comments-section-background);
    border: 1px solid var(--comments-section-border);
    box-shadow: 4px 4px 6px var(--comments-section-shadow);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 8px 16px;
}

.article-delete-btn {
    position: relative;
    top: auto;
    right: auto;
}

/* Override the hover effect for the delete button */
.article-delete-btn:hover .material-symbols-rounded {
    color: var(--article-page-delete-btn-color);
}

.article-body {
    display: flex;
    background-color: var(--comments-section-background);
    border: 1px solid var(--comments-section-border);
    box-shadow: 4px 4px 6px var(--comments-section-shadow);
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    padding: 24px;
    width: 90%;
}

.carousel-image {
    height: 400px;
    object-fit: contain;
}