body {
    margin: 0;
    overflow: hidden;
}

#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出力の上に配置 */
}

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

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