#banner {
    background: rgb(25, 25, 25);
}

ion-content {
    --background: #f8f8f8;
    scrollbar-width: none;

    ion-card {
        width: 100%;
        margin: 0;
        border-radius: 20px;
        --background: none;
        color: white;

        p {
            margin: 0;
        }

        ion-segment {
            width: 40%;
        }

        ion-segment-button {
            font-size: medium;
            --color: gray;
            --color-checked: black;
            --indicator-color: orange;
            --indicator-height: 5px;
        }

    }

    ion-segment-view {
        color: #000000;
        height: auto;
    }
}

#header {
    color: rgb(255, 255, 255);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 10px 2px;

    ion-text {
        font-size: 20px;
        margin: 5px;
    }

    ion-button {
        font-size: 15px;
        --padding-start: 15px;
        --padding-end: 15px;
        margin: 5px;
        --background: rgba(255, 255, 255, 0.075);
        --color: white;
        --box-shadow: 0 0 1px white;
    }

    ion-icon[name='card-outline'] {
        margin: 5px 10px;
    }
}

.tags {
    --background: none;
    box-shadow: none;
    display: inline;
    border: #414040 1px solid;
    padding: 0 5px;
    margin: 0 2px;
    color: gray !important;
}

#avatarAndName {
    display: flex;
    align-items: center;
    justify-content: start;
}

#personInfo {
    padding: 15px;
}

#avatar {
    width: 20%;
    border-radius: 50%;
    margin-right: 20px;
}

#nameAndTags h1 {
    margin: 5px;
    color: white;
}

#personInfo p {
    color: gray;
}

#count {
    display: flex;
    align-items: center;
    justify-content: start;
    color: white;
    box-shadow: none;
}

#count h3 {
    margin: auto 0;
}

#count p {
    margin-right: 20px;
}

#badge {
    --background: none;
    --box-shadow: none;
    --padding-start: 2px;
    color: white;
    font-size: medium;
}

.card {
    width: 21%;
    height: 20vw;
    background-color: #414040;
    float: left;
    margin: 15px 2%;
    border-radius: 10px;
    padding: 10px;
    top: -20px;
}

#myPost {
    width: 100%;
    background: rgb(247, 247, 247);
    color: black;
    height: fit-content;
    column-count: 2;
    column-gap: 20px; // 设置列之间的间距
    scrollbar-width: none;

    ion-card {
        // width: 46%;
        // margin: 2%;
        // float: left;
        box-shadow: none;
        --background: white;
        display: inline-block;
        width: 100%;
        margin-bottom: 20px; // 添加底部外边距以避免帖子紧贴在一起
        break-inside: avoid; // 确保帖子不会被分割到两列中

        ion-title {
            margin: 0;
            padding: 10px 2px;
            color: black;
            font-size: 15px;
        }

        #author {
            display: flex;
            align-items: center;
            margin: 10px 2px;

            ion-avatar {
                width: 25px;
                height: 25px;
                border-radius: 1000px;
            }

            ion-label {
                color: gray;
            }
        }
    }

    p {
        display: block;
        margin: 0;
        width: 100%;
        color: gray;
        font-size: 15px;
        text-align: center;
        break-inside: avoid; // 确保p标签不会被分割到两列中
        column-span: all; // 让p标签跨越所有列
    }
}