body {
    margin: 0;
    overflow: hidden;
    background-color: #e1f0ff; /* 薄ピンク色 */
}

#WebGL-output {
    width: 80vw; /* 80%の幅 */
    height: 100vh; /* 高さは全体 */
    position: absolute;
    top: 0;
    left: 0;
}

#overlay {
    width: 20vw; /* 20%の幅 */
    height: 100vh; /* 高さは全体 */
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0); /* 透明 */
    z-index: 1; /* WebGL出力の上に配置 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上から順に配置 */
    align-items: center;
    gap: 20px; /* 各ボタンの間隔 */
}

#smile-button {
    background-color: #FFC0CB; /* 薄ピンク色 */
    color: white; /* テキスト色 */
    border: none; /* 枠線なし */
    width: 120px; /* 幅 */
    height: 120px; /* 高さ */
    border-radius: 50%; /* 丸くする */
    font-size: 24px; /* フォントサイズ */
    cursor: pointer; /* ポインタカーソル */
    display: flex; /* フレックスボックス */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストを中央揃え */
    padding: 0; /* 内側の余白をゼロに */
}

#smile-button:hover {
    background-color: #FFB6C1; /* ホバー時の色（少し濃いピンク） */
}

#sad-button {
    background-color: #8f87d8; /* 青色 */
    color: white; /* テキスト色 */
    border: none; /* 枠線なし */
    width: 120px; /* 幅 */
    height: 120px; /* 高さ */
    border-radius: 50%; /* 丸くする */
    font-size: 24px; /* フォントサイズ */
    cursor: pointer; /* ポインタカーソル */
    display: flex; /* フレックスボックス */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストを中央揃え */
    padding: 0; /* 内側の余白をゼロに */
}

#sad-button:hover {
    background-color: #867fc7; /* ホバー時の色（少し濃い青） */
}

#surprised-button {
    background-color: #ffd000; /* オレンジ色 */
    color: white; /* テキスト色 */
    border: none; /* 枠線なし */
    width: 120px; /* 幅 */
    height: 120px; /* 高さ */
    border-radius: 50%; /* 丸くする */
    font-size: 24px; /* フォントサイズ */
    cursor: pointer; /* ポインタカーソル */
    display: flex; /* フレックスボックス */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストを中央揃え */
    padding: 0; /* 内側の余白をゼロに */
}

#surprised-button:hover {
    background-color: #ecc100f6; /* ホバー時の色（少し濃いオレンジ） */
}