html {
    margin: 0;
    padding: 0;
    line-height: inherit;
    background-color: var(--backgroundPrimary);
    color: var(--textPrimary);
}
body{
    margin: 0px;
}
#root {
    background-color: var(--backgroundPrimary);
    padding-left: 2em;
    padding-right: 2em;
}
:root {
    --backgroundPrimary: #ffffff;
    --backgroundSecondary: #e6e9ed;
    --textPrimary: #11112D;
    --textSecondary: #64748b;
    --link: #0b69bf;
    --brighnessHover: .95;
    --brightnessPress: 1.05;
    --brightnessDisabled: .75
}
[data-theme=dark] {
    font-family: monospace;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --backgroundPrimary: #0f172a;
    --backgroundPrimary: #ebebeb;
    --backgroundSecondary: #363638;
    --textPrimary: #ebebeb;
    --textPrimary: #0f172a;
    --textSecondary: #bdbdbd;
    --link: #8ec9ff;
    --link: forestgreen;
    --brighnessHover: 1.1;
    --brightnessPress: .9;
    --brightnessDisabled: .75;
}
[data-theme=light] {
    font-family: monospace;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    --backgroundPrimary: #0f172a;
    --backgroundPrimary: #ebebeb;
    --backgroundPrimary: #ffffff;
    --backgroundSecondary: #363638;
    --backgroundSecondary: #ebebeb;
    --textPrimary: #ebebeb;
    --textPrimary: #0f172a;
    --textSecondary: #bdbdbd;
    --link: #363638;
    --brighnessHover: 1.1;
    --brightnessPress: .9;
    --brightnessDisabled: .75;
    --tw-text-opacity: 1;
}

nav>ul {
    list-style-type: none;
    padding-inline-start: 0;
}
nav>ul::before {
    content: "[";
}
nav>ul::after {
    content: "]";
}
nav>ul li {
    display: inline;
}
nav>ul li::after {
    content: "|";
}
nav>ul li:last-child::after {
    content: none;
}
nav>ul li a {
    padding: 0.125em 0.25em;
}
nav>ul li a.livenodelist {
    /* background-color: darkseagreen; */
    font-weight: bold;
}
nav>ul li a:hover {
    background-color: var(--textPrimary);
    color: var(--backgroundPrimary);
}

a:link, a:visited {
    /* color: var(--textPrimary); */
    color: var(--link);
    text-decoration: none;
}
p {
    /* color: rgb(107 114 128 / var(--tw-text-opacity)) */
    color: hsl(220 9% 20% / var(--tw-text-opacity))
}
footer {
    font-size: smaller;
    background-color: var(--backgroundSecondary);
    margin-top: 5em;
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
}

table {
    border-spacing: 0px;
    margin: 10px;
}
th {
    text-align: left;
}
th, td {
    vertical-align: text-top;
    padding: 10px;
}
td p {
    margin-top: 0;
}
tr>* {
    border-bottom: 1px solid #64748b ;
}
tr td:nth-child(3) {
/* text-wrap: nowrap; */
}

.button {
    background-color: lightgreen;
    border-radius: 2px;
    padding: 0em 0.25em;
    box-shadow: 0.5px 0.5px 2px 0px;
}
.button:hover {
    box-shadow: inset 0.5px 0.5px 2px 0px;
}


#notes {
    font-size: small;
}
blockquote {
    font-style: italic;
}


.entry {
    /* display: flex; */
    font-size: small;
} 
.entry .e-date {
    width: 10em;
    flex-basis: auto;
}
.entry .e-content {
    flex-basis: min-content;
    flex-grow: 1;
}
.entry .e-content p:first-child {
    margin-top: 0;
}
ul {
    padding-inline-start: 1em;
    margin-top: 0em;
}|
ul li *:only-child {
    margin-bottom: 0;
}
ul li {
    color: rgb(107 114 128 / var(--tw-text-opacity));
    margin-bottom: 0.5em;
}
#nodes table {
    width: 100%;
}
.user, .node {
    font-family: monospace;
    quotes: none;
    background-color: hsl(0 0 60%);
    border-radius: 2px;
    padding: 0.2em 0.5em;
    color: hsl(0 0 18%) !important; 
    box-shadow: 0.5px 0.5px 2px 0px;
}
a.node::after {
    background-image: none !important;
    margin-left: 0;
    display: unset !important;
}
a.node:hover {
    box-shadow: inset 0.5px 0.5px 2px 0px;
}

a[href^="http"]::after,
a[href^="https://"]::after
{
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}
a[href^="https://meshtastic.org"] {
    font-family: monospace;
}
a[href^="https://meshtastic.org"]::after
{
    background-image: url("https://meshtastic.org/design/web/favicon.ico");
    width: 11px;
    height: 11px;
    margin-right: 4px;
}

.dead {
    text-decoration: line-through;
}
.conversation-screenshots {
    display: inline-block;
    margin-bottom: 1em;
}
.conversation-screenshots img {
    display: block;
}
.conversation-screenshots .ellipsis {
    background-color: hsl(0, 0%, 8%);
    color: grey;
    text-align: center;
}

p.footnote {
    font-size: x-small;
}
pre {
    font-family: monospace;
    font-size: smaller;
    font-variant-numeric: tabular-nums lining-nums;
}
pre > h2 {
    padding-bottom: 0;
    margin-bottom: 0;
}
pre > h2 > .node-personal {
    background-color: unset;
}
.node-personal {
    background-color: lightblue;
}
.node-virgin {
    background-color: pink;
}
.node-frequently-contactable {
    background-color: lightgreen;
}
.node-rarely-contactable {
    background-color: gold;
}
a.node-ham-call-sign[href^="http"]::after, a.node-ham-call-sign[href^="https://"]::after {
    width: inherit;
    height: inherit;
    margin-left: inherit;
    background: none;
    /* display: inline-block; */
}
a.node-ham-call-sign {
    font-weight: bold;
    text-decoration: underline;
}