@import url("fonts.css");

/* ================================
   Base
================================ */

html,
body {
  font-family: "Titillium Web";
  font-family: "EasyReadingPRO";
  scroll-padding-top: 4rem;
  overflow-wrap: break-word;
}

section {
  padding-top: 4rem;
  width: 50%;
  margin: auto;
}

blockquote {
  margin: 0;
  padding-left: 10px;
  font-family: "Titillium Web";
}

hr {
  border: 1px solid currentColor;
  border-radius: 5px;
  margin: 50px 0;
}

mark {
  forced-color-adjust: none;
  background-color: #ffeb3b;
}

textarea {
  display: block;
  width: 100%;
  min-height: 100vh;
  border: none;
  font-size: 1.2rem;
  padding: 1rem;
  resize: none;
  padding-top:0;
  font-family: 'Roboto'; /* keeps spacing consistent */
  white-space: pre-wrap;                         /* wraps long lines without breaking spacing */
  word-wrap: break-word;                         /* ensures lines wrap nicely on small screens */
  overflow-x: hidden;                            /* removes horizontal scroll */
  overflow-y: auto;                              /* vertical scroll only */
  width: 100%;                                   /* responsive full width */
  box-sizing: border-box;                        /* prevents horizontal overflow */
  font-weight: 600;


}

/* ================================
   Headings
================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  padding-top: 2rem;

}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  font-size: inherit;
  font-family: inherit;
  background: none;
  padding: 0;
}

/* ================================
   Custom notices
================================ */

.alert-primary,
.alert-success,
.alert-warning,
.alert-danger,
.alert-pride {
  padding: 10px 0 0 10px;
  background-image: none;
}

.custom-alert {
  border-left: 8px solid currentColor;
  padding-bottom: 0;
  font-family: monospace;
  font-size: .9em;
  margin: 3em 0;
  margin-top:4em!important;
  margin-bottom:4em!important;
}

.alert-pride {
  border-left: 10px solid;
  border-image: linear-gradient(0deg,red,orange,yellow,green,blue,indigo,violet)1;
  background-image: linear-gradient(0deg,red,orange,yellow,green,blue,indigo,violet)1;
  background-color:inherit!important;
  color:inherit!important;
}

.alert-primary    { background-color:  #fff!important; color: #000 !important; border-color:#06c !important; }
.alert-success    { background-color:  #fff!important; color: #000 !important; border-color: #019c56 !important; }
.alert-warning    { background-color:  #fff!important; color: #000 !important; border-color:#995c00 !important; }
.alert-danger     { background-color: #fff!important; color: #000 !important; border-color: #ff1128 !important; }


.alert-dismissible .btn-close {
    position: absolute!important;
    top: 0!important;
    margin-right:-0.2rem;
    background-color: #ccc!important;
    padding: 0.4rem;
    border-radius: 4em;
    opacity:1!important;
}



.alert-content {
  font-size: 1em;
  font-family: Roboto;
  padding: .4em 0 1.2em 1.5em;
}


.alert {padding:0!important;padding-top:1rem!important;padding-left:0.5rem!important;padding-bottom:0.4rem!important}

/* ================================
   Accordions
================================ */

.accordion-header .accordion-button {
border-top:0!important;
}

/* ================================
   Tables
================================ */

table {
  width: 100%;
  margin: 1em 0;
  border: 1px solid #333;
  border-spacing: 0;
}

table td,
table th {
  padding: .5rem;
  border: 1px dotted #ccc;
}

table th {
  text-align: center;
}

tbody {
  background: #fff;
  color: black;
}

thead {
  font-size: 1rem;
  border: 2px solid #333;
  background: #d2d2d2;
}

table a {
  text-decoration: none;
}

/* sortable tables */

table.sortable tbody {
  color: black;
  font-size: 14px;
  border: 1px solid #000;
}

table.sortable td,
table.sortable th {
  padding: .125em .25em;
  width: 8em;
}

table.sortable th:nth-child(5) {
  width: 10em;
}

table.sortable td.num {
  text-align: right;
}

table.sortable tbody tr:nth-child(odd) {
  background: #eee;
}

table.sortable th button {
  padding: 4px;
  margin: 1px;
  font-weight: bold;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

table.sortable th button span {
  position: absolute;
  right: 4px;
}

table.sortable th button:hover,
table.sortable th button:focus {
  padding: 2px;
  border: 2px solid currentcolor;
  background: #e5f4ff;
}

/* ================================
   Code
================================ */

code,
pre code {
  font-family: monospace;
  font-size: 1em;
  background: #555;
  color: white;
}

code {
  border: 0px dotted #666;
  border-radius: 2px;
}

pre {
  margin: 2em 0;
  background: #555;
  overflow: auto;
}

pre code {
  display: block;
  border: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bg-code,
.code- {
  background: #555;
  color: white;
}

.code-lang-xml,
.code-lang-js,
.code-lang-php,
.code-lang-html {
  padding: 1em;
}

/* ================================
   TOC
================================ */

#toc {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  transition: left .3s ease-in-out;
}

#toc.open {
  left: 0;
}

#toc ul {
  list-style: none;
  padding: 0;
  margin-left: 1em;
}

#toc li {
  margin: 5px 0;
}

#toc a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  color: white;
  font-family: sans-serif;
}

#toc a:hover {
  color: #fff;
  text-decoration: underline;
}

#toc a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* ================================
   Buttons
================================ */

#btn-back-to-top {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -1em;
  z-index: 1000;
  background: #2c3e50;
  border-radius: 4em;
  display: none;
}

#btn-tools {
  position: absolute;
  top: 0;
  right: 0;
}

.copy-button { top: 0 }
.collapse-button { top: 45px }

/* ================================
   Animations
================================ */

.fade-load {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1.6s ease, filter 1.6s ease;
}

.fade-load.visible {
  opacity: 1;
  filter: blur(0);
}

.fade-in-blur {
  filter: blur(8px);
  opacity: 0;
  transition: filter 5s ease, opacity 5s ease;
}

.fade-in-blur.visible {
  filter: blur(0);
  opacity: 1;
}

.fade-out {
  opacity: 0;
  transition: opacity .5s ease-out;
}

/* ================================
   Misc
================================ */


.kicker {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase !important;
  color: #666;
  margin-bottom: 0;
  padding-bottom: 0;
  float: left;
  font-family: Roboto Mono;
}

kbd {
  color: #222;
  background: #eee;
  font-family: serif;
  font-weight: bold;
  border: 1px solid #666;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  padding: 2px 5px;
  border-radius: .25rem;
  font-family: Roboto Mono;
}

details {
  background: #555;
  border-radius: 4px;
  padding: .5em .5em 0;
  margin: 50px 0;
}

details summary {
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  list-style: none;
}

details[open] summary {
  margin-bottom: .5em;
}

details[open] summary ~ * {
  animation: open .3s ease-in-out;
}

@keyframes open {
  from { opacity: 0 }
  to { opacity: 1 }
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  font-weight: bold;
  text-transform: uppercase;
  font-family: monospace;
  font-size: .8em;
}

.anchor-link {
  margin-right: 8px;
  float: left;
}

a[target="_blank"]::after {
    forced-color-adjust: none;
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25rem;
  vertical-align: text-top;
  background-color: currentColor!important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

*:focus {
  outline: 2px #f9f9f9 solid;
  box-shadow: 0 0 0 4px #193146;
}

.pe-add { cursor: pointer }

.bg-animated {
  background-image: url("../assets/animated-gradient.svg");
  background-size: cover;
}

/* display sizes */

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Titillium Web";
}
.display-1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 3.4rem);font-weight: 300;line-height: 1.2;padding-top:0 }
.display-2 { font-size: clamp(2.2rem, 1.4rem + 3.5vw, 3.2rem); }
.display-3 { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.6rem); }
.display-4 { font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2.2rem); }
.display-5 { font-size: clamp(1.3rem, 1.1rem + 2vw, 1.8rem); }
.display-6 { font-size: clamp(1.2rem, 1rem + 1.5vw, 1.6rem); }







ul, ol {
margin-bottom:2em!important;
}

ul li:first-child,
ol li:first-child {
  margin-top: 0;
}

li p:first-child {
  margin-top: 0;
}

blockquote, .blockquote {
padding-left:0.5em;
margin:1em;
padding-bottom:0em;
} 

blockquote p  {
margin:0.5em;
padding-bottom:1em; 
} 



button[type="button"] {
font-family:monospace!important;
}


.code-details {
clear:both!important;
margin-top:2em!important;
margin-bottom:2em!important;
}