body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    font-size: 32px;
    font-family: Arial, sans-serif;
    text-align: center;
    position: relative;
}

#container, #display-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#sub-message1, #sub-message2, #final-message1, #final-message2, #display-screen {
    opacity: 0;
    transition: opacity 2s ease;
}

#belief-button{
    opacity: 0;
    transition: opacity 2s ease;
    font-size: 2em; /* 增大字体大小 */
    padding: 20px 40px; /* 增大内边距来增加按钮的大小 */
    width: auto; /* 按钮宽度由内容和内边距决定 */
    /* Optional: 如果你想要一个固定大小的按钮，可以设置 width 和 height */
    /* width: 200px; */
    /* height: 50px; */
}

.bigger-button {
    font-size: 3em; /* 更大的字体大小 */
    padding: 30px 60px; /* 更大的内边距 */
    /* 为了确保按钮在移动到底部时仍然居中，可能需要调整 bottom 和 transform 属性 */
    bottom: 10vh; /* 比如将按钮放置在底部的10vh的位置 */
    transform: translateX(-50%) translateY(-50%); /* 同时垂直和水平居中 */
}

.hidden {
    display: none;
    opacity: 0;
    transition: opacity 2s ease;
}

/* 根据文本长度调整大小 */
.small { font-size: calc(100vh / 6); }
.medium { font-size: calc(100vh / 3); }
.large { font-size: calc(100vh / 5 * 4); }

#random-result {
    max-width: 100%; /* 最大宽度为显示屏宽度 */
    height: auto; /* 高度自适应 */
    margin: 0; /* 重置外边距 */
    overflow: hidden; /* 隐藏溢出文本 */
    white-space: nowrap; /* 不换行 */
    text-align: center; /* 文本居中 */
    font-size: 5vw; /* 使用视口宽度的百分比作为基础字体大小 */
}

#random-result.small {
    /* 调整较小字体大小为显示屏宽度的一定比例 */
    font-size: 2vw; /* 示例: 2字词的字体大小为5%的视口宽度 */
}

#random-result.medium {
    /* 调整中等字体大小为显示屏宽度的一定比例 */
    font-size: 4vw; /* 示例: 3字词的字体大小为10%的视口宽度 */
}

#random-result.large {
    /* 调整较大字体大小为显示屏宽度的一定比例 */
    font-size: 6vw; /* 示例: 4字词的字体大小为15%的视口宽度 */
}


#display-screen {
    max-width: 90vw;
    max-height: 80vh;
    width: 90vw; /* 视口宽度的90% */
    height: 80vh; /* 视口高度的90%，根据实际需求调整 */
    /* 其他样式 */
    border: 2px solid grey;
    color: red;
    padding: 20px;
    margin: 0 auto; /* 水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden; /* 初始时不可见 */
    opacity: 0; /* 透明度为0 */
    transition: opacity 2s ease; /* 过渡效果 */
    overflow: hidden; /* 如果内容超出则隐藏 */
    box-sizing: border-box; /* 包含padding和border在内的总宽度 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
JavaScript (script.js)