html {
    overflow-x: hidden;
}

body {
    background: white;
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    line-height: 20px;
    overflow-x: hidden;
}

div {
    text-align: center;
}

a {
    display: inline-block;
    text-decoration: none;
}

.block {
    background-color: #C4E1F6;
    color: #000000;
    font-size: 14px;
    width: 90px;
    display: block;
    padding: 10px;
    text-align: center;
    border: 1px solid black;
    border-radius: 5px;
}

/* 設定表格 */
table {
    margin-top: 20px;
    border: 1px solid black;
}

/* 表格標題 */
th {
    background-color:#608BC1;
    font-size: 20px;
    height:50px;
    border: 1px solid black;
}

/* 表格內容 */
td {
    background-color: #FFECC8;
    font-size: 18px;
    text-align: center;
    padding: 5px;
    height:50px;
    border: 1px solid black;
}

.wide-td {
    width: 50vw;
}

.small-td {
    width: 25vw;
}

/* 音檔名稱的 div */
.audio-name {
    white-space: pre-line;  /* 允許換行符號 */
    word-wrap: break-word;  /* 讓長字串換行 */
    font-size: 16px;        /* 正常字體大小 */
}

/* 換行第二行的小字 */
.audio-name span.small-text {
    font-size: 12px; /* 小字大小 */
    color: black;       /* 小字顏色 */
}

/* 播放按鈕樣式 */
.play-button {
    background-color: white;
    border: 1px solid black;
    padding: 0;  /* 去除內邊距 */
    border-radius: 50%;
    width: 30px;  /* 按鈕大小 */
    height: 30px; /* 按鈕大小 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;  /* 使用相對定位來定位內部元素 */
    margin: 0 auto; /* 居中按鈕 */
}

/* 播放鍵（三角形） */
.play-icon {
    border-top: 10px solid transparent; /* 調整三角形的大小 */
    border-bottom: 10px solid transparent;
    border-left: 15px solid black;  /* 三角形指向右，將這裡的數值縮小 */
    margin-left: 3px;
    position: absolute;  /* 絕對定位，確保它不會影響其他元素 */
}

/* 播放中顯示正方形 */
.play-button.playing .play-icon {
    display: none;  /* 播放時隱藏三角形 */
}

.play-button.playing::before {
    content: '';
    display: block;
    width: 15px;  /* 正方形的寬度 */
    height: 15px;  /* 正方形的高度 */
    background-color: black;
    position: absolute;  /* 絕對定位，確保它居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 確保正方形完全居中 */
}

/* 播放按鈕樣式 */
.download-button {
    background-color: white;
    border: 1px solid black;
    padding-top: 15px;
    border-radius: 50%;
    width: 30px;  /* 按鈕大小 */
    height: 30px; /* 按鈕大小 */
    display: flex;
    justify-content: center;
    cursor: pointer;
    position: relative;  /* 使用相對定位來定位內部元素 */
    margin: 0 auto; /* 居中按鈕 */
}

/* 下載箭頭樣式 */
.download-icon {
    width: 0;
    height: 0;
    margin: 0;
    color: black;
    border: 8px solid transparent;
    border-top: 8px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    box-shadow: 0 -12px 0 -4px;
}

p {
    margin-top: 20px;
    padding: 10px;
    font-size: 14px;
    margin: 0;
}