: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 bottom right, #055989, #042e4c, #1d697c) no-repeat;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;  margin:0;
  font-size:clamp( 0.75rem, -0.1250.75rem + 0.5vw, 1rem );
  font-size:clamp(0.75rem, 0.625rem + 0.5vw, 1rem);
}
* { 
  box-sizing: border-box; 
  font-family: sans-serif;
}
.wrapper { min-height:100vh;}
main {
  width:600px;
  display: flex;
  flex-direction:column;
  justify-content: start;
  align-items: start;
  text-align: 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, h2, h3 { 
  color: white;
  text-align:center;
  text-shadow:1px 1px #888, 2px 2px #444;
  margin: 5px;
}
h4, h5, h6 { 
  color: white;
  text-align:center;
  text-shadow:0.5px 0.5px #888, 1px 1px #444;
  margin: 5px;
}

h1, main h1 {
  font-size: clamp( 1.2rem, -0.300000000000000041.2rem + 1.2000000000000002vw, 1.8rem );
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
}
h2, main h2 {
  font-size: clamp( 1.15rem, -0.2751.15rem + 1.1vw, 1.7rem);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
h3, main h3 {
  font-size: clamp( 1.15rem, -0.251.15rem + 1vw, 1.65rem );
  font-size: clamp(1.2rem, 0.975rem + 0.9vw, 1.65rem);
}
h4, main h4 {
  font-size: clamp( 1.1rem, -0.251.1rem + 1vw, 1.6rem );
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.55rem);
}
h5, main h5 {
  font-size: clamp( 1.05rem, -0.251.05rem + 1vw, 1.55rem );
  font-size: clamp(1.1rem, 0.925rem + 0.7vw, 1.45rem);
}
h6, main h6 {
  font-size: clamp( 1.0rem, -0.251.0rem + 1vw, 1.5rem );
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
}

main h1, main h2, main h3, main h4, main h6, main h6, header, footer {
  color:#555;
  text-shadow:0.5px 0.5px #777, 1px 1px #aaa;
  margin: 0;
  margin-bottom:0.5%;
  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;
  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;
  background: #0d0332;
  color: #ccff00;
}
pre { 
  white-space: pre-wrap; 
  overflow-x: auto;
}

textarea:placeholder-shown {
  font-size: 110%;
}
label, input[type="text"] {
  width: 48%;
  display:inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
label {
  margin-right:2px;
  margin-left:2px;
  padding: 1px;
}

body {
/*   background: #000;
 */
  font-family: sans-serif;
  margin: 5px auto;
  display:flex;
  flex-direction:column;
  text-align: center;
  justify-content: center;
  align-items: center;
}
main {
  display:flex;
  /* flex-direction:row; */
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-basis:90%;
  background: #fff;
  padding: 20px;
  color: #333;
  width: 90%;
  max-width:90%;
  font-size: 0.9rem;
  margin-top: 5%;
}
h1, h2, h3, h4, h5, h6 {
  color:#eee;
}
main h1, main h2, main h3, main h4, main h5, main h6 {
  color:#444;
  margin-bottom: 0.5%;
}

pre {
  /* font-size: 1.2rem; */
}
pre li {
  margin: -8px;
}
pre h1 {
  margin: 0;
  /* font-size: 1.75rem; */
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  body { font-size: 0.8rem; }
  main { width: 90%;max-width: 90%;font-size: 0.8rem;  }
  h1, main h1 { font-size: 1.25rem; }
  h2, main h2 { font-size: 1.2rem; }
  h3, main h3 { font-size: 1.15rem; }
  h4, main h4 { font-size: 1.1rem; }
  h5, main h5 { font-size: 1.05rem; }
  h6, main h6 { font-size: 1.0rem; }
  pre { font-size: 0.8rem; }
  input[type="text"], button, textarea { width: 90%; max-width:90%; min-width:90%;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* h1, main h1 { font-size: 1.25rem; }
  body { font-size: 0.75rem; } */
  input[type="text"], textarea { width: 90%; max-width:90%; min-width:90%;}
  label, input[type="text"] {
    width: 48%;
    display:inline-flex;
  }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /* main h1 { font-size: 1.5rem; }
  body { font-size: 0.8rem; } */
  h2 {color: white;}
  main { width: 700px; }
  label, input[type="text"] {
    width: 48%;
    display:inline-flex;
  }

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* body { font-size: 0.85rem; }
  main h1 { font-size: 1.75rem; } */
  main { width: 800px; }
  label, input[type="text"] {
    width: 48%;
    display:inline-flex;
  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   /* body { font-size: 0.95rem; } */
  body { font-size: 1rem; }
  main { width: 90%;max-width: 980px;font-size: 1rem;  }
  h1, main h1 { font-size: 1.8rem; }
  h2, main h2 { font-size: 1.75rem; }
  h3, main h3 { font-size: 1.7rem; }
  h4, main h4 { font-size: 1.65rem; }
  h5, main h5 { font-size: 1.6rem; }
  h6, main h6 { font-size: 1.5rem; }
  pre { font-size: 1rem; }
  label, input[type="text"] {
    width: 48%;
    display:inline-flex;
  }

}