body { max-width: 800px; margin-left: auto; margin-right: auto; background-color: #0A0A30; } h1,h2 { color: #EEEEEE; } p,li { color: #C0C0C0; } a, b { color: white; } a:hover { color: rgb(255, 255, 0); } * { font-family: sans-serif; } code { font-family: monospace; background-color: #f3f3f3; padding: 2px; border-radius: 3px; color: #444; } code.hljs span { font-family: monospace !important; } span.under { display: inline-block; width: 20ch; border-bottom: 2px solid black; } span.goal { padding: 3px; padding-right: 25px; background-color: #CC8811; font-weight: bold; border-radius: 10px; color: white; display: inline-block; font-size: 0.75em; } span.goal::before { content: "[goal]"; font-family: monospace; font-size: 10px; color: black; vertical-align: top; } blockquote { border-left: 3px solid grey; padding-left: 2em; margin-left: 0px; } @keyframes irritating { 0% { border-left: 50px solid orange; border-right: 50px solid salmon; padding: 0px; background-position-x: 0px; } 50% { border-left: 10px solid orange; border-right: 10px solid salmon; padding-left: 40px; padding-right: 40px; background-position-x: 50%; } 100% { border-left: 50px solid orange; border-right: 50px solid salmon; padding: 0px; background-position-x: 100%; } } .annoy { animation-name: irritating; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; color: white; background-color: rgba(0, 0, 0, 0.5); background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(45deg, red, orange, yellow, green, blue, purple, red, orange, yellow, green, blue, purple); background-size: 200%; }