/* Google Fonts */ @import url(https://fonts.googleapis.com/css?family=Anonymous+Pro); /* Cursor */ .cursor{ position: relative; width: 24em; margin: 0 auto; border-right: 2px solid rgba(255,255,255,.75); font-size: 30px; text-align: left; white-space: nowrap; overflow: hidden; transform: translateY(-50%); } /* Animation */ .typewriter-animation { animation: typewriter 5s steps(50) 1s 1 normal both, blinkingCursor 500ms steps(50) infinite normal; } .typewriter-animation1 { animation: typewriter 5s steps(50) 5s 1 normal both, blinkingCursor 500ms steps(50) infinite normal; } .typewriter-animation2 { animation: typewriter 5s steps(100) 10s 1 normal both, blinkingCursor 500ms steps(100) infinite normal; } .typewriter-animation3 { animation: typewriter 5s steps(100) 15s 1 normal both, blinkingCursor 500ms steps(100) infinite normal; } .typewriter-animation4 { animation: typewriter 5s steps(100) 20s 1 normal both, blinkingCursor 500ms steps(100) infinite normal; } @keyframes typewriter { from { width: 0; } to { width: 100%; } } @keyframes blinkingCursor{ from { border-right-color: rgba(255,255,255,.75); } to { border-right-color: transparent; } } /* Global */ .note { margin-top: 0em; padding: 0em; color: #ffffff; font-family: 'Anonymous Pro', monospace; text-shadow: 0px 0px 10px #000000;}