* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



:root {
  --canvas-bg: #0e0e0e;
  --scheme-bg: #161616;
  --tp: #16161600;
  --scheme-post-bg: #161616de;
  --scheme-post-content-bg: #3131317a;
  --scheme-grey-bg: rgb(95, 95, 95);
  --scheme-red: #89170E;
  --text-white: white;
  --text-grey: rgba(255,255,255,.5);
  --code: rgb(255, 255, 255);
}


* {
  scrollbar-width: thin;
  scrollbar-color: var(--scheme-red) var(--scheme-bg);
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  width: 5px;
}
*::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: var(--scheme-bg);
}

*::-webkit-scrollbar-track:hover {
  background-color: var(--scheme-bg);
}

*::-webkit-scrollbar-track:active {
  background-color: var(--scheme-bg);
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--scheme-red);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #99362f;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #99362f;
}



body,
html {
  min-height: 100%;
  width: 100%;
  margin: 0;
  background-color: #000;
  /* overflow-y: auto; */
}

.bs-icon {
  --bs-icon-size: 0.75rem;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: var(--bs-icon-size);
  width: calc(var(--bs-icon-size) * 2);
  height: calc(var(--bs-icon-size) * 2);
  color: var(--primary);
}

.bs-icon-xs {
  --bs-icon-size: 1rem;
  width: calc(var(--bs-icon-size) * 1.5);
  height: calc(var(--bs-icon-size) * 1.5);
}
.bs-icon-sm {
  --bs-icon-size: 1rem;
}
.bs-icon-md {
  --bs-icon-size: 1.5rem;
}
.bs-icon-lg {
  --bs-icon-size: 2rem;
}
.bs-icon-xl {
  --bs-icon-size: 2.5rem;
}
.bs-icon.bs-icon-primary {
  color: var(--white);
  background: var(--primary);
}
.bs-icon.bs-icon-primary-light {
  color: var(--primary);
  background: rgba(0, 123, 255, 0.2);
}
.bs-icon.bs-icon-semi-white {
  color: var(--primary);
  background: rgba(255, 255, 255, 0.5);
}
.bs-icon.bs-icon-rounded {
  border-radius: 0.5rem;
}
.bs-icon.bs-icon-circle {
  border-radius: 50%;
}




.darknav {
  background-color: var(--scheme-bg) !important;
  position: sticky;
  width: 100%;
  z-index: 10 !important;
  top: 0;
  right: 0;
}
#navLinks:hover {
  color: var(--text-white) !important;
  text-decoration: underline var(--scheme-red) 3px;
}
#navSocial {
  color: var(--text-grey);
}
#navSocial:hover {
  color: var(--scheme-red);
}
.wrap {
  animation: 0.9s infinite blinkTextCursor;
}
@keyframes blinkTextCursor {
  from {
    border-color: transparent;
  }
  to {
    border-color: var(--scheme-red);
  }
}
.navbar-toggler {
  border-color: transparent !important;
}

#particles {
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.pg-canvas {
  position: fixed;
  background-color: var(--canvas-bg);
  height: 100%;
  width: 100%;
}
#welcome{
  margin: 25px 0 25px 0;
  color: var(--text-white);
  background-color: var(--scheme-post-bg);
  /* text-align: center; */
  user-select: none;
  font-family: Aldrich;
  padding: 10px;
  border-left: var(--scheme-red) solid 5px!important;
  border-radius: 5px;
}

#alert{
  margin: 25px 0 25px 0;
  color: var(--text-white);
  background-color: var(--scheme-post-content-bg);
  /* text-align: center; */
  user-select: none;
  font-family: Aldrich;
  padding: 10px;
  border: var(--scheme-red) solid 2.5px!important;
  border-radius: 5px;
}


.joinBtn {
  background-color: var(--scheme-red);
  color: var(--text-grey);
  padding: 10px;
  display: block;
  border-radius: 10px;
  border-color: transparent;
  text-align: center;
  text-decoration: none;
}
.joinBtn:hover {
  color: var(--text-white);
  text-decoration: none;
}

#content {
  z-index: 1;
  padding-bottom: 3rem;
}
.fit-cover {
  object-fit: cover;
}
.codeBracket {
  color: var(--code);
  background-color: rgb(0, 0, 0);
  border-radius: 10px;
  border: #515151 inset 2px;
  padding: 10px;
  user-select:text;
}

.quoteBracket {
  color: var(--text-white);
  background-color: var(--scheme-grey-bg);
  padding: 10px 5px;
  border-left: var(--scheme-red) solid 5px !important;
  border-radius: 10px;
}
.footer {
  margin: 0 !important;
  position: relative;
  display: block;
  /* height: 100%; */
  padding: 10px;
  width: 100%;
  background-color: var(--scheme-post-bg);
  color: white;
  text-align: center;
  margin-top: 50px !important;
  /* z-index: 1; */
}
.footerContent {
  padding: 10px;
}