* { margin: 0; padding: 0; box-sizing: border-box; } :root { --gb-bg: #282828; --gb-red: #cc241d; --gb-green: #98971a; --gb-yellow: #d79921; --gb-blue: #548588; --gb-purple: #b16286; --gb-aqua: #689d6a; --gb-gray: #a89984; --gb-gray-dark: #928374; --gb-red-light: #fb4934; --gb-green-light: #b8bb26; --gb-yellow-light: #fabd2f; --gb-blue-light: #83a598; --gb-purple-light: #d3869b; --gb-aqua-light: #8ec07c; --gb-fg: #ebdbb2; } body { background-color: var(--gb-bg); font-family: monospace; font-size: 1.2rem; color: var(--gb-fg); width: 100vw; height: 100vh; padding: 5px; } #terminal-p-input::after { content: ""; width: 10px; height: 23px; background-color: var(--gb-fg); display: inline-block; animation: blink 0.5s cubic-bezier(.68,-0.55,.27,1.55) infinite; position: absolute; } #terminal-input { position: absolute; left: -10000px; background: none; border: 1px solid white; color: var(--gb-fg); outline: none; } @keyframes blink { 50% { opacity: 0; } } .line-start { display: inline; } .color-green-light { color: var(--gb-green-light); } .color-fg { color: var(--gb-fg); } .color-blue { color: var(--gb-blue); } .color-yellow { color: var(--gb-yellow); } .color-aqua { color: var(--gb-aqua); } .color-aqua-light { color: var(--gb-aqua-light); } .color-red-light { color: var(--gb-red-light); } .p-space { white-space: pre; } .div-color-table { display: flex; flex-direction: row-reverse; flex-wrap: wrap; width: 640px; } .div-color-box { width: 80px; height: 50px; display: flex; align-items: center; justify-content: center; } .p-color-text { font-size: 1rem; } .glow { text-shadow: 0px 0px 5px; animation: flicker 0.12s cubic-bezier(.68,-0.55,.27,1.55) infinite; } @keyframes flicker { 0% { opacity: 0.552; } 5% { opacity: 0.58287; } 10% { opacity: 0.59134; } 15.0% { opacity: 0.79543; } 20% { opacity: 0.75134; } 25% { opacity: 0.5956; } 30.0% { opacity: 0.90687; } 35% { opacity: 0.522; } 40% { opacity: 0.62254; } 45% { opacity: 0.56977; } 50% { opacity: 0.9925; } 55.0% { opacity: 0.55487; } 60.0% { opacity: 0.56607; } 65% { opacity: 0.52353; } 70% { opacity: 0.5214; } 75% { opacity: 0.67908; } 80% { opacity: 0.97163; } 85.0% { opacity: 0.6275; } 90% { opacity: 0.57186; } 95% { opacity: 0.54475; } 100% { opacity: 0.57221; } }