:root{font-family:DotGothic16,sans-serif;color:var(--color-font)}:root{background-color:#ecdfc3;--color-backGround:#ecdfc3;--color-Button:#ceb88a;--color-Button-right:#bba678;--color-border:#b9a67c;--color-font:#534423}html,body{height:100%;width:100%;margin:0}#root{height:99%;width:100%}.stage{height:97%;width:99%;display:grid;grid-template-rows:1fr 150px;padding:10px;box-sizing:border-box}.viewMessage{min-height:200px;box-sizing:border-box}.frames{background-color:#bba678;border-radius:10px;padding:10px;width:97%;box-sizing:border-box}.frames div{padding-top:5px;box-sizing:border-box}.textBox{width:80%;height:30px}.button{background-color:var(--color-backGround);border-radius:5px;margin-right:5px;padding:5px 10px;display:inline-block;cursor:pointer}@media screen and (max-width: 768px){html,body{font-size:20px}.textBox{width:80%;height:30px;font-size:20px}}.floating-message{position:absolute;left:50%;transform:translate(-50%);background:#fffc;padding:12px 20px;border-radius:12px;font-size:1.2rem;animation:floatY 4s ease-in-out infinite}@keyframes floatY{0%{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-10px)}to{transform:translate(-50%) translateY(0)}}#cap{position:absolute;left:10px;border-radius:10px;width:400px;font-size:14px}#cap.hidden{overflow:hidden;padding:5px;width:30px;height:30px;transition:width 1s ease,height 1s ease}#cap.show{padding:5px;overflow:hidden;width:250px;height:180px;transition:width 1s ease,height 1s ease}.capMsg{padding:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:30px}@media screen and (max-width: 768px){#cap{padding:5px;width:700px;font-size:20px}#cap.show{width:350px}}