body.light {
    --bkg-color: #f5edda;
    --text-color: #24221e;

    --navbar-color: white;
    --navbar-border-color: black;
}

body.dark {
    --bkg-color: #1e1f22;
    --text-color: #bababa;

    --navbar-color: black;
    --navbar-border-color: white;
}

.dark b {
    color: #eeeeee;
}

.light b {
    color: #111111;
}

.dark .date {
    color: #9a9a9a;
}

.light .date {
    color: #4e4a41;
}

.dark a:link {
    color: lightskyblue;
}

.dark a:visited {
   color: #9a79b9;
}

.dark a:hover { 
    color: #ffffff;
}

.dark a:active {
    color: #ff4040; text-decoration:none; font-weight:normal;
}

* {
  font-family: Arial, Helvetica, sans-serif;
}


body {
  background: var(--bkg-color);
}

h2 ~ p {
    margin-left: 1em;
}

h3 ~ p {
    margin-left: 2em;
}

h1, h2, h3,  p {
  color: var(--text-color);
}

.right {
    float: right;
    clear: both;
}

video.right {
    margin: 10px;
}

img.right {
    margin: 10px;
}


.navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;

    padding: 10px 10px 10px 10px;
    border-color: var(--navbar-border-color);
    border-width: 2px;
    border-style: solid;
    background-color: var(--navbar-color);
}

.nav-link:link {
    color: var(--text-color);
}

.nav-link:visited {
    color: var(--text-color);
}

video {
    margin-bottom: 5px;
}

.thang {
    color:blue;
}

.dark .thang {
    color:aqua;
}

.thang:hover:after {
    content: url(/static/images/thang.jpeg);
}