@import url('code.css');
@import url('colors.css');

@font-face {
  font-family: 'Public Sans Bold';
  font-display: swap;
  src: url('/assets/fonts/public-sans/ttf/PublicSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Public Sans Regular';
  font-display: swap;
  src: url('/assets/fonts/public-sans/ttf/PublicSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Public Sans Light';
  font-display: swap;
  src: url('/assets/fonts/public-sans/ttf/PublicSans-Light.ttf') format('truetype');
}

@font-face {
  font-family: "JetBrains Mono Medium";
  src: url("/assets/fonts/jetbrains-mono/JetBrainsMono-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono ExtraBold";
  src: url("/assets/fonts/jetbrains-mono/JetBrainsMono-ExtraBold.ttf") format("truetype");
}

:root, [data-bs-theme=dark] {
  --bs-body-color: #fff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #13171f;
  --bs-body-bg-rgb: 19, 23, 31;
  --bs-body-secondary: red;
  --bs-body-secondary-bg: #0f1218;
  --bs-link-color: #70e17b;
  --bs-link-color-rgb: 112, 225, 123;
  --bs-link-hover-color: var(--bs-link-color);
  --bs-link-hover-color-rgb: 112, 225, 123;
  --bs-highlight-bg: var(--bs-link-color);
  --bs-highlight-color: var(--bs-body-bg);
  --bs-btn-primary: var(--bs-link-color);
  --bs-btn-primary-color: var(--bs-link-color);
  --bs-btn-primary-border-color: var(--bs-link-color);
  --bs-btn-primary-focus-shadow-rgb: 112, 225, 123;
  --bs-btn-primary-active-shadow-rgb: 112, 225, 123;
  --bs-btn-primary-active-color: var(--bs-link-color);
  --bs-btn-primary-active-bg: var(--bs-link-color);
  --bs-btn-bg: var(--bs-link-color);
  --bs-btn-border-color: var(--bs-link-color);
  --bs-btn-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-link-color);
  --bs-btn-hover-border-color: var(--bs-link-color);
  --bs-btn-hover-color: #0f1218;
  --bs-btn-primary-bg: var(--bs-link-color);
  --bs-nav-link-color: var(--bs-body-color);
  --bs-border-color: #252f3e;
  --bs-link-hover-decoration: none;
  --bs-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --bs-card-shadow: 0 0.25rem .5rem rgba(0, 0, 0, 0.1);
  --bs-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --bs-box-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, .5);
  --bs-font-monospace: "JetBrains Mono Medium", monospace;
  --bs-font-light: "Public Sans Light", sans-serif;
  --bs-font-bold: "Public Sans Bold", sans-serif;
  --bs-font-regular: "Public Sans Regular", sans-serif;
  --bs-font-serif: "Merriweather Light", sans-serif;
  --bs-font-thin: "Public Sans Thin", sans-serif;
  --bs-font-extra-bold: "Public Sans ExtraBold", sans-serif;
  --bs-font-sans-serif: "Public Sans Regular", sans-serif;
  --bs-secondary: var(--bs-body-color);
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-color: var(--bs-link-color);
  --bs-badge-bg: var(--bs-link-color);
  --bs-border-radius-sm: 0rem;
  --bs-selection-bg: var(--bs-link-color);
  --bs-selection-color: var(--bs-body-bg);
  --bs-text-bg-primary: #face00;
  --bs-text-bg-success: #4866ff;
  --bs-card-hover-bg: #0f1218;
  --bs-text-secondary: var(--bs-secondary);
  --bs-form-control-color: var(--bs-body-color);
  --bs-form-control-bg: var(--bs-body-bg);
  --bs-form-control-border-color: var(--bs-border-color);
  --bs-form-control-focus-border-color: var(--bs-link-color);
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
  --bs-form-control-focus-color: var(--bs-body-color);
  --bs-text-opacity: .5;
  --bs-nav-link-font-size: 1.1em;
  --bs-navbar-brand-margin-end: .5rem;
}
.navbar {
  --bs-navbar-brand-margin-end: .25rem;
}

.nav-domain-link {
  font-family: var(--bs-font-bold);
  text-decoration: none;
  font-size: var(--bs-navbar-brand-font-size);
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  color: var(--bs-link-color);
}

.icon-link {
  display: inline;
  color: #fff;
}

.form-control {
  color: var(--bs-body-color) !important;
}

.form-control:focus {
  border-color: var(--bs-body-color);
  box-shadow: 0 0.25rem 0.5rem #252f3e;
}

::placeholder, ::-ms-input-placeholder {
  color: var(--bs-body-color);
  opacity: var(--bs-text-opacity);
}

input[type="submit"] {
  min-width: 80px;
}

/* General */

body {
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  background-color: var(--bs-body-bg);
  font-family: var(--bs-font-sans-serif);
}

.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: var(--bs-font-bold);
}

h1, a.btn, .feedback {
  letter-spacing: -.01em;
}

body.docs h2,
body.page h2,
body.docs h3,
body.page h3 {
  margin-bottom: 1rem;
  margin-top: 3rem;
}

body[data-bs-theme='dark'] footer a {
  color: white;
}

body[data-bs-theme='dark'] footer img,
body[data-bs-theme='dark'] ul.navbar-nav img {
  filter: invert(1);
}

/* Links */

a.btn-primary, a.btn-primary:visited, .btn-primary {
  background-color: var(--bs-link-color);
  color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-card-shadow);
  cursor: pointer;
  font-family: var(--bs-font-bold);
  padding: .55rem;
  transition: opacity 0.5s ease-in-out;
}

.feedback {
  opacity: 0;
  background-color: var(--bs-link-color);
  color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-card-shadow);
  cursor: pointer;
  font-family: var(--bs-font-bold);
  padding: .55rem;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  text-decoration: none;
  transition: opacity 0.5s ease-in-out;
}

.feedback svg, a.btn svg {
  transition: opacity 0.5s ease-in-out;
}

.feedback:hover, a.btn:hover, .btn-primary:hover {
  background-color: var(--bs-body-bg) !important;
  box-shadow: var(--bs-box-shadow-md) !important;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color) !important;
  transition: all 0.5s ease;
}

.feedback:hover svg, a.btn:hover svg {
  color: var(--bs-body-color) !important;
  transition: all 0.5s ease;
}

/* Cards */

.card {
  width: 100%;
}

a.card {
  text-decoration: none;
  transition: 0.25s filter;
}

a.card:hover {
  filter: brightness(1.25);
}

.card-header>a,
.card-header>a>svg, .card-footer {
  color: inherit !important;
}

/* Badge */

.badge {
  font-family: 'Public Sans Light', sans-serif !important;
  border-radius: 0 !important;
}

/* Images */

main#home img {
  display: block;
  margin: auto;
  margin-bottom: 0.5rem;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown-toggle svg {
  color: var(--bs-btn-color) !important;
  transition: 0.15s color;
}

.dropdown-toggle:hover svg,
.dropdown-toggle:focus svg {
  color: var(--bs-btn-hover-color) !important;
}

/* Timeline */

.timeline {
  border-left: 1px solid hsl(0, 0%, 90%);
  position: relative;
  list-style: none;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .timeline-item:after {
  background-color: hsl(0, 0%, 90%);
  left: -38px;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: '';
}

.timeline-domain {
    margin-bottom: 0.25rem;
}

.timeline-date {
    font-family: var(--bs-font-bold);
}

/* Anchor links */

h2 a#heading-hashtag,
h3 a#heading-hashtag {
  display: none;
}

h2:hover a#heading-hashtag,
h3:hover a#heading-hashtag {
  display: revert;
}

a.cardlink {
  text-decoration: none;
  color: #fff;
}

/* Bootstrap dark mode WCAG compliance override */
[data-bs-theme='dark'] .text-bg-danger .card {
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0);
}

/* autocomplete search menu */
.awesomplete [hidden] {
  display: none;
}

.awesomplete .visually-hidden {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.awesomplete {
  display: block;
  position: relative;
}

.awesomplete>input {
  display: block;
}

.awesomplete>ul {
  position: absolute;
  left: 0;
  z-index: 1;
  min-width: 100%;
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
}

.awesomplete>ul:empty {
  display: none;
}

.awesomplete>ul {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  margin: 0.2em 0 0;
  box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

@supports (transform: scale(0)) {
  .awesomplete>ul {
    transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
  }

  .awesomplete>ul[hidden],
  .awesomplete>ul:empty {
    opacity: 0;
    transform: scale(0);
    display: block;
    visibility: hidden;
    transition-timing-function: ease;
  }
}

.awesomplete>ul>li {
  position: relative;
  padding: 0.7em 1em;
  cursor: pointer;
}

.awesomplete>ul>li:hover {
  background: hsl(200, 40%, 80%);
  color: black;
}

.awesomplete>ul>li[aria-selected='true'] {
  background: hsl(205, 40%, 40%);
  color: white;
}

.awesomplete mark {
  background: hsl(65, 100%, 50%);
}

.awesomplete li:hover mark {
  background: hsl(68, 100%, 41%);
}

.awesomplete li[aria-selected='true'] mark {
  background: hsl(86, 100%, 21%);
  color: inherit;
}

/*  these are some js triggered classes seems like bootstrap purge missed */
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.dropdown-menu.show {
  display: block;
}

.active>.page-link, .page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}

.fa-sr-only, .fa-sr-only-focusable:not(:focus), .sr-only, .sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

svg {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -.125em;
  max-width: 1rem;
  margin: 0 .3rem;
}

svg.sizeicon-xl {
  height: 1.5em;
  max-width: 1.5em;
  line-height: .04167em;
}

table td svg {
  margin: 0;
}

/* new site logo */
#logo {
  max-width: 45px;
  width: 100%;
  height: 100%;
}

.navbar {
  box-shadow: var(--bs-shadow);
}

.navbar-brand {
  font-family: var(--bs-font-bold);
}

.navbar-brand {
  color: var(--bs-body-color) !important;
}

.navbar-brand>svg {
  fill: var(--bs-body-color) !important;
}

.navbar-nav, .nav-link, .navbar-nav .nav-link, a.list-group-item {
  color: var(--bs-body-color) !important;
}

.navbar-brand:hover, .nav-link:hover, .navbar-nav .nav-link:hover, a.list-group-item:hover {
  color: var(--bs-link-color) !important;
}

.navbar-brand:hover>svg {
  fill: var(--bs-link-color) !important;
}
.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-brand-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.biggest {
  width: 55%
}

/* why aren't these in bootstrap? */
.d-none {
  display: none;
}

.pl-0 {
  padding-left: 0;
}

.popoverstyling {
  width: 85vw;
  height: 85vh;
  max-width: 85%;
  max-height: 85%;
  overflow: scroll;
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) -(var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  --bs-modal-padding: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) -(var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);

  --bs-modal-header-border-width: 1px;
  --bs-modal-header-border-color: #495057;

  word-wrap: break-word;
  background-color: #212529;
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);

  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
  padding: 0;
}

dialog[open] {
  animation: slide-in-up .3s cubic-bezier(.25,0,.3,1);
}

dialog::backdrop {
  backdrop-filter: blur(0.25rem);
}

@keyframes slide-in-up {0%{transform:translateY(100%)}}

.modal-dialog .modal-header {
  position: fixed;
  width: 85vw;
  z-index: 5;
  background: black;
}
.modal-dialog .modal-body {
  margin: 5rem 0;
  z-index: 3;
  overflow: scroll;
  max-height: 70vh;
}
.modal-dialog .modal-footer {
  position: fixed;
  bottom: 7vh;
  z-index: 7;
  background: black;
  width: 85vw;
  display: flex;
  justify-content: space-between;
}

.capitalize {
  text-transform: capitalize;
}

.font-weight-bold {
  font-family: var(--bs-font-bold);
}

.site-link.inactive .public-dash-link {
  display: none;
}