:root { --bg-dark: #0b0b0b; --bg: #fafafa; --term: #111; --text: #e0e0e0; --accent: #00ffc3; --dot-dark: rgba(255, 255, 255, 0.2); --dot: rgba(0, 0, 0, 0.4); --focus-outline: 2px dashed #00ffc3; } @font-face { font-family: 'Fira Code'; src: url('FiraCode-Regular.woff2') format('woff2'), url('FiraCode-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fira Code'; src: url('FiraCode-Medium.woff2') format('woff2'), url('FiraCode-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: 'Fira Code', monospace; } body { min-height: 100vh; background: var(--bg); color: var(--text); overflow: hidden; display: flex; align-items: center; justify-content: center; } .bg-grid { position: fixed; inset: 0; z-index: 0; background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 20px 20px; background-position: 0 0; animation: drift 60s linear infinite; } @keyframes drift { from { background-position: 0 0; } to { background-position: -500px -500px; } } main.page-content { position: relative; z-index: 2; width: 600px; max-width: 95vw; height: 400px; padding: 1.5rem; display: flex; flex-direction: column; background: var(--term); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .65); overflow-y: auto; } h1 { font-size: 2rem; margin-bottom: 1rem; color: var(--accent); white-space: pre; line-height: 1.4; } .terminal-container { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 0.5rem; } .terminal-output { flex: 1 1 auto; overflow: hidden; font-size: 0.95rem; line-height: 1.4rem; margin-bottom: 0.5rem; white-space: pre-wrap; display: flex; flex-direction: column; justify-content: flex-end; } a { color: var(--accent); text-decoration: none; } a:focus-visible { outline: var(--focus-outline); outline-offset: 2px; } .terminal-input { display: flex; width: 100%; align-items: center; } .terminal-input span { color: var(--accent); margin-right: 0.5rem; } .terminal-input input { background: transparent; border: none; outline: none; flex: 1; font-family: inherit; font-size: 1rem; color: inherit; } .cursor { display: inline; color: var(--accent); animation: blink .5s step-end infinite; font-weight: bold; } footer { position: fixed; bottom: 10px; left: 0; width: 100%; text-align: center; font-size: 0.8rem; color: #555; z-index: 2; pointer-events: none; } .animated { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }