$color-base1: #ffffff;
$color-base2: #fafafa;
$color-base3: #f3f3f3;
$color-base4: #c9c9c9;
$color-base5: #9a9a9a;
$color-base6: #3d3d3d;
$color-base7: #373737;
$color-accent1: #e32a6d;
$color-accent2: #bc1150;

$themes: (
  default: (
    base1: $color-base1,
    base2: $color-base2,
    base3: $color-base3,
    base4: $color-base4,
    base5: $color-base5,
    base6: $color-base6,
    base7: $color-base7,
    accent1: $color-accent1,
    accent2: $color-accent2,
    bg-up: $color-base1,
    bg-down: $color-base2,
    boxed-title: $color-base7,
    boxed-bg-title: $color-base4,
    boxed-bg: $color-base3,
    over-bg: $color-base3,
    theme-toggle: $color-base3,
    hrefbg: lighten($color-accent1, 44%)
  ),
  dark: (
    base1: $color-base7,
    base2: $color-base6,
    base3: $color-base5,
    base4: darken($color-base4, 20%),
    base5: $color-base3,
    base6: $color-base2,
    base7: $color-base2,
    accent1: $color-accent1,
    accent2: $color-accent2,
    bg-up: darken($color-base6, 12%),
    bg-down: darken($color-base7, 12%),
    boxed-title: $color-base5,
    boxed-bg-title: darken($color-base6, 14%),
    boxed-bg: darken($color-base7, 14%),
    over-bg: darken($color-base7, 4%),
    theme-toggle: $color-base6,
    hrefbg: darken($color-accent1, 38%)
  )
);

$base1: 'base1';
$base2: 'base2';
$base3: 'base3';
$base4: 'base4';
$base5: 'base5';
$base6: 'base6';
$base7: 'base7';
$accent1: 'accent1';
$accent2: 'accent2';
$bg-up: 'bg-up';
$bg-down: 'bg-down';
$boxed-title: 'boxed-title';
$boxed-bg-title: 'boxed-bg-title';
$boxed-bg: 'boxed-bg';
$over-bg: 'over-bg';
$theme-toggle: 'theme-toggle';
$hrefbg: 'hrefbg';

$theme-map: null;
@mixin themed() {
  @each $theme, $map in $themes {
    .theme--#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function t($key) {
  @return map-get($theme-map, $key);
}

/*# sourceMappingURL=styles.css.map */
html {
  font-family: Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 300;
  @media (max-width: 580px) {
    font-size: 18px;
  }
  @media print {
    font-size: 17px;
    margin: 0;
  }
}
body {
  @include themed() {
    color: t($base7);
  }
  @include themed() {
    background: t($bg-up);
  }
  margin: 0;
  margin-bottom: 4rem;
  @media print {
    margin: 0;
    color: #000000 !important;
  }
  &.lock {
    @media (max-width: 580px) {
      overflow: hidden;
    }
  }
}
h1,
h2,
h3 {
  font-weight: 300;
  line-height: 1.1em;
  margin-bottom: 0.5em;
}
h2 {
  @include themed() {
    color: t($accent1);
  }
}
a {
  @include themed() {
    color: t($base7);
  }
}
p {
  margin-top: 0.5em;
  text-align: justify;
  @media (max-width: 580px) {
    text-align: left;
  }
}
iframe {
  width: 100%;
  height: 500px;
  @media (max-width: 580px) {
    height: 250px;
  }
}
.h {
  display: none;
}
.background {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: -1;
  &::after {
    content: '';
    position: absolute;
    @include themed() {
      background: t($bg-down);
    }
    width: 140%;
    height: 100%;
    transform: rotate(-20deg);
    transform-origin: bottom;
    bottom: -40%;
    @media (max-width: 580px) {
      width: 200%;
      bottom: -40%;
    }
  }
  @media print {
    display: none;
  }
}

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  @include themed() {
    color: t($theme-toggle);
  }
  border-radius: 50%;
  cursor: pointer;
  @media (max-width: 580px) {
    position: relative;
    float: right;
    top: 0;
    right: 0;
  }
  @media print {
    display: none;
  }
}

.sun {
  display: none;
}
.moon {
  display: block;
}

.theme--dark {
  .sun {
    display: block;
  }
  .moon {
    display: none;
  }
}

.top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  justify-content: left;
  @media (max-width: 580px) {
    display: block;
    width: 90%;
    padding: 1rem;
    font-size: 0.8rem;
  }
  @media print {
    display: block;
  }
  span {
    @include themed() {
      color: t($accent1);
    }
  }
}

.pic-wrapper {
  max-width: 100%;
  overflow: hidden;
  -webkit-clip-path: url(#svg-shape);
  clip-path: url(#svg-shape);
  @media (max-width: 580px) {
    flex-basis: 40%;
  }
  img.pic {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}

.container_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  @media (max-width: 580px) {
    display: block;
    padding: 0 1rem;
    margin: 0 auto;
  }
}
.nostr_link {
  flex-basis: 15%;
  text-align: right;
  text-decoration: none;
  @media print {
    display: block;
    text-align: right;
  }
}

.container {
  display: flex;
  width: 70%;
  justify-content: space-between;
  gap: 4.8vw;
  overflow: visible;
  @media (max-width: 580px) {
    display: block;
    width: 100%;
  }
  @media print {
    width: 100%;
  }

  .try {
    @include themed() {
      background-color: t($over-bg);
    }
    padding: 1.6rem 1.6rem 1rem 1.6rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    font-size: 0.8rem;
    @media (max-width: 580px) {
      padding: 1rem 1rem 0.8rem 1rem;
    }
    .tryForm {
      display: flex;
      align-items: center;
      @media (max-width: 580px) {
        flex-wrap: wrap;
        justify-content: center;
      }

      input,
      button {
        flex-basis: 90%;
        width: 100%;
        padding: 0.5rem;
        font-size: 1.2rem;
        border-radius: 8px;
        @media (max-width: 580px) {
          flex-basis: 100%;
        }
      }
      div {
        font-size: 1.4rem;
        @media (max-width: 580px) {
          margin-bottom: 0.4rem;
        }
      }
      input {
        @include themed() {
          color: t($base7);
          background-color: t($bg-up);
          // border: 1px solid t($base4);
          border: none;
        }
        margin-left: 0.3rem;
        @media (max-width: 580px) {
          margin-left: 0;
          border-radius: 8px 8px 0px 0px;
        }
        &:focus {
          outline: none; /* Remove the default outline */
        }
      }
      ::placeholder {
        @include themed() {
          color: t($base4);
        }
      }
      button {
        flex-basis: 10%;
        @include themed() {
          background-color: t($accent1);
        }
        color: $color-base1;
        border: none;
        margin-left: -16px;
        @media (max-width: 580px) {
          flex-basis: 100%;
          margin-left: 0px;
          border-radius: 0px 0px 8px 8px;
        }
      }
    }
    #pickRandomEntityLink {
      display: block;
      margin-top: 0.2rem;
      @media (max-width: 580px) {
        margin-top: 0.8rem;
        text-align: center;
      }
    }
  }

  .columnA {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    flex-basis: 25%;
    max-width: 25%;
    word-wrap: break-word;
    margin-top: 2rem;
    @media (max-width: 580px) {
      display: flex;
      position: relative;
      max-width: none;
      top: auto;
      align-items: center;
      margin-top: 0rem;
    }
    .info-wrapper {
      display: none;
      font-size: 1.6rem;
      margin-bottom: 0.6em;
      text-align: center;
      .display {
        display: block;
        font-size: 1.2rem;
        @include themed() {
          color: t($base4);
        }
      }
      @media (max-width: 580px) {
        display: block;
        text-align: left;
        margin-bottom: 0;
        flex-basis: 64%;
        max-width: 64%;
        overflow: hidden;
        font-size: 1.6rem;
      }
    }
    .last_update {
      font-size: 0.8em;
      margin-top: 0.5rem;
      text-align: center;
      @include themed() {
        color: t($base4);
      }
      @media (max-width: 580px) {
        display: none;
      }
    }
  }
  .column_content {
    flex-grow: 0;
    flex-shrink: 0;
    word-wrap: break-word;

    .info-wrapper {
      font-size: 1.6rem;
      h1 {
        font-size: 1.6rem;
      }
      .display {
        @include themed() {
          color: t($base4);
        }
      }
      .npub {
        font-size: 1rem;
        @include themed() {
          color: t($base4);
        }
      }
      @media (max-width: 580px) {
        display: none;
      }
    }
    .separator {
      height: 6px;
      width: 30%;
      margin-left: -0.6rem;
      @include themed() {
        background: t($over-bg);
      }
      &.long {
        width: 50%;
      }
      @media (max-width: 580px) {
        margin-left: -1rem;
      }
    }
    .field {
      margin-bottom: 1.5rem;
      line-height: 1.3rem;
      a {
        padding-bottom: 0.05rem;
        margin-right: 0.2rem;
        text-decoration: none;
        @include themed() {
          &:hover {
            color: $color-accent1;
          }
          color: t($base7);
          border-bottom: 1px solid rgba(t($base7), 0.24);
        }
      }
      a.nostr {
        @include themed() {
          background-color: t($hrefbg);
        }
        border-bottom: none;
      }
      a.button {
        display: inline-block;
        max-width: 100%;
        padding: 2px 8px;
        margin-top: 0.6em;
        margin-right: 0.2em;
        border-bottom: 0;
        border: 1px solid $color-base4;
        border-radius: 8px;
        &:hover {
          color: $color-base1;
          background-color: $color-accent1;
          border: 1px solid $color-accent1;
        }
      }
      .label {
        font-size: 0.8rem;
        @include themed() {
          color: t($accent1);
        }
      }
      &.advanced {
        display: none;
        &.visible {
          display: block;
        }
      }
      &.boxed {
        padding: 0 1rem 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
        @include themed() {
          background: t($boxed-bg);
        }
        .label {
          padding: 0.2rem 1rem;
          margin: 0 -1rem;
          @include themed() {
            color: t($boxed-title);
          }
          @include themed() {
            background: t($boxed-bg-title);
          }
        }
      }
      pre {
        overflow-x: scroll;
        @include themed() {
          background: t($over-bg);
        }
        padding: 1rem;
      }
      blockquote {
        @include themed() {
          border-left: 0.5rem solid t($over-bg);
        }
        padding: 0.5rem 0 0.5rem 1rem;
        margin: 2rem 0;
        font-style: italic;
        &.mention {
          border-left: 0.5rem solid $color-accent1;
          padding: 0rem 0 0.5rem 1rem;
          div {
            @include themed() {
              padding: 0.5rem 0.5rem 0.5rem 1rem;
              margin: 0 0 1rem -1rem;
              background-color: t($over-bg);
            }
          }
        }
        p {
          margin: 0 0 0.5rem 0;
        }
      }
      cite {
        font-size: 0.8em;
      }
      strong {
        font-weight: 400;
      }
      ol,
      ul {
        margin: 0;
        padding: 0 0 0 1rem;
        li {
          margin-bottom: 0.5rem;
        }
      }
      sup {
        font-size: 0.6rem;
        vertical-align: baseline;
        position: relative;
        top: -0.8em;
        margin: 0 0.3rem 0 0.1rem;
      }
      hr {
        display: none;
      }
      .footnotes {
        padding-top: 1rem;
        margin-top: 2rem;
        @include themed() {
          border-top: 6px solid t($over-bg);
        }
        font-size: 0.9rem;
        line-height: 1.2rem;
      }
      &.last_notes {
        a {
          display: block;
          text-decoration: none;
          border-bottom: none;
          &.note {
            margin: 2rem 0;
            .header {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              margin-left: -0.6rem;
              margin-bottom: 0.4rem;
              padding-left: 0.6rem;
              padding-bottom: 0.2rem;
              @include themed() {
                border-bottom: 6px solid t($over-bg);
              }
              .published_at,
              .npub {
                font-size: 0.8rem;
                @include themed() {
                  color: t($accent1);
                }
              }
              .npub {
                margin-left: auto;
                @include themed() {
                  color: t($base6);
                }
                span {
                  padding: 0 0.2rem;
                  border-radius: 4px;
                  @include themed() {
                    background-color: t($hrefbg);
                  }
                  &:hover {
                    text-decoration: none;
                    @include themed() {
                      color: t($base1);
                      background-color: t($accent1);
                    }
                  }
                }
              }
              .is_reply {
                margin-left: 0.5em;
                font-size: 0.8rem;
                @include themed() {
                  color: t($base4);
                }
              }
            }
            .content {
              flex-basis: 100%;
              margin-top: 0.2rem;
              max-height: 160px;
              overflow: hidden;
              &.gradient {
                -webkit-mask-image: linear-gradient(
                  to bottom,
                  rgba(0, 0, 0, 1) 50%,
                  rgba(0, 0, 0, 0) 100%
                );
                mask-image: linear-gradient(
                  to bottom,
                  rgba(0, 0, 0, 1) 50%,
                  rgba(0, 0, 0, 0) 100%
                );
              }
            }
          }
        }
        a:hover {
          padding-left: 1rem;
          margin-left: -1.5rem;
          @include themed() {
            border-left: 0.5rem solid t($over-bg);
          }
        }
      }
      &.advanced-switch-wrapper {
        display: flex;
        align-items: center;
        input[type='checkbox'] {
          height: 0;
          width: 0;
          visibility: hidden;
          display: none;
        }
        @media print {
          display: none;
        }
        label:first-of-type {
          cursor: pointer;
          text-indent: -9999px;
          width: 2.6rem;
          height: 1.2rem;
          @include themed() {
            background: t($over-bg);
          }
          display: inline-block;
          border-radius: 100px;
          position: relative;
          margin-right: 0.5rem;
          @media (max-width: 580px) {
            width: 3rem;
            height: 1.4rem;
          }
        }

        label:first-of-type:after {
          content: '';
          position: absolute;
          top: 2px;
          left: 2px;
          width: 1rem;
          height: 1rem;
          @include themed() {
            background: t($base7);
          }
          border-radius: 1rem;
          transition: 0.2s;
          @media (max-width: 580px) {
            width: 1.2rem;
            height: 1.2rem;
          }
        }

        input:checked + label {
          @include themed() {
            background: t($accent1);
          }
        }

        input:checked + label:first-of-type:after {
          left: calc(100% - 2px);
          transform: translateX(-100%);
          @include themed() {
            background: t($base1);
          }
        }

        label:first-of-type:active:after {
          width: 2rem;
        }
        label:last-of-type {
          cursor: pointer;
          font-size: 0.8rem;
          @include themed() {
            border-bottom: 1px solid rgba(t($base7), 0.24);
            padding-bottom: 0.1rem;
          }
        }
      }
      &.content,
      &.about {
        line-height: 1.4rem;
        img {
          max-width: 100%;
          margin: 1rem 0;
        }
      }
      .json,
      .data {
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.9rem;
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 1rem;
        .key {
          display: inline-block;
          @include themed() {
            color: t($accent1);
          }
        }
        .string {
          @include themed() {
            color: t($base7);
          }
        }
        .number {
          color: darkorange;
        }
        .boolean {
          @include themed() {
            color: t($base7);
          }
        }
        .null {
          @include themed() {
            color: t($base7);
          }
        }
      }
      &.last_update {
        display: none;
        @media (max-width: 580px) {
          display: block;
          font-size: 0.8em;
          @include themed() {
            color: t($base4);
          }
        }
      }
    }
    a.pagination {
      color: $color-accent1;
      &.next {
        float: right;
      }
      &.prev {
        float: left;
      }
    }
  }

  .column_clients {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    flex-basis: 25%;
    margin-top: 1rem;
    @media (max-width: 580px) {
      position: fixed;
      top: auto;
      bottom: 0;
      left: 0;
      width: 100%;
      transition: all 500ms ease-in-out;
      &.up {
        .btn {
          display: block;
        }
        .title span.open {
          display: none;
        }
      }
    }
    @media print {
      display: none;
    }
    .title {
      font-size: 0.8rem;
      margin-bottom: 1rem;
      text-align: center;
      span.open,
      span.close {
        display: none;
      }
      @media (max-width: 580px) {
        position: absolute;
        top: 0;
        right: 0;
        width: 2.6rem;
        height: 2.6rem;
        border-left: 1px solid #bc1150;
        span.text {
          display: none;
        }
        span.open,
        span.close {
          display: inline;
          svg {
            width: 50%;
            height: 50%;
            margin: 28% auto auto auto;
            display: block;
          }
        }
      }
    }
    .btn {
      display: flex;
      align-items: center;
      margin-bottom: 0.8rem;
      @media (max-width: 580px) {
        display: none;
        margin-bottom: 0;
      }
      a {
        flex-basis: 100%;
        padding: 0.4rem;
        text-align: center;
        font-size: 0.9rem;
        color: $color-base1;
        background-color: $color-base6;
        border-bottom: 1px solid darken($color-base7, 14%);
        text-decoration: none;
        border-radius: 8px;
        @media (max-width: 580px) {
          display: block;
          padding: 0.8rem;
          border-radius: 0px;
          font-weight: 400;
          text-align: left;
        }
        span {
          display: none;
          @media (max-width: 580px) {
            display: inline;
            color: $color-base1;
          }
        }
        &:hover {
          background: $color-base7;
        }
      }
      &:first-of-type {
        @media (max-width: 580px) {
          display: block;
        }
        a {
          @include themed() {
            background: t($accent1);
          }
          border-bottom: none;
          @media (max-width: 580px) {
            border-radius: 8px 8px 0 0;
          }
          &:hover {
            @include themed() {
              background: t($accent2);
            }
          }
        }
      }
      span {
        flex-basis: 20%;
        margin-left: 0.4rem;
        color: $color-base1;
        @media (max-width: 580px) {
          display: none;
        }
      }
    }
  }
}

body.homepage {
  .container_wrapper {
    display: block;
    @media (max-width: 580px) {
      display: block;
      padding: 0 1rem;
      margin: 0 auto;
    }

    .container {
      display: block;
      width: 60%;
      margin: 0 auto;
      @media (max-width: 580px) {
        display: block;
        width: 100%;
      }

      span.exampleUrl {
        @include themed() {
          background-color: t($hrefbg);
        }
        padding: 0 0.2rem;
        border-radius: 4px;
      }
    }
  }
}

body.profile {
  .column_content {
    flex-basis: 50%;
    max-width: 50%;
    @media (max-width: 580px) {
      flex-basis: 100%;
      max-width: 100%;
      margin-right: 0;
    }
  }
}

body.note,
body.other {
  .column_content {
    flex-basis: 75%;
    max-width: 75%;
    @media (max-width: 580px) {
      flex-basis: 100%;
      max-width: 100%;
      margin-right: 0;
    }
    @media print {
      flex-basis: 100%;
      max-width: 100%;
    }
    .profile_intro {
      display: flex;
      max-width: 100%;
      align-items: center;
      margin-bottom: 1rem;
      @media print {
        margin-bottom: 1rem;
      }
      a {
        display: inherit;
        width: 100%;
        align-items: inherit;
        margin: 1rem 0 1rem 0;
        text-decoration: none;
        flex-wrap: wrap;
        @media (max-width: 580px) {
          margin-top: -0rem;
          margin-bottom: -0.5rem;
        }
      }
      .info-wrapper {
        flex-grow: 1;
        @media (max-width: 580px) {
          display: block;
        }
        @media print {
          font-size: 1rem;
        }
        .name,
        .npub {
          @media (max-width: 580px) {
            display: block-inline;
            font-size: 0.9rem;
          }
        }
      }
      .pic-wrapper {
        flex-basis: 16%;
        margin-right: 1rem;
        @media (max-width: 580px) {
          margin-right: 0.5rem;
        }
        @media print {
          flex-basis: 10%;
        }
      }
    }
    .published_at,
    .reply_of {
      width: 100%;
      text-align: right;
      align-self: end;
      font-size: 0.8rem;
      @include themed() {
        color: t($base5);
      }
      a {
        @include themed() {
          color: t($accent1);
        }
      }
    }
    .reply_of {
      margin-top: 0.2rem;
    }
  }
}

.footer {
  margin-top: 2rem;
  color: $color-base5;
  font-size: 0.8rem;
  text-align: center;
  a {
    color: $color-base5;
  }
}

@media print {
  @page {
    margin: 2cm 3cm;
  }
  /* Safari specific styles */
  body.safari {
    margin: 1cm 3cm;
  }
}