:root,[data-bs-theme=light] {
    --tag-bg-transparency: .2;
    --tag-bg-rgb: 0, 142, 213;
    --tag-text: #008ED5;
    --link-text: #008ED5;
    --link-text-hover:#008ED5;
    --link-underline: var(--link-text-hover);

    --border-rad: 7px;

    --color-blue-old: #00a1f1;
    --color-blue: #008ED5;
    --color-orange: #f65314;
    --color-green: #7cbb00;
    --color-grey:  #f0f0f0;
    --color-grey-separator:  #f0f0f0;

    --pic-border: #ffffff;

    --post-title: #000000;

    --special-link-hover:#000000;

    --search-bg: #ffffff;
    --search-text: #000000;
    --search-link: #008ED5;

    --code-default: #000000;
    --code-bg: #f0f0f0;
    --code-comment: #018000;
    --code-punctuation:#000000;
    --code-constant:#E50202;
    --code-bool-num:#8250df;
    --code-string: #A31515;
    --code-variable: #000000;
    --code-class-function: #000000;
    --code-keyword:#0010FF;
    --code-regex:#A31515;


}

[data-bs-theme=dark] {
    --color-grey: #696969;
    --color-grey-separator: #333333;
    --pic-border: #333333;
    --post-title: #ffffff;
    --link-underline: #008ED5;

    --bs-body-color: #ffffff;

    --special-link-hover: #f0f0f0;

    --search-bg: #212529;
    --search-text: #ffffff;
    --search-link: #008ED5;


    --code-default: #79C0FF;
    --code-bg: #272C30;/*212529;*/
    --code-comment: #8B949E;
    --code-punctuation:#FFFFFF;
    --code-constant:#FFA657;
    --code-bool-num:#D2A8FF;
    --code-string: #A5D6FF;
    --code-variable: #FFA657;
    --code-class-function: #FF7B72;
    --code-keyword:#FF7B72;
    --code-regex:#FF7B72;
}

/* color classes and font helpers */

@font-face {
    font-family: ClarityCity;
    src: url('/assets/fonts/ClarityCity-Regular.woff2') format('woff2'),  url('/assets/fonts/ClarityCity-Regular.woff') format('woff');
}

.blue {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    opacity: 1;
}

.blue-border
{
    border-color: var(--color-blue);
    border-width: 2px;
}

.green {
    background-color: var(--color-green);
    border-color: var(--color-green);
    opacity: 1;
}

.orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    opacity: 1;
}

.grey {
    background-color: var(--color-grey);
    border-color: var(--color-grey);
    opacity: 1;
}

.grey-sep {
    background-color: var(--color-grey-separator);
    border-color: var(--color-grey-separator);
    opacity: 1;
}

.img-border
{
    border-color: var(--pic-border);
    border-width: 2px;
    border-style: solid;
}

/* typical css */

body {
    font-family: 'ClarityCity';
    font-size: 18px;
}

hr {
    border: none;
    height:5px;
    border-radius: 2px;
}

p img, li img {
    max-width: 100%;
    max-height: 600px;
    border-radius: var(--border-rad);
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

p {
    line-height: 2rem;
}

article ol li, article ul li {
    margin: 1rem;
}

article h3, article h2, article h1, article h4 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

a { 
    text-decoration: none;
    color: var(--link-text);
}
a:hover 
{ 
    text-decoration: underline;
    text-decoration-color: var(--link-underline);
}

/* classes */

.latest-list hr:last-of-type {
    display:none;
}

.navbar-brand
{
    font-size: 2rem;
}

.nav-link, .nav-link:hover
{
    font-size: 1.25rem;
    color: var(--color-blue);
}

.nav-item a:hover, .menu-list ul li a:hover
{
    text-decoration-color: var(--special-link-hover) !important;
}


.navbar a:hover
{
    text-decoration-color:var(--link-text);
}

.search-icon
{
    width: 1.1em;
    height: 1.1em;
    fill: currentcolor;
}

.logo-icon
{
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--color-blue);
    margin-right:5px;
    transition: transform 4s ease-in-out;
    margin-bottom:3px
}

.navbar-brand:hover > .logo-icon 
{
    transform: rotate(90deg);
}
.navbar:hover .logo-icon
{
    transform: rotate(90deg);
}

/* chrome textbox highlight fix */
.form-control:focus
{
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
    border-color: var(--color-blue);
}

.btn-image 
{
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    fill: currentcolor;
}

.dropdown-item.active, .dropdown-item:active {
    text-decoration: none;
    background-color: var(--color-blue);
}

.dropdown-menu
{
    border-width: 2px;
}

.btn-tag {
    --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem; --bs-btn-border-radius: 10rem; 
}

.btn-primary {
    --bs-btn-bg: #008ED5; --bs-btn-border-color: #008ED5; --bs-btn-hover-bg: #008ED5; --bs-btn-hover-border-color: #008ED5; --bs-btn-active-bg: #008ED5; --bs-btn-active-border-color: #008ED5;
    --bs-btn-font-size: 1.25rem; --bs-btn-line-height: 1.25rem; --bs-btn-border-radius: .4rem;
    padding-top:8px;
}

.btn-primary, .btn-primary a:hover {
    text-decoration: none !important;
}

.tag-bg
{
    background-color: rgba(var(--tag-bg-rgb),var(--tag-bg-transparency))!important;--bs-border-radius: .4rem;
}

.tag-text
{
    color:var(--tag-text);
    font-weight:100 !important;
    padding-top:7px;
}

.post-list hr:last-of-type
{
    display: none;
}

.post-details
{
    opacity: .7;
    font-size: .8rem;
}

.post-title a
{
    color:var(--post-title);
}

.post-title a:hover
{
    text-decoration-color:var(--link-text);
}

.menu-list ul {
    list-style-type: none;
    padding:0;
}

.menu-list ul li {
    padding:10px 0 10px 0;
}

.pad-social {
    margin: 5px;
    padding: 10px;
}

article ol {
    padding-left:0;
}

/* google search */

.gsc-control-cse, .gsc-control-wrapper-cse, .gsc-result, .gs-image, .gsc-results .gsc-cursor-box .gsc-cursor-page
{
    background-color: var(--search-bg) !important;
    border-color: var(--search-bg) !important;
}

.gs-snippet
{
    color: var(--search-text) !important;
}

.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b
{
    color: var(--search-link) !important;
}

.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b
{
    color: var(--search-link) !important;
}





.fb-button {
    background: #1877f2;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    padding: 0 8px;

    color: #fff;
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 1rem auto .5rem auto;
    width: 180px;
    text-align: center;
}

.fb-button:hover {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

p code {
    background-color: var(--code-bg);
    padding:8px;
    border-radius: var(--border-rad);
}

.caution {
    color: red;
    animation: blink 2s linear infinite;
}

@keyframes blink {
    50% {
        opacity: 30%;
    }
}

[class*="language-"] {
    max-height:90vh;
    overflow: auto;
}

.code-expand {
    max-height: none;
}

/* prism theme */

.toolbar
{
    display: none;
}

code[class*="language-"],
pre[class*="language-"] {
  color: var(--code-default);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: var(--border-rad);
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: var(--code-bg);
}

.language-keyboard {
    background: none !important;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: var(--code-comment);
}
.token.punctuation {
  color: var(--code-punctuation);
}
.token.namespace {
  opacity: 1;/*0.7;*/
}
.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag {
  color: var(--code-constant);
}
.token.boolean,
.token.number {
  color: var(--code-bool-num);
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: var(--code-string);
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
  color: var(--code-variable);
}
.token.atrule,
.token.attr-value,
.token.class-name,
.token.function {
  color: var(--code-class-function);
}
.token.keyword {
  color: var(--code-keyword);
}
.token.important,
.token.regex {
  color: var(--code-regex);
}
.token.bold,
.token.important {
  font-weight: 600;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}

.token.keyboard {
    border: 2px solid var(--color-grey);
    border-radius: var(--border-rad);
    color: var(--color-blue);
    padding:15px 20px 15px 20px;
}

.token.keyboard-combo {
    color: var(--color-orange);
    margin-right: 10px;
    margin-left: 10px;
}