:root {
    --fs: 11pt;
    --tint: 100%;
}

.dark_mode {
    --primary: #FAF9F6;
    --secondary: #0c0c0c;
}

.light_mode {
    --primary: #0c0c0c;
    --secondary: #FAF9F6;
}

body {
    font-family: 'Source Code Pro', monospace;
    font-size: var(--fs);
    color: var(--primary);
    background-color: var(--secondary);
}

/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.navlink {
    padding: 2px;
    padding-left: 4px;
    text-decoration:none;
    padding-right: 4px;
}

a {
    color: var(--primary);
    background-image: linear-gradient(to bottom, var(--secondary) 50%, var(--primary) 50%);
    background-position: top;
    text-decoration-line: underline;
    text-underline-position: under;
    background-size: 100% 200%;
    transition: background-position 0.5s ease;
}

a:hover {
    color: var(--secondary);
    text-decoration: none;
    background-position: bottom;
}

hr {
    border-top: 2px solid var(--primary);
    margin: 0;
    width: 100%;
}

.tint {
    filter: brightness(var(--tint));
}

.covertint {
    color: var(--primary);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--primary) 50%);
    background-position: top;
    background-size: 100% 200%;
    transition: color 0.7s, background-position 0.5s ease;
}

.covertint:hover {
    background-position: bottom;
}

.covertint p {
    font-size: 0;
    transition: font-size 0s ease;
    transition-delay: 0s;
}

.covertint:hover p {
    font-size: var(--fs);
    color: var(--secondary);
    transition-delay: 0.3s;
}

.card {
    background-color: var(--primary);
}

.card_info {
    color: var(--secondary);
}

.card-img {
    width: 100%;
    height: 10em;
    object-fit: cover;
}

.feature_img {
    border: 2px solid var(--primary);
}

.clickable {
    cursor: pointer;
}

.table th, .table td {
    border: none;
}

.footnotes hr {
    margin-top: 3px;
    border: none;
}

.tag_card {
    background-color: var(--primary);
    color: var(--secondary);
}

.collapse_link {
    color: var(--secondary);
    background-image: none;
    background-color: var(--primary);
    text-decoration-line: none;
}

.collapse_link:hover {
    color: var(--secondary);
    text-decoration: none;
    text-decoration-line: none;
}

.collapse_hdr {
    background-color: var(--primary);
    color: var(--secondary);
}

.collapse_text {
    background-color: var(--secondary);
    color: var(--primary);
}

a[href^="#fn:"],

a[href^="#fnref:"] {
  text-decoration: none;
  font-family: monospace;
}
a[href^="#fn:"]:before{ content: '[' }
a[href^="#fn:"]:after{ content: ']' }