* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card_layout {
    background: #5CC00C;
    width: 400px; /* 初始宽度 */
    height: auto; /* 高度自动调整 */
    position: relative;
    overflow: hidden;/* 确保超出部分不会溢出 */
    border-radius: 20px;
    display: inline-flex; /* 使用 inline-flex 以便 textarea 可以正确调整高度 */
    flex-direction: column; /* 使内容垂直排列 */
    vertical-align: top; /* 垂直对齐 */
    transition: width 0.3s, background-color 0.3s; /* 添加过渡效果 */
    box-sizing: border-box; /* 包括 padding 和 border 在内计算宽度和高度 */
    padding: 10px; /* 给 card_layout 加一些内边距以避免内容紧贴边缘 */
}

@font-face {
    font-family: 'STXINGKA';
    src: url('https://6261-baby-poetry-7gj0k3f7b52d8010-1314042038.tcb.qcloud.la/WeDoXCompany/font/STXINGKA.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DottedSongtiSquareRegular';
    src: url('https://6261-baby-poetry-7gj0k3f7b52d8010-1314042038.tcb.qcloud.la/WeDoXCompany/font/DottedSongtiSquareRegular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DottedSongtiDiamondRegular';
    src: url('https://6261-baby-poetry-7gj0k3f7b52d8010-1314042038.tcb.qcloud.la/WeDoXCompany/font/DottedSongtiDiamondRegular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DottedSongtiCircleRegular';
    src: url('https://6261-baby-poetry-7gj0k3f7b52d8010-1314042038.tcb.qcloud.la/WeDoXCompany/font/DottedSongtiCircleRegular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.card_layout_textarea {
    padding: 10px;
    font-size: 30px;
    color: #FFFFFF;
    width: calc(100% - 20px); /* 减去左右 padding 的宽度 */
    height: auto; /* 高度自动调整 */
    resize: vertical; /* 允许垂直调整大小，但不允许水平调整 */
    border: none; /* 去掉边框 */
    outline: none; /* 去掉聚焦时的边框 */
    box-sizing: border-box; /* 包括 padding 在内计算宽度和高度 */
    background-color: transparent;
    font-family: 'STXINGKA', serif; /* 备用字体为 serif */
}

.btn_list {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
}

.btn_bg_blue {
    background-color: #3B88FF1A;
    padding: 20px;
    color: #3B88FFFF;
    border-radius: 4px;
    margin-right: 20px;
}

.btn_bg_green {
    margin-left: 20px;
    background-color: #5CC00C1A;
    padding: 20px;
    color: #5CC00CFF;
    border-radius: 4px;
}

.btn_bg_red {
    margin-left: 20px;
    background-color: #EF53501A;
    padding: 20px;
    color: #EF5350FF;
    border-radius: 4px;
}

.btn_bg_orange {
    margin-left: 20px;
    background-color: #e6a23c1A;
    padding: 20px;
    color: #e6a23cFF;
    border-radius: 4px;
}

.btn_bg_blue_2 {
    background-color: #2E74B61A;
    padding: 20px;
    color: #2E74B6FF;
    border-radius: 4px;
    margin-right: 20px;
}

.btn_bg_green_2 {
    margin-left: 20px;
    background-color: #5482351A;
    padding: 20px;
    color: #548235FF;
    border-radius: 4px;
}

.btn_bg_yellow_2 {
    margin-left: 20px;
    background-color: #FFE9A51A;
    padding: 20px;
    color: #FFE9A5FF;
    border-radius: 4px;
}

.btn_create_text_card {
    position: absolute;
    bottom: 20px;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #5CC00CFF;
    color: #FFFFFFFF;
    border-radius: 48px;
}