:root { --color-background: #fff; --color-primary-20: #e8e8e8; --color-primary-50: #dcdcdc; --color-primary-100: #acacac; --color-primary-500: #505050; --color-primary-600: #3c3c3c; --color-accent-500: #007bff; --color-accent-600: #0056b3; --color-code: #e01e5a; --color-blockquote-border: #242424; --color-code-border: #1d1c1d21; --color-code-background: #1d1c1d0a; }

@media (prefers-color-scheme: dark) { :root { --color-background: #222; --color-primary-20: #4c4c4c; --color-primary-50: #454545; --color-primary-100: #757575; --color-primary-500: #ccc; --color-primary-600: #e6e6e6; --color-accent-500: #1e8ad6; --color-accent-600: #3ba0e6; --color-code: #e8912d; --color-blockquote-border: #dbdbdb; --color-code-border: #e8e8e821; --color-code-background: #e8e8e80a; } }
body { background-color: #fff; background-color: var(--color-background); color: #505050; color: var(--color-primary-500); font-family: 'Source Serif Pro', sans-serif; }
body a { color: #007bff; color: var(--color-accent-500); }
body a:hover { color: #0056b3; color: var(--color-accent-600); }
body .header .separator { margin-left: 5px; margin-right: 5px; color: #acacac; color: var(--color-primary-100); }

.table { color: #505050; color: var(--color-primary-500); }

body { margin-top: 10px; margin-bottom: 30px; font-size: 1.0em; font-family: sans-serif; }

.toca .heading { margin-bottom: 60px; }

.toca .justify { text-align: justify; }

.toca .jumbotron { text-align: center; }

.toca .jumbotron .title { font-weight: bold; font-size: 3.6em; }

.toca .status { margin-top: 40px; font-size: 1.6em; }

.toca .status .label { opacity: 0.1; margin-bottom: 20px; }

.toca .status .glyphicon { top: 2px; }

.toca .small { font-size: small; }

.toca .toca-img-container { width: 100%; text-align: center; margin-bottom: 14px; }

@-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(359deg); } }
@-moz-keyframes rotation { from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(359deg); } }
@-o-keyframes rotation { from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(359deg); } }
@keyframes rotation { from { transform: rotate(0deg); }
  to { transform: rotate(359deg); } }
footer { border-top: 1px solid #dcdcdc; border-top: 1px solid var(--color-primary-50); color: #3c3c3c; color: var(--color-primary-600); margin-top: 20px; padding-top: 5px; }

footer .footer-content { text-align: right; font-size: 0.7em; }

footer .footer-content p { margin-bottom: 3px; font-family: 'Verdana', sans-serif; }