_styles_project.scss

@import "fonts_project.scss";
@import "content_project.scss";
@import "image-modal_project.scss";
@import "elements_project.scss";
@import "footer_project.scss";
@import "variables_project.scss";
@import "landing_project.scss";
@import "_navbar_project.scss";
@import "tax_project.scss";
@import "search_project.scss";

.navbar-dark {
  min-height: 5rem;
  padding: 0 5rem;
  border-bottom: 1px solid #333;
  background-color: $dark !important;
  .dropdown-menu {
    background-color: $dark;
    box-shadow: 0px 4px 20px 0px rgba(0, 211, 169, 0.2);
    .dropdown-item {
      color: $white;
      &:hover {
        background: $primary;
      }
    }
    .dropdown-divider {
      margin: 0;
      border-top: 1px solid $primary;
    }
  }
}

.nav-link.active {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(
      to bottom,
      rgba($dark, 0.2) 30%,
      rgba($primary, 0.3) 60%,
      $primary 90% 100%
    )
    1;
  padding-bottom: 0.3rem;
  align-items: center;
  justify-content: center;
  align-self: center;
  display: flex;
  align-content: center;
  padding: auto;
  margin: auto;
  // background-color: linear-gradient(to right, rgba($dark,.2) 30%, rgba($primary,.3) 60%, $primary 90% 100%) 1;
}

// Page Layout Sections
.td-home {
  background-color: $dark;
  overflow-x: hidden;
}
// .td-cover-block--height-full {
//   min-height: 90vh;

// }
.td-outer {
  margin-top: 3rem;
}

// Main Middle Body
.td-content {
  h2 {
    color: $casper;
  }
  // Inline code
  p code,
  li > code,
  table code {
    color: inherit;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    word-break: normal;
    background-color: rgba($black, 0.05);
    border-radius: $border-radius;

    br {
      display: none;
    }
  }

  // Code blocks
  pre {
    word-wrap: normal;
    background-color: $gray-900;
    padding: $spacer;

    > code {
      background-color: inherit !important;
      padding: 0;
      margin: 0;
      font-size: 100%;
      word-break: normal;
      white-space: pre;
      border: 0;
    }
  }
}

// Links

a {
  color: $primary;
  text-decoration: none;
}
a:hover {
  color: $white;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

// Taxonomy
.article-meta-bg {

    background-color: $gray-900;
    padding: .5rem;
    padding-left: 1rem;

}

.taxonomy {
  // .taxonomy-terms-cloud

  .taxonomy-term {
    background: $gray-600;
    border-width: 0;
    border-radius: 0 3px 3px 0;
    color: $white;
    display: inline-block;
    font-size: 1em;
    line-height: 1.5em;
    min-height: 1.5em;
    max-width: 100%;
    padding: 0 0.5em 0 1em;
    position: relative;
    margin: 0 0.5em 0.2em 0;
    text-decoration: none;
    transition: color 0.2s;
    clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
    clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);

    .taxonomy-count {
      color: $dark !important;
    }
    &:hover {
      background-color: $primary;
      color: $white;

      .taxonomy-count {
        color: $dark !important;
      }
    }

    &:hover::before {
      background: $primary;
    }
  }
  .article-teaser {
    &.card {
      padding: 1em;
      margin-bottom: 1.5em;
      background-color: $dark;
    }

    .breadcrumb {
      margin-bottom: 0em;
      font-size: 0.85rem;
    }

    .article-meta-bg {
      margin-bottom: 0em;
    }
  }
}

// Footer
.td-footer {
  background-color: $black;
  // bottom: 0%;
  z-index: 5;
}
.td-sidebar {
  background-image: linear-gradient(
    to top,
    #1e2117,
    #1d1912,
    #18120e,
    #0f0a09,
    #000000
  );
}

// Left sidebar
.td-sidebar-nav {
  overflow: hidden;
  padding: 0px;
  &__section-title {
    a {
      color: $gray-400;
      font-weight: $font-weight-bold;
    }
  }
  .td-sidebar-link {
    &__page {
      color: $gray-400;
      font-weight: $font-weight-light;
    }
    &__section {
      margin-top: 1rem;
      font-family: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    }
  }
  a {
    &:hover {
      color: $white;
      text-decoration: none;
    }
    &.active:not(.tree-root) {
      border-width: 1px;
      border-style: solid;
      border-image: linear-gradient(
          to left,
          rgba($dark, 0) 30%,
          rgba($primary, 0.3) 60%,
          $primary 90% 100%
        )
        1;
      background-image: linear-gradient(
          to left,
          rgba($dark, 0.2) 30%,
          rgba($primary, 0.3) 60%,
          $primary 90% 100%
        )
        1;
      padding: 0.25rem;
      padding-left: 0.5rem !important;
      // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f);
      // background-color: rgba($primary, .05);
      color: $secondary;
    }
    &.active.tree-root {
      border: 2px solid $lightslategray !important;
      padding: 0.25rem;
      padding-left: 0.5rem !important;
      background-color: rgba($lightslategray, 0.1);
      color: $white;
    }
  }
}

// Right sidebar
.td-sidebar-toc {
  line-height: 1.25rem;
  border-left: 1px solid $border-color;
  background-image: linear-gradient(
    to top,
    #1e2117,
    #1d1912,
    #18120e,
    #0f0a09,
    #000000
  );
  @supports (position: sticky) {
    position: sticky;
    top: 4rem;
    padding-top: 3rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
  }
  .taxo-categories {
    margin-top: 2rem;
  }
}
.td-page-meta {
  a {
    display: block;
    color: $gray-400;
    line-height: 1.65rem;
    font-weight: $font-weight-medium;

    &:hover {
      color: $white;
      text-decoration: none;
    }
  }
  .td-page-meta--project-issue {
    visibility: hidden;
  }
}

.td-toc {
  margin-top: 2rem;
  #TableOfContents {
    a {
      color: $lightslategray;

      &:hover {
        color: $white;
        text-decoration: none;
      }
    }
  }
}

// pageinfo
.pageinfo {
  font-weight: $font-weight-medium;
  background: $black;
  font-family: "Open Sans";
  border-style: solid;
  border-color: #00b39f;
}

// Style alert boxes.

.alert {
  font-weight: $font-weight-medium;
  background: $gray-900;
  color: inherit;
  border-radius: 0;

  &.alert-custom {
    background-color: $gray-900;
    border-style: solid;
    border-width: 0 0 0 4px;
  }
}

// Dashboard

.l5btn {
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 4px solid rgba(0, 179, 159, 0.4);
  background: #000;
  color: $white;
  transition: color 0.8s;
  transition: background-color 0.8s;
  > img {
    width: 2rem;
    margin-right: 0.5rem;
  }
  > img:hover {
    filter: brightness(0) invert(1);
  }
  @media (max-width:768px){
    width: 277px;
  }
}

.dashboard {
  font-weight: 800;
  margin-bottom: 4rem;
  font-size: 5rem;
  text-align: left;
  background: linear-gradient(
      217deg,
      rgba(249, 245, 13, 0.26),
      rgba(223, 255, 219, 0.57) 9.03%
    ),
    linear-gradient(
      127deg,
      rgba(249, 245, 13, 0.7),
      rgba(223, 225, 199, 0.1) 41.12%
    ),
    linear-gradient(
      336deg,
      rgba(249, 245, 13, 0.1),
      rgba(239, 239, 251, 0.81) 0%
    );
  background-position: 0% 0%, 0% 0%;
  box-sizing: auto;
  color: rgba(0, 0, 0, 0);
  display: block;
  text-rendering: optimizelegibility;
  background-clip: text, text;
  @media (max-width:768px){
    font-size: 3.5rem;
    text-align: center;
  }
  // @media (max-width:1200px){
  // }
  
}
.dash-tangle {
  width: 78.14231rem;
  height: 74.72rem;
  transform: rotate(-55.68deg);
  flex-shrink: 0;
  overflow: hidden;
  background-image: linear-gradient(
    180deg,
    rgba(0, 179, 115, 0) 0%,
    rgba(0, 179, 159, 0.3) 100%
  );
  position: absolute;
  top: -18rem;
  right: -32rem;
  z-index: -5;
  background-clip: content-box;
  -webkit-background-clip: padding-box;

  @media (max-width: 1440px) {
    top: -5rem;
    right: -28rem;
    position: fixed;
  }
  @media (max-width: 768px) {
    width: 129.14rem;
    top: 7rem;
    right: -70rem;
    position: fixed;
  }
}

.dash-ircle-container {
  height: calc(74.125rem - 8rem);
  position: absolute;
  top: 8rem;
  left: -24rem;
  overflow: hidden;

  > .dash-ircle {
    width: 74.125rem;
    height: 74.125rem;
    flex-shrink: 0;
    background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(0, 179, 159, 0.2) 0%,
      rgba(0, 179, 159, 0) 100%
    );
    position: absolute;
    overflow: hidden;
    background-clip: border-box;

    z-index: -5;
  }
}

@keyframes tipsy {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}
.dash-sign-container {
  display: flex;
  align-items: center;
  text-align: right;

  @media (max-width: 768px) {
    flex-wrap: wrap;
    justify-content: center;
  }

  a.dash-sign {
    color: #fffbf1;
    text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
    font-size: 28px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0px;
    position: relative;
    width: auto;
    white-space: nowrap;
    // top: 50%;
    // left: 50%;
    padding: 2rem;
    margin: 15rem;
    transform: translateX(-50%) translateY(-50%);
    &:hover {
      color: "#EBC017" !important;
    }
    @media (max-width: 1440px) {
      margin: 0rem;
    }
  }

  a.dash-sign:before,
  a.dash-sign:after {
    content: "";
    padding: 0.9em 0.4em;
    position: absolute;
    left: 50%;
    width: 100%;
    top: 50%;
    display: block;
    border: 8px solid $primary;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    animation: 6s alternate ease-in-out tipsy;
    // animation-play-state: paused;
  }

  a.dash-sign:before {
    border-color: $primary $secondary rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    z-index: -1;
  }

  a.dash-sign:after {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) $primary $secondary;
    box-shadow: 25px 25px 25px rgba(46, 46, 49, 0.8);
  }

  a.dash-sign:visited {
    color: $white;
    // animation-play-state: running;
  }
  a.dash-sign:hover {
    color: #ebc017 !important;
  }
}
// Cards
.card {
  background-color: $dark;
}
.card-header {
  font-weight: bold;
  font-size: larger;
}
.card-header .bg-white {
  background-color: $dark;
}
.bg-dark {
  background-color: $dark;
}

.sc-imWYAI.sc-fTFjTM.dCEJze.hRziAa {
  color: red;
}

.click-to-copy button{
  aspect-ratio: 1;
  box-shadow: 1px 1px 5px #636567!important;
  top: 6px!important;
  right: 10px!important;
}