@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DotGothic16&display=swap'); .background { background: #000; background-image: url('data:image/svg+xml;utf8,'); font-family: 'Press Start 2P', cursive; } .message { border-radius: 0; line-height: 1.5rem; border: 2px solid #fff; background: #000; color: #fff; font-family: 'Press Start 2P', cursive; font-size: 10px; padding: 12px; margin: 8px 0; box-shadow: inset -2px -2px 0 #7b7b7b, inset 2px 2px 0 #fff, inset -4px -4px 0 #000, inset 4px 4px 0 #000; image-rendering: pixelated; } .message.is-user { background-color: #000; color: #ffcc00; border-color: #ffcc00; } .message.is-self { background-color: #000; color: #00ffff; border-color: #00ffff; } .message.is-bot { background-color: #000; color: #ff00ff; border-color: #ff00ff; } .message-avatar { border-radius: 0; border: 2px solid #fff; background: #000; width: 32px; height: 32px; image-rendering: pixelated; } .bot-name { color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px; text-shadow: 2px 2px 0 #000; } .bot-description { color: #7b7b7b; font-family: 'DotGothic16', sans-serif; font-size: 11px; } .message-meta { color: #7b7b7b; font-family: 'DotGothic16', sans-serif; font-size: 9px; } .action-label { color: #fff; font-family: 'DotGothic16', sans-serif; font-size: 12px; } .message-input { border-radius: 0; background-color: #000; border: 2px solid #fff; color: #fff; font-family: 'DotGothic16', sans-serif; font-size: 12px; padding: 8px; box-shadow: inset -2px -2px 0 #7b7b7b, inset 2px 2px 0 #fff; } .message-input:focus { outline: none; border-color: #ffcc00; box-shadow: inset -2px -2px 0 #7b7b7b, inset 2px 2px 0 #ffcc00, 0 0 0 2px #ffcc00; } .message-button { display: flex; justify-content: center; align-items: center; border-radius: 0; color: #000; background-color: #fff; font-family: 'Press Start 2P', cursive; font-size: 10px; border: 2px solid #fff; padding: 8px 16px; box-shadow: inset -2px -2px 0 #7b7b7b, inset 2px 2px 0 #fff, inset -4px -4px 0 #000, inset 4px 4px 0 #000; } .message-button:hover { background-color: #ffcc00; color: #000; border-color: #ffcc00; } .message-button:disabled { pointer-events: none; opacity: 0.5; background-color: #7b7b7b; color: #3b3b3b; border-color: #7b7b7b; } .canvas-background { background-color: #000; border-bottom: 2px solid #fff; box-shadow: 0 2px 0 #7b7b7b; } .canvas-text { color: #fff; font-family: 'Press Start 2P', cursive; font-size: 10px; }

Sans Undertale