:root { --dark0:#282828; --dark1: #404040; --dark2: #696969; --light0: #FFFFFF; --light1: #EEEEEE; --light2: #DDDDDD; /*from gruvbox*/ --acc: #fabd2f; --bg0: var(--light0); --bg1: var(--light1); --bg2: var(--light2); --fg0: var(--dark0); --fg1: var(--dark1); --fg2: var(--dark2); } @media (prefers-color-scheme: dark) { :root { --bg0: var(--dark0); --bg1: var(--dark1); --bg2: var(--dark2); --fg0: var(--light0); --fg1: var(--light1); --fg2: var(--light2); } } body { margin-inline: auto; font-family: IosevkaTerm-Regular, monospace; /* fallback if document fonts are blocked */ background-color: var(--bg0); color: var(--fg0); word-break: break-word; width:auto; max-width: 512px; } img.lynx { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; -webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } img.lynx:active { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } img.blinkie { width: 150px; height: 20px; position:relative; } .mono-icon { width: 64px; height: 64px; } @media (prefers-color-scheme: light) { .mono-icon { filter: invert(1); } } .icon { width: 64px; height: 64px; } h1.main { font-family: ConnectionRegular, sans-serif; font-weight: bold; font-style: italic; font-size: 400%; color: var(--dark0); background: linear-gradient(to bottom right, white 0%, slategray 100%); margin-bottom: -8px; } h1, h2, h3, h4, h5, h6 { font-family: IosevkaTerm-Extended, monospace; font-weight: bold; } a { color: var(--acc); background:rgba(200,200,200,0.25); transition:100ms ease; padding-block: 2px; text-decoration:underline; } a:hover { color: var(--bg1); background-color: var(--fg1); } a:visited { opacity: 0.5; } a.nickname { font-family: ConnectionRegular, monospace; } .highlight-header { font-family: ConnectionRegular, sans-serif; background-color: var(--dark2); color: var(--acc); padding: 2px; } .highlight { background-color: var(--acc); color: var(--dark0); font-weight: bold; font-style: italic; padding: 2px; } div.padding-block { padding-block: 16px; } .footer { justify-content:center; } nav { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; } nav a { font-family: Evolventa, sans-serif; font-weight: bold; font-style: italic; display:inline-block; padding: 12px; margin-inline: 12px; position:relative; text-decoration: none; background: none; transition:background-color 100ms ease; } horizontal-rule { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; background-color:var(--bg2); color: var(--fg0); margin-block: 8px; } .row>td { padding:4px; text-align:left; vertical-align:top; transition:background-color 100ms ease; min-width: 64px; } .row:hover>td { background:rgba(200,200,200,0.1); } div.header { display:flex; margin-block: 8px; } div.header>img { margin-right:16px } td>img { height:16px; } .service { margin:1rem; } .service>* { margin:0.25rem 0; } .service>h3>img { height:16px; margin-right:0.5rem; }