@font-face { font-family: pixel-font; src: url(assets/pixel-font.ttf); } body { color-scheme: dark; background-color: black; color: white; font-family: pixel-font; user-select: none; } .thx-for-playing { z-index: -1; font-size: 50px; top: 45%; left: 50%; position: absolute; transform: translate(-50%, -50%); } #title { font-size: 30px; text-decoration: underline; margin: 0; position: absolute; } #dlg-text { text-align: left; font-size: 40px; white-space: break-spaces; } #bubble { border-width: 5px; border-style: solid; border-color: white; background-color: black; padding: 20px; padding-left: 50px; margin: 0; position: absolute; top: 50%; left: 50%; width: 70%; height: 50%; transform: translate(-50%, -50%); } #triangle { fill: #fff; position: absolute; right: 17%; bottom: 27%; animation: float 1.5s ease-in-out infinite; } #answer-box { border-style: solid; border-width: 5px; border-color: white; background-color: black; width: 15%; padding-inline: 20px; position: absolute; right: 12%; bottom: 68%; } .answer { text-decoration: underline; font-size: 30px; } @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0px); } }