* {
  font-family: greybeard, monospace;
  color: var(--color);
  text-shadow: var(--drop-shadow);
  scrollbar-color: var(--color) var(--title-color);
  scrollbar-width: thin;
  box-sizing: border-box;
}

::selection {
 background-color: var(--link-color);
 color: var(--title-color) !important;
}
:target {scroll-margin: 5px;}

html {zoom: 0.8;}
pre {zoom: 1.25;}
/* universal background color */
body {
  background: var(--bg-color);
  background-attachment: fixed;
  padding-top: 5px;
  margin: auto;
  cursor: url('../img/UI/phone-cur.gif'), auto;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

body.theme-default {
  --drop-shadow: 0 0 black;
  --bg: white;
  --bg-color: white;
  --bg-img: url('../img/UI/dither-bw.png');
  --logo-color: url('../img/UI/tooth-navbar.png');
  --logo-guest: url('../img/UI/guestbook-logo.png');
  --color: black;
  --title-color: white;
  --mark-color: rgb(229, 229, 229);
  --link-color: black;
  --border: 1px solid black;
  --box-shadow: 2px 2px black;
  --border-dotted: 1px dotted black;
  --border-inset: 1px inset rgb(204, 204, 204);
}

body.theme-red {
  --drop-shadow: 0px 0px 3px rgb(from var(--link-color) r g b / 0.2);
  --bg: white;
  --bg-color: url('../img/sky-tile.png');
  --bg-img: url('../img/UI/dither-red.png');
  --logo-color: url('../img/UI/tooth-navbar.png');
  --logo-guest: url('../img/UI/guestbook-logo-red.png');
  --color: #e80f00;
  --title-color: white;
  --mark-color: #cfe5f3;
  --link-color: #a680bc;
  --border: 1px solid #e80f00;
  --box-shadow: 2px 2px #e80f00;
  --border-dotted: 1px dotted #e80f00;
  --border-inset: 1px inset #cfe5f3;
}

body.theme-dark {
  --drop-shadow: 0px 0px 3px rgb(from var(--color) r g b / 0.4);
  --bg: #2c0f05;
  --bg-color: black;
  --bg-img: url('../img/UI/dither-dark.png');
  --logo-color: url('../img/UI/tooth-dark.png');
  --logo-guest: url('../img/UI/guestbook-logo-dark.png');
  --color: #ff9622;
  --title-color: black;
  --mark-color: black;
  --link-color: #ff9622;
  --border: 1px solid #ff9622;
  --box-shadow: 2px 2px #ff9622;
  --border-dotted: 1px dotted #ff9622;
  --border-inset: 1px inset #ff9622;
}

body.theme-bios {
  --drop-shadow: 0 0 white;
  --bg: url(https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExaTJvc3IzcTgzemk5cmp4Y3N4MmI3Ym5wZXJodGdsNWZtMGJhdGIzaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FlodpfQUBSp20/giphy.gif);
  --bg-color: #0020ef;
  --bg-text: black;
  --bg-img: url('../img/UI/dither-bios.png');
  --logo-color: url('../img/UI/tooth-dark.png');
  --logo-guest: url('../img/UI/guestbook-logo-bios.png');
  --color: white;
  --title-color: #0020ef;
  --mark-color: #0020ef;
  --link-color: white;
  --border: 1px solid white;
  --box-shadow: 2px 2px white;
  --border-dotted: 1px dotted white;
  --border-inset: 1px inset white;
}
.phone {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex-wrap: wrap;

}
.phone .sub-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.titleCode {text-align: left;}
.center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items:center;
}
.center-text {text-align:center;}

button:hover {
    cursor: url('../img/UI/phone-cur-pickup.gif'), auto;
}
/* button style */
button {
  font-size: 1.1rem;
  font-weight: bold;
  border: var(--border);
  background: var(--bg);
  cursor: url('../img/UI/phone-cur-pickup.gif'), auto;
  box-shadow: var(--drop-shadow);
}
button > img {
  vertical-align: middle;
  width: 17px;
  padding-bottom: 1px;
}
button:not(.is-active):hover {
  outline: var(--border-dotted);
  opacity: 50%;
}
.is-active {
  background-color: var(--color);
  cursor: url('../img/UI/phone-cur.gif'), auto;
}

mark {background-color: var(--mark-color);}

/*FONTS*/

@font-face {
  font-family: greybeard;
  src: url(../fonts/Greybeard-18px.woff2),
  url('../fonts/Greybeard-18px.woff2') format('woff2');
}

@font-face {
  font-family: greybeard;
  src: url(../fonts/Greybeard-18px-Bold.woff2),
  url('../fonts/Greybeard-18px-Bold.woff2') format('woff2');
  font-weight: bold;
}

@font-face {
  font-family: greybeard;
  src: url(../fonts/Greybeard-18px-BoldItalic.woff2),
  url('../fonts/Greybeard-18px-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: greybeard;
  src: url(../fonts/Greybeard-18px-Italic.woff2),
  url('../fonts/Greybeard-18px-Italic.woff2') format('woff2');
  font-style: italic;
}

@font-face {
  font-family: Redaction;
  src: url(../fonts/Redaction_50-Bold.woff2),
  url('../fonts/Redaction_50-Bold.woff2') format ('woff2');
  font-weight: bold;
}

/* header font */
h2, h3, h4, h5, .header-link {
  font-family: Redaction, greybeard, serif;
  margin-bottom: 0;
}
body:not(h2, h3, h4, h5, h6) {font-size: 1rem;}
h2 {font-size: 2em}
h3 {font-size: 1.5em}
p:not(footer p, .nodeLabel p, .guestbook-message p, #c_container p), h2, h3, figcaption {background: var(--bg-text);}
a {
  cursor: url('../img/UI/phone-cur-pickup.gif'), auto;
  display: inline-block;
}

.logo, .logoGuest, .logoEgg {
  width: 10px;
  height: 15px;
  margin-right: 8px;
  background-image: var(--logo-color);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}
.logo{
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}

.logoGuest {
  width: 15px;
  background-image: url("../img/UI/phone.gif");
}

.logoEgg {
  width: 108px;
  height: 105px;
  background-image: var(--logo-guest);
}

.titleCode {
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
  margin-left: -40px;
}

/* body font */

blockquote {margin: 12px 0px;}
blockquote:before {content: url('../img/UI/phone-small.gif') ' ';}

label, p[title]::before {font-weight: bold;}
label {cursor: url('../img/UI/phone-cur-pickup.gif'), auto;}

::placeholder {
  color: var(--link-color);
  font-style: italic;
  text-shadow: var(--drop-shadow);
}

.buttonGuest, .buttonGuest:hover, #buttonNSFW {
  padding: 2px 5px;
  opacity: 1 !important;
  background: var(--title-color);
}

input[type="checkbox"] {
  width: auto;
  vertical-align: middle;
  position: relative;
  cursor: url('../img/UI/phone-cur-pickup.gif'), auto;
}

input, textarea{
  border: var(--border);
  background-color: var(--mark-color);
  margin: 4px 0px;
  width: 100%;
  font-size: 1rem;
  cursor: url('../img/UI/phone-cur-pickup.gif'), auto;
  box-shadow: var(--text-shadow);
}

fieldset {border: var(--border);}

figcaption {
  font-style:italic;
  margin-top: 12px;
}
figure, pre {
    text-align: center;
    margin: 0;
    padding: 0;
}
figure {counter-increment: figures;}
em, figcaption::before  {
  font-style: italic;
  font-weight: bold;
}
figcaption::before {content: 'Fig ' counter(figures) '. ';}

p[title]::before {content: attr(title) ': ';}

img {
  max-width: 100%;
  margin: 0 auto;
}

/* STYLING FOR sub-pageS (about, characters, etc) */

/*general*/

.sub-page, header, .writeHeader, #authorNotes, .chapterName {
  width: 840px;
  max-width: 98%;
  margin: auto;
  background: var(--bg);
}
.chapterName {
  padding: 5px 10px;
  margin-top: -1px;
}
.sub-page {
  counter-reset: figures;
  margin: -2px auto 10px auto;
  padding: 1px 48px 48px 48px;
}

/* HEADER */
header, .sub-page, #authorNotes, .writeHeader, .chapterName {
  border: var(--border);
  box-shadow: var(--box-shadow), var(--drop-shadow);
}

.winNav, .winNav > div {
 display: flex;
 align-items: center;
}
.winNav {
  justify-content:space-between;
  border-bottom: var(--border);
  background-image: var(--bg-img);
  background-position: center;
  image-rendering: pixelated;
}

#nav, .winNav {
  padding: 5px 7px;
  font-size: 1.1rem;
}

.themeIcon {
  font-size: 1.1rem;
}
.mobile-theme {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;
}

header #nav a, #mobileMenu li {
  border: solid 1px transparent;
  padding: 0px 3px;
  text-decoration: none;
}
header #nav a:hover, :focus-visible, .buttonGuest:hover, #buttonNSFW:hover, #mobileMenu li:hover, .toc a:hover {border: var(--border-inset);}

.logoNav * {
  font-family: Redaction, greybeard, Serif;
  color: var(--title-color);
  text-decoration: none;
  font-weight: bold;
}
.logoNav a {margin-top: 2px}
.logoNav a:hover {
  outline: dotted 1px var(--title-color);
  color: var(--title-color);
}

.themeIcon, .themeIcon a {
  font-family: Redaction, greybeard, serif;
  font-weight: bold;
  gap: 3px;
}
.wide {padding: 10px;}

/* link colors */
a:hover, :focus {
  text-decoration: none;
  outline: var(--border-dotted);
}
a:hover {color: var(--link-color);}

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 30px;
}
.comicNav a {
  display: inline-block;
}
.comicNav img {
  width: 80px;
  max-width: 98%;
  image-rendering:initial;
}
.comicNavText {margin: 0;}
.comicNav a {text-decoration: none;}

/* style comic page image */
.comicPage img {
  max-width: 100%;
}

.writeAuthorNotes, #comment {padding: 30px 48px;}

/* ARCHIVE PAGE */

/* style table in which archive is displayed */
.archiveTable {
  width: 100%;
  border-collapse: collapse;
}

/* style archive table cells */
.archiveTable td {
  padding: 3px;
  vertical-align: center;
}

/* style table cell in which page title is displayed */
.archiveCellTitle:not(.leftAlignTableText) {
  max-width: 300px;
  text-align: center;
}

.archiveCellDate {
  text-align: right;
  min-width: 120px;
}

.archiveCellNum {
  text-align: left;
  min-width: 30px;
}

/* style the thumbnails on the archive page */
.archiveCellThumb {
    width: 500px;
    max-width: 60px;
}
.archiveCellThumb img{max-width: 100%;}

/* for left aligning the text in a table cell */
.leftAlignTableText td {text-align: left;}

/* highlight a table row and make pointer into hand when moused over */
.archiveRow:hover {
  outline: var(--border-dotted);
  cursor: url('../img/UI/phone-cur-pickup.gif'), auto;
}

/* FOOTER */
footer {
  margin: 12px auto 15px auto;
  text-align: center;
}

hr {
  border: var(--border-dotted);
  border-bottom: none;
}

/* MERMAID CHART STYLING */

.mermaid svg .cluster rect {
    fill: var(--bg) !important;
    stroke: var(--color) !important;
}
.mermaid svg .node path {
    fill: var(--mark-color) !important;
    stroke: var(--color) !important;
}
.flowchart-link {stroke: var(--color) !important;}
.edgeLabel p {background-color: var(--mark-color) !important;}
.mermaid a {text-decoration: none;}
.mermaid .marker {
  fill: var(--color) !important;
  stroke: var(--color) !important;
}
.mermaid .marker.cross {stroke: #eaeaea !important;}
.mermaid .edgePath .path {stroke: #eaeaea !important;}

/* Red Phone Hotline Section */

.winSplit {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.winSplit > div {
  min-width: calc(50% - 12px);
  margin: 38px 0;
}

.guestbook-message {
  border-top: var(--border-dotted);
  margin-top: -1px;
}

#guestbooks___guestbook-messages-container {
  background: var(--mark-color);
  border: var(--border);
  padding: 0 10px;
  overflow-y: scroll;
  height: 400px;
}

.crossing {
  height: 160px;
  min-width: 106px;
  margin-top: 24px;
  background-size: contain;
  background-repeat:no-repeat;
}
.flexFit {
  display: flex;
  gap: 24px;
}

.comicNavSet {
  display: flex;
  gap: 10px;
}

.RVHFEED_class a{
    text-decoration: none;
    font-weight: bold;
    font-style:italic;
}
.RVHFEED_class a:after{
    content: ' ';
    display: block;
}
.RVHFEED_class li {
  list-style-type: none;
  margin-bottom: 20px;
}
ul.RVHFEED_class {padding:0;}
.RVHFEED_class sub {
    vertical-align: middle;
    font-size: 1rem;
    background: var(--mark-color);
}
.toc {
  min-width: 150px;
}
.toc a {border: solid 1px transparent;}
.toc li {padding-left: 4px;}
.dropdown{
  display: inline-block;
}
.dropdown ul {margin: 0 0 0 20px;}
.dropdown:hover .dropdown-items {
  display: block;
}

.dropdown-items {
  display: none;
  position: absolute;
  z-index: 1;
  background: var(--bg);
  border: var(--border);
  box-shadow: var(--box-shadow);
  padding: 4px 0;
}
.dropdown-items a, #mobileMenu a, .toc a {
  display: block;
  margin: 2px 4px;
}

body.theme-dark::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(255, 148, 34, 0.055) 50%, rgba(0, 0, 0, 0.114) 50%);
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

#ddgSearch {
  margin-top: 24px;
  max-width:500px;
  width: 100%;
  display: flex;
  gap: 4px;
  flex-direction: row;
  align-items: center;
}

#ddgSearch input {
  width: calc(100% - 70px);
}
.mobile-vis, #menu, #mobileMenu {display: none;}
#ddgSearch input, #ddgSearch button {height: 22px;}

.collage {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  flex-direction:column;
  height: 1500px;
}
.collage div{max-width: 143px;}

#c_replyingText, .c-paginationButton {
  margin-top: 10px;
}
.c-comment {
  border-bottom: var(--border-dotted);
  padding-bottom: 10px;
}
.c-name {font-weight: bold;}
#c_container {
  background: var(--mark-color);
  border: var(--border);
  padding: 10px;
}
.c-text::before {content: url('../img/UI/phone-small.gif') ' ';}
#c_pagination {
  display: flex;
  justify-content:space-between;
}
.c-expandButton {margin-left: 10px;}
.box-image {
  border: var(--border);
  box-shadow: var(--box-shadow);
}
span {font-family: inherit;}

.mobile-hide {display: inline-block;}

#mobileMenu {
  padding: 0 10px;
}
#mobileMenu ul {
  margin-left: 30px;
}
#mobileMenu li, .dropdown li, .toc li{
  font-size: 1.1rem;
  list-style-type: "⤷ ";
}
#mobileMenu a, .toc a{text-decoration: none;}

ul, ol {
  padding-left: 0;
}
.sub {margin-left: 18px;}

ul[title]::before, ol[title]::before {
  content: attr(title);
  margin-left: -14px;
  font-style: italic;
  font-weight: bold;
}

@media only screen and (max-width: 600px) {
  .winSplit, .flexFit {flex-direction: column;}
  .confessResponse { max-height: 1200px;}
  .mobile-vis, #menu {display: block;}
  .mobile-hide {display: none !important;}
}