
.back {
    background-color: rgb(27, 28, 33);
    color: rgb(230, 210, 180);
    width: auto; /* 宽度自适应内容 */
    height: auto; /* 高度自适应内容 */
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左对齐 */
    min-height: 100px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 100%; /* 防止超出父容器 */
    position: relative;

    transition: all 0.3s ease; /* 平滑过渡效果 */
    border-radius: 20px; /* 默认圆角 */
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3); /* 默认柔光效果 */
    transition: border-radius 0.3s ease, box-shadow 0.3s ease; /* 圆角和柔光效果过渡 */
}
/* 为边框添加样式 */
#card {
    background-color: rgb(178,178,178); /* 默认背景颜色 */
    padding: 40px; /* 默认内边距 */
    margin:0;
    transition: background-color 0.3s ease, padding 0.3s ease; /* 背景颜色和内边距过渡效果 */
   position: relative;
   overflow: auto;
}



/* 顶部区域：头像、昵称、日期 */
.card-header {
    display: flex;
    flex-direction: column; /* 使头像、昵称、日期垂直排列 */
    align-items: flex-start;
    margin-bottom: 0.8em;
    width: 100%;
}
.avatar {
    width:  3em;
    height:  3em;
    border-radius: 50%;
    background-image: url('{{ url_for('static', filename='avatar.png') }}');
    background-size: cover;
 margin-bottom: 0.5em;

}
.avatar img {
    width:  3em; /* 修改头像宽度 */
    height:  3em; /* 修改头像高度 */
    border-radius: 50%;
    cursor: pointer;
}

.nickname {
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.3em;

}


.date-container {
    font-size: 0.8rem;
    text-align: left;
    display: block;
    margin-bottom: 0.5em;
     width: 100%; /* 确保占满容器宽度 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 卡片内容 */
.content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1em;
    width: 100%;
    display: block;
    visibility: visible;

}

.card-content {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
     margin-bottom: 1em;
    width: 100%;
    flex-grow: 1; /* 使内容区域占据剩余空间，推动底部元素到卡片底部 */
    overflow-wrap: break-word;

}
.source{
    font-size: 0.8em;
    margin-bottom: 0.6em;
}
.author {
    font-size: 0.7em;
     margin-bottom: 0.1px;
}
.separator {
    border-bottom: 1px solid; /* 添加底部边框来模拟线条 */
    color: inherit; /* 继承字体颜色 */
    width: 100%;

    margin-top: 0em;
    margin-bottom:1em;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 使子元素垂直居中 */
    width: 100%;
}

.notecard {
    font-size: 0.7em;
    font-weight: bold;
    white-space: nowrap;

}

.qr-code {
    width: 4em;
    height: 4em;
    background-image: url('{{ url_for('static', filename='qr_code.png') }}');
    background-size: cover;
    background-position: center;
    bottom: 2em;
    right: 2em; /* 固定右边距 */
}

.qr-code img {
    max-width: 4em;
    max-height:4em;
    object-fit: contain; /* 确保图片内容适应容器 */

}
/* 设置移动端的最大宽度，比如小于 768px 的设备 */
@media (max-width: 768px) {
    #card {
        position: relative;
        top:0;
        margin:0;

        }


}
