: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: 0rem;
  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%;
}

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%;
}

h1 { 
  text-align: center;
  margin: 0 auto;
  color:white;
}

main {
  font-family: sans-serif;
  /* width: var(--main-width); */
  width: fit-content;
  margin:0 auto;
  /* background:white; */
  flex-direction:column;
  border-radius: 0.5rem;
  border: 0px solid #aaa;
  display:flex;
  min-height:90vh;
  max-height:100%;
  text-align: center;
  color: #fff;
}
section, #nav {
  display:flex;
  flex-direction:row;
  flex:1 1 100%;
  width: clamp(400px,800px,80vw);
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow:hidden;
  /* height: clamp(400px, 800px, 100%); */
  min-height:800px;
  max-height:100%;
  height:100%;
}
/* section {
  min-height:90vh;
  width:100%;
  background: #fff;
  height: clamp(400px, 90vh, 800px);
} */
nav {
  display:flex;
  flex-direction:row;
  flex:0 1 100%;
  width: clamp(400px,800px,80vw);
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow:hidden;
}
.nav_select {
  display:flex;
  flex-direction:row;
  text-align: center;
  justify-content: center;
  align-items: center;
  height:30px;
  flex:0 1 90%;
  width: clamp(360px,700px,80vw);
}
.nav_btn {
  margin: 0;
  display:flex;
  flex-direction:row;
  flex:1 1 5%;
  width:20px;
  height:30px;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  text-shadow:0.5px 0.5px #777, 1px 1px #aaa;
  padding-bottom:10px;
}
.rotate_180 {
  transform: rotate(180deg);
  padding-top:-10px;
}

ol, ul {
  margin-left: 0.5rem;
}

li {
  line-height:1.5;  
}
.arrow_forward {
  background:url(https://css.netcentrx.net/icons/arrow_forward-v1.png) no-repeat #bbb;
  width: 30px;
  height: 30px;
  background-size: 30px;
  border-radius:50%;
  transition:1s;
}
.arrow_backward {
  background:url(https://css.netcentrx.net/icons/arrow_backward-v1.png) no-repeat #bbb;
  width: 30px;
  height: 30px;
  background-size: 30px;
  border-radius:50%;
  transition:1s;
}
/* .arrow_forward:hover {
  background:url(https://css.netcentrx.net/icons/arrow_forward-v1.png) no-repeat transparent;
  transition:1s;
}
.arrow_backward:hover {
  background:url(https://css.netcentrx.net/icons/arrow_backward-v1.png) no-repeat transparent;
  transition:1s;
} */

h3.h3 {
  margin: 0 5px;
  color: #000;
}
h3.h3 div {
  color:#000;
}
option:nth-child(odd) { background:#999;color:#fff}
.href { cursor:pointer; }
.red { color:red !important; }