:root {
  --color: #000;
  --bg: #fff;
  --invertcolor: #fff;
  --invertbg: #000;
  --linkcolor: #F82B72; /* ffc400 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --color: #fff;
    --bg: #141414;
    --invertcolor: #000;
    --invertbg: #fff;
    --linkcolor: #F82B72;
  }
}
@font-face {
  font-family: 'FontWithASyntaxHighlighter';
  src: 
    url('/FontWithASyntaxHighlighter-Regular.woff2') 
    format('woff2')
  ;
}
@font-palette-values --myCustomPalette {
  font-family: 'FontWithASyntaxHighlighter';
  override-colors: 
    0 red, /* keywords, {} */
    1 lightblue, /* comments */
    2 yellow, /* literals */
    3 purple, /* numbers */
    4 green, /* functions, [] */
    5 orange, /* js others */
    6 black, /* not in use */
    7 hotpink, /* inside quotes, css properties, few chars */
    8 lime /* few chars */
  ; 
}
code {
  font-family: "FontWithASyntaxHighlighter", monospace;
}
/* from: https://www.bram.us/2022/05/25/dark-mode-toggles-should-be-a-browser-feature/?utm_campaign=dark-mode-toggles-should-be-a-browser-fe */
html { color-scheme: light dark; } /* This site supports both light and dark mode */

#content { word-break: break-word !important; caret-color: #F82B72; padding-left:3px; outline:0; }

body, .include, td { 
	background-color: var(--bg);
	color: var(--color);
	transition: background 0.3s, color 0.3s;
	padding: 0 7%;
	font: 24px Consolas, monospace; 
	letter-spacing: -0.05em; 
  -webkit-text-size-adjust: none; /* Para navegadores basados en WebKit */
  -ms-text-size-adjust: none; /* Para navegadores basados en Microsoft */
  text-size-adjust: none; /* Para otros navegadores */	
}
.dark td { 
	background-color: var(--color);
	color: var(--bg);
}
td{white-space:nowrap;}
th { font-size:1.5rem; }
table{ border-spacing: 1em 0.5em; margin:1rem; border:1px solid; }
.dark, .dark #menu {
  background-color: var(--invertbg);
  color: var(--invertcolor);
}
.dark:after { background: var(--invertbg); }
li > p { margin:0; }
.include {
	margin-top:10px;
	-webkit-box-shadow: 0 0 6px #222;
	-moz-box-shadow: 0 0 6px #222;
	box-shadow:  0 0 6px #222;
	padding: 5px;
}
.transcluded {
	display: block;
	margin: 1em 0;
	padding: 0.5em;
	border-left: 3px solid var(--linkcolor);
	background: rgba(248, 43, 114, 0.05);
}
.transcluded > * {
	margin: 0;
}

#menu { 
	position:fixed; 
	right:10px; top:20px; 
	background: var(--bg);
  color: var(--color);
  padding-right:10px;
}
#menu[open] { box-shadow: 0 0 4px 2px #ccc; }
#menu summary { 
    cursor: pointer; 
    float: right; 
    outline:0;
    width: 80px;
    background: 5px 5px no-repeat url(/media/3dots.svg);
    background-size: 55px;
    transition: 1s all;
}
#menu li { list-style:none; }
#menu [type="password"], #menu [type="search"], #menu [type="text"] { width:80%; font-size:20px; }

body { -webkit-font-smoothing: antialiased; }

header { 
	-webkit-box-shadow: 0 6px 6px -6px #222;
	-moz-box-shadow: 0 6px 6px -6px #222;
	height:50px;
}

header a {
	/* based on http://www.akaru.fr/en/agence/poles/digital-et-interactif/ */
	text-decoration: none; 
	text-transform: uppercase;
	letter-spacing:-7px;
	text-shadow: 0 13px 9px #222, 0 -2px 1px #222;
	font: 700 80px 'Arial Black';
	line-height:1.1em;
}

a, strong { color: var(--color); /*var(--linkcolor) !important;*/  text-shadow:0 0 20px #f82b72,0 0 5px #f82b72; }
a:hover { opacity:.5; }

.dark a { color: var(--bg); }

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
article.crypted { color:#444; }
article.decrypted { color:white !important; border:1px dotted #8f8; }
article.crypted:not(.decrypted) { border:1px dotted var(--linkcolor) !important; }
article.crypted:not(.decrypted):after { content:"encrypted data"; }

@keyframes open {
  0% { opacity: 0; margin-left:-1em; margin-bottom:-20px; }
  100% { opacity: 1; margin-left:0;  }
}
[open] > :not(summary) { animation: open 0.3s ease-in-out; }
details summary::-webkit-details-marker { display: none; }
details summary {
  width: 100%;
  padding: 0.5rem 0;
  border-top: 1px solid black;
  position: relative;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 300;
  list-style: none;
  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-property: margin;
}
details summary:after {
  content: "+";
  position: absolute;
  font-size: 1.75rem;
  margin-top: -0.75rem;
  right: 0;
  transform-origin: center;
  transition: 200ms linear;
}
[open] summary:after { 
  transform: rotate(45deg) translateX(3px) translateY(-1px);
}
.listpage { text-align: justify; display:block; }
.listpage li { list-style: none; -display:inline-block; margin:2px 10px; padding:0 8px; border: 1px outset gray; }
.listpage a { text-decoration:none; }
.listpage sub { margin-left:10px; opacity:.8; }
.listpage sub::before { content:">> "; }
.disablesave { text-decoration:line-through; }

/* PROGRES SCROLL ONLYCSS */
body {
    background: var(--bg) linear-gradient(to right top, #0ea 0%, #f40 50%, var(--bg) 50%);
    background-size: 102% calc(100% - 100vh + 3px);
    background-repeat: no-repeat;
    background-position:0 5px;
}
body:after {
    content: '';
    position: fixed;
    top: 5px; left:0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: var(--bg);
}
header>h1 {
  /* Create the gradient. */
  background: gray linear-gradient(to right, #b15a5a, #b15a5a 0%, #cc8353 24%, #8fad6e 50%, #888 74%, #fff 100%) center 0/100% 1px repeat;
  filter:sepia(1);
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;  
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
@view-transition {
  navigation: auto;
}
thead>tr>th { border-bottom:1px solid light-dark(#ddd,#333); }
td { border-bottom:1px dotted light-dark(#ddd,#333); }

/* Markdown Syntax Highlighting - Coherent with HTML visualization */
::highlight(md-header) { color: #f92672; font-weight: bold; }
::highlight(md-bold) { color: #F82B72; font-weight: bold; text-shadow: 0 0 10px #F82B72; }
::highlight(md-italic) { color: #66d9ef; font-style: italic; }
::highlight(md-code) { color: #e6db74; }
::highlight(md-code-block) { color: #fd971f; }
::highlight(md-transclude) { color: #a6e22e; text-shadow: 0 0 12px #a6e22e, 0 0 4px #a6e22e; font-weight: bold; }
::highlight(md-link) { color: #F82B72; text-shadow: 0 0 10px #F82B72; }
::highlight(md-image) { color: #00f5d4; }
::highlight(md-list) { color: #00f5d4; }

/* Comments Section */
.comments {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(248,43,114,0.3);
}

.comments > ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comments li {
  position: relative;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-left: 3px solid var(--linkcolor);
  border-bottom: 1px solid #ddd;
  background: rgba(248,43,114,0.03);
}

.comments li[data-parent] {
  margin-left: 1.5rem;
  border-left-color: rgba(248,43,114,0.5);
}

.comments li[data-parent][data-parent] {
  margin-left: 3rem;
  border-left-color: rgba(248,43,114,0.3);
}

.comments p {
  margin: 0 0 0.5rem;
}

.comments footer {
  font-size: 0.8rem;
  color: #888;
}

.comments .reply {
  position: absolute;
  top: 0.75rem;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 1rem;
  color: #888;
}

.comments li:hover .reply {
  opacity: 1;
}

.comments .reply:hover {
  color: var(--linkcolor);
}

.comments .reply-form {
  margin-top: 0.5rem;
  display: none;
}

.comments .reply-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--linkcolor);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 60px;
}

.comments .reply-form button {
  padding: 0.25rem 0.75rem;
  background: var(--linkcolor);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.comments .reply-form button.cancel {
  background: #888;
  margin-left: 0.5rem;
}

.comments .delete {
  position: absolute;
  top: 0.75rem;
  right: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 1rem;
  color: #888;
}

.comments li:hover .delete {
  opacity: 1;
}

.comments .delete:hover {
  color: #f92672;
}

/* Comment Button */
#comment-btn {
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--linkcolor);
  color: var(--linkcolor);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

#comment-btn:hover {
  background: var(--linkcolor);
  color: white;
}

/* Comment Popover */
#comment-popover {
  padding: 1.5rem;
  border: 1px solid #888;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

#comment-popover::backdrop {
  background: rgba(0,0,0,0.5);
}

#comment-popover h3 {
  margin: 0 0 1rem;
  color: var(--linkcolor);
}

#comment-popover input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box;
}

#comment-popover textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid #888;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1.1rem;
  resize: vertical;
  min-height: 150px;
  box-sizing: border-box;
}

#comment-popover button.send {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  background: var(--linkcolor);
  color: white;
}

#comment-popover button.send:hover {
  opacity: 0.9;
}

/* Autocomplete Popover */
#link-popover {
  position: fixed;
  background: var(--bg);
  border: 1px solid var(--linkcolor);
  border-radius: 4px;
  padding: 0;
  margin: 0;
  min-width: 150px;
  max-width: 300px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
}

#link-popover ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#link-popover li {
  padding: 6px 12px;
  cursor: pointer;
  color: var(--color);
}

#link-popover li:hover,
#link-popover li.selected {
  background: var(--linkcolor);
  color: var(--invertcolor);
}

#link-popover li.selected {
  background: var(--linkcolor);
}