:root { 
  --scrollbar-bg: rgba(50,50,50,0.25);
  --thumb-bg: rgba(50,50,50,0.5);
  --scrollbar-width: 0.35rem; 
  --scrollbar-width_hover: 0.5rem; 
  --scrollbar-thumb-radius: 0.5rem;
  --scrollbar-thumb-border: 0.2rem;
  --scroll-bg:#0a6f75;
}
::-webkit-scrollbar{width: var(--scrollbar-width);height:var(--scrollbar-width);}
::-webkit-scrollbar:hover{width: var(--scrollbar-width_hover);}
::-webkit-scrollbar-track{background-color: var(--scrollbar-bg);}
::-webkit-scrollbar-thumb{background-color: var(--thumb-bg);border-radius: var(--scrollbar-thumb-radius);border: var(--scrollbar-thumb-border) solid var(--scrollbar-bg);}
*{scrollbar-width: var(--scrollbar-width);scrollbar-color: var(--thumb-bg) var(--scrollbar-bg);}
/* smooth-scroll CSS */
html { scroll-behavior: smooth;}
/*************//* use for any tag on your page */
[data-title]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;}
[data-title]:after {content: attr(data-title);position: absolute;top: -1.75em;left: 5%;z-index: 9998;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color: var(--scroll-bg);color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title] {position: relative;cursor: alias; z-index: 9998;}
[data-title]:hover {z-index: 9999;}
[data-title-bottom]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;}
[data-title-bottom]:after {content: attr(data-title-bottom);position: absolute;bottom: -1.75em;left: 5%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color: var(--scroll-bg);color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title-bottom] {position: relative;cursor: alias;z-index: 9998;}
[data-title-bottom]:hover {z-index: 9999;}
[data-title-left]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;}
[data-title-left]:after {content: attr(data-title-left);position: absolute;left: -100%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color:var(--scroll-bg);color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title-left] {position: relative;cursor: alias;z-index: 9998;}
[data-title-left]:hover {z-index: 9999;}
[data-title-right]:hover:after {opacity: 1;transition: all 0.15s ease 0.75s;visibility: visible;z-index: 9999;}
[data-title-right]:after {content: attr(data-title-right);position: absolute;left: 100%;z-index: 99999;visibility: hidden;font-family: sans-serif;white-space: nowrap;background-color:var(--scroll-bg);color: #fff;font-size: 1rem;padding: 0.25rem;box-shadow: 1px 1px 3px #222222;opacity: 0;border: 1px solid #111111;border-radius: 0.5rem;cursor: alias;z-index: 9998;}
[data-title-right] {position: relative;cursor: alias;z-index: 9998;}
[data-title-right]:hover {z-index: 9999;}

.info {display:inline-block;width: 25px;height: 15px;color:#ddd;font-size: 0.8rem;text-transform:lowercase;margin: 0;font-family: monospace;text-align: center;}
.info span {width: 15px;height: 15px;background: #175579;display:inline-block;border-radius:50%;}.info span:hover {background:#31728d;color:white;}

body {
  background: #068;
  /* background:linear-gradient(to right, #068, #06a, #06c, #068); */
  /* background:linear-gradient(to lower right, #02478e, #041690, #273a81); */
  /* background:linear-gradient(to upper left, #055989, #042e4c, #1d697c); */
  background:linear-gradient(to bottom right, #055989, #042e4c, #1d697c) no-repeat;
  height:100%;
  margin:0;
  min-height:100vh;
}
* { 
  box-sizing: border-box; 
  font-family: sans-serif;
}
main {
  width:600px;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  background: #fff;
  padding: 0.75rem;
  border-radius:0.25rem;
  color:#444;
  text-shadow:0.5px 0.5px #777, 1px 1px #999;
  box-shadow:1px 1px #555;
}
h1 { 
  color: white;
  text-align:center;
  text-shadow:1px 1px #888, 2px 2px #444;
  margin: 5px;
}
h3 { 
  color: white;
  text-align:center;
  text-shadow:1px 1px #888, 2px 2px #444;
  margin: 5px;
}

main h1, main h2, main h3, main h4, header, footer {
  color:#555;
  text-shadow:0.5px 0.5px #777, 1px 1px #aaa;
  margin: 0;
  width: 100%;
  text-align:center;
}

header {
  background: #0cc;
  background:linear-gradient(to bottom right, #1f8eed, #00b7eb, #08e8de);
  color:#fff;
  padding: 10px 0;
  width:100vw;
  font-size: 105%;
  text-align: center;
}

footer {
  background: #0aa;
  background:linear-gradient(to bottom right, #1f8eed, #00b7eb, #08e8de);
  color:#fff;
  padding: 10px 0;
  width:100vw;
}
footer a {
  text-decoration:none;
  color:#ddd;
  text-shadow:0.5px 0.5px #777, 1px 1px #aaa;
}

pre, code {
  width: 100%;
  text-align: left;
  background: #0d0332;
  color: #ccff00;
  line-height:150%;
  font-family: 'Lucida Sans Unicode', monospace;
  text-shadow:1px 1px #1c7c7d;
  padding: 0.25rem;
  font-size: 0.8rem;
}
pre code {
  line-height:150%;
  font-size: 0.75rem;
}
pre { 
  white-space: pre-wrap; 
  overflow-x: auto;
}

textarea:placeholder-shown {
  font-size: 110%;
}