.user-profile-info p {
    font-size: 1rem;
    margin: 5px 0;
}

.block-header h2 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-top: 0;
}

.sub-section-header {
    margin-top: 0;
    margin-bottom: 0;
    background: #eee;
    color: var(--text-sub-section);
    padding: 0.3rem;
    margin-top: -0.3rem;
    margin-left: -0.3rem;
    border-radius: 5px;
    margin-right: -0.3rem;
    margin-bottom: 0.5rem;
}

.user-list {
    list-style-type: none;
    padding: 0;
}

.user-list ul {
    list-style: none; /* Remove bullets */
    padding-left: 0;
    padding-bottom: 0;
    margin-bottom: var(--content-padding)
}

.user-list li {
    padding-bottom: calc(var(--content-padding) / 2);
}

.current-user {
    position: relative;
}

.current-user::before {
    content: '';
    position: absolute;
    left: -1rem; /* Shift the dot to the left of the text */
    width: 0.6rem;
    height: 0.6rem;
    top: 0.5rem;
    background-color: var(--primary-color);
    border-radius: 50%;
}


.block {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: var(--content-padding);
    padding-bottom: 0;
    max-width: 26rem;
    margin-bottom: 2rem;
}

.edit-link {
    font-size: 0.9rem;
    color: var(--primary-color);
    text-decoration: none;
}

.edit-link:hover {
    text-decoration: underline;
    color: var(--primary-hover-color);
}

.story-status {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: var(--content-padding);
    background-color: var(--background-light);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.story-subtitle {
    margin-top: 0;
}

.story-status-highlighted {
    background-color: var(--highlight-background);
}

.story-item-actions {
    margin-bottom: auto;
}

.story-status div {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--text-color);
}

.story-status .description {
    font-style: italic;
    color: var(--text-muted);
}

.story-page-content {
    padding: var(--content-padding);
    background-color: #eee;
}

.story-page-title {
    margin-top: 0;
}

.story-metadata {
    max-width: 27.5rem;
    margin-bottom: var(--content-padding);
}

.story-page-block {
    margin-bottom: 0;
}

.wide-block {
    max-width: 40rem;
}

.highlight-block {
    background-color: var(--highlight-background);
    padding: var(--content-padding);
    border-radius: 5px;
    margin-bottom: var(--content-padding);
}

.word-meaning-block {
    background-color: var(--highlight-background);
    margin-left: -var(--content-padding);
    margin-right: -var(--content-padding);
    padding: var(--content-padding);    
}

.story-parts-frontpage {
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 0;
}

.story-parts-frontpage h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.story-parts-frontpage h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.word-meaning-title {
    margin-top: 0;
}

.story-part {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.story-parts {
    padding-bottom: var(--content-padding);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sth-large-icon {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    vertical-align: bottom;
    margin-right: 0.1rem;
    margin-bottom: 0.5rem;
}

.sth-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: bottom;
    margin-right: 0.1rem;
}

.sth-icon svg {
    fill: var(--primary-color);
}

.sth-icon:hover svg {
    fill: var(--primary-hover-color);
}

.edit-story-link {
    margin-bottom: 0.5rem;
}

.no-joiner {
    color: var(--text-muted);
}