/* vietnamese */
@font-face {
  font-family: 'Grandstander';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/grandstander-viet.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Grandstander';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/grandstander-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Grandstander';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/grandstander-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/fredoka-hebrew.woff2") format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin-ext */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/fredoka-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/fredoka.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }

  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

body {
  &.extension #topbar nav .left #logoLink {width: 1px; opacity: 0}

  margin: 0;
  background-size: cover;
  font-family: 'Fredoka';
  font-size: 16px;
  line-height: 1.5em;
  background-image: repeating-linear-gradient(135deg, rgba(236,236,236, 0.14) 0px, rgba(236,236,236, 0.14) 55px,transparent 55px, transparent 110px),repeating-linear-gradient(45deg, rgba(236,236,236, 0.14) 0px, rgba(236,236,236, 0.14) 55px,transparent 55px, transparent 110px),linear-gradient(135deg, rgba(255,255,255, 0),rgba(255,255,255, 0));
  color: #2d6084;

  h1, h2, h3, h4, h5, h6, .username, label, button {font-family: 'Fredoka'; font-weight: bold}
  input, textarea {font-family: 'Fredoka'}

  .hidden {display: none}

  #emoji-picker {
    width: 352px;
    height: 435px;
    position: absolute;
    bottom: 50px;
    right: 50px;
    z-index: 10;
    visibility: hidden;
  }

  #parent {
    /*    background-color: #b8e3f5;*/
    position: relative;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255, 0.1) 0px, rgba(255,255,255, 0.1) 55px,transparent 55px, transparent 110px),repeating-linear-gradient(135deg, rgba(255,255,255, 0.1) 0px, rgba(255,255,255, 0.1) 55px,transparent 55px, transparent 110px),linear-gradient(135deg, rgb(13,242,242),rgb(13,242,242));
    mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/80px 100%;
    padding-bottom: 190px;
    &.hidden-footer #container {
      height: calc(100dvh - 195px);
    }
  }

  #gradient {
    position: absolute;
    background-size: cover;
    mask-image: linear-gradient(black, transparent);
    background-image: repeating-linear-gradient(135deg, rgba(67,189,255, 0.57) 0px, rgba(67,189,255, 0.57) 55px,transparent 55px, transparent 110px),repeating-linear-gradient(45deg, rgba(67,189,255, 0.57) 0px, rgba(67,189,255, 0.57) 55px,transparent 55px, transparent 110px),linear-gradient(135deg, rgba(65,185,255, 0.67),rgba(65,185,255, 0.67));
    width: 100%;
    height: 300px;
    z-index: 1;
  }

  p {line-height: 1.5em}

  button {
    margin: 5px 0;
    border: none;
    color: #fb64b6;
    padding: 10px 20px;
    background: #fff;
    border-radius: 20px;
    transition: all 0.25s;
    margin-right: 10px;

    svg {fill: #fb64b6; transition: all 0.5s}
    &:first-of-type {margin-right: 0}
  }

  form button, button {
    svg {fill: #fb64b6; width: 18px; height: 18px; vertical-align: middle; color: #fb64b6}
  }

  form:valid button, button.valid {
    background: #fb64b6;
    color: #fff;
    fill: #fff;
    svg {fill: #fff}
    &:click {background: #b3166d}
    &:hover {background: #ff289d; color: #fff; svg {fill: #fff}}
    &:active {background: #cc5295}
  }

  #topbar {
    width: 100%;
    position: fixed;
    z-index: 2;

    nav {
      display: flex;
      justify-content: space-between;

      a {
        display: inline-block;
        color: #FFF;
        &.post-boot {display: none !important}
      }

      .left {
        display: flex;
        align-items: center;
        justify-content: center;

        #logoLink {
          width: 270px;
          height: 133px;
          #logo {width: 270px; height: 133px}

          #logo-mini {display: none}
        }

        #backBtn {
          width: 50px;
          height: 50px;
          display: none;
          vertical-align: middle;
          cursor: pointer;
          margin: 0 -20px 0 10px;

          svg {
            width: 50px;
            height: 50px;
            fill: #FFF;
          }
        }

        .middle {
          vertical-align: bottom;
          display: inline-block;

          #room-buttons {
            display: none;
            text-align: center;
            font-size: 40px;
            color: #FFF;
            svg {width: 30px; height: 30px; fill: #FFF; pointer-events: none}
            a {margin: 0 10px; text-decoration: none; color: #fff}
          }

          #title {
            font-size: 30px;
            display: inline;
            line-height: 1em;
            font-family: 'Grandstander';
            color: #93d1f7;
            margin-top: 0;
            margin: 0;
            padding: 0;
            paint-order: stroke fill;
            -webkit-text-stroke: 12px #FFF;

            &:hover {text-decoration: underline}
          }

          #subtitle {
            margin: 0;
            font-size: 16px;
            font-weight: normal;
            text-transform: lowercase;

            p.filters {margin: 0}
          }
        }
      }

      .right {
        margin-top: 35px;
        text-align: right;

        a.active:after {
          content: "";
          float: left;
          background: #fff;
          width: 100%;
          height: 6px;
          border-radius: 3px;
          margin-top: 5px;
        }

        a {
          margin: 10px;

          .avatar {
            object-fit: cover;
            border-radius: 25px;
            overflow: hidden;
            min-height: 25px;
            min-width: 25px;
            border: 2px solid #FFF;
          }

          svg, .avatar {
            fill: #fff;
            width: 25px;
            height: 25px;
            vertical-align: middle;
          }

          font-family: 'Fredoka';
          font-weight: bold;
          font-size: 0;
          color: #fff;
          text-decoration: none;
          &.active {opacity: 1}

          #alertsIndicator {
            display: inline-block;
            width: 15px;
            border-radius: 50%;
            height: 15px;
            background: #f00;
            display: inline-block;
            position: relative;
            top: -10px;
            left: -10px;
            margin-right: -15px;
            opacity: 0;

            &.active {opacity: 1}
          }
        }

        #search-container {
          display: inline;
          & > svg {
            &.active {opacity: 1}
            opacity: 0.4;
            display: none;
            width: 25px;
            height: 25px;
          }

          #xmark {display: none; position: relative; top: -10px}

          #search-wrapper {
            position: relative;
            display: inline-block;
            top: -5px;
            right: 10px;

            &::before {
              background: url('search.svg');
              position: absolute;
              content: '';
              width: 15px;
              height: 15px;
              top: 14px;
              left: 14px;
            }

            #search-bar {
              width: 300px;
              height: 32px;
              border-radius: .375rem;
              border: 1px solid #eaeaea;
              padding: 20px 20px 20px 40px;
              font-size: 12px;
              opacity: 0.5;

              &:focus {opacity: 1}
            }
          }
        }
      }
    }
  }

  #container {
    position: relative;
    top: 140px;
    z-index: 2;
    overflow-y: scroll;
    height: calc(100dvh - 305px);
    scrollbar-color: #262626 transparent;
    scrollbar-width: thin;

    #new .toast-close-button {display: none}

    #loading {
      width: 200px;
      margin: 0 auto;
    }

    & > article:not(:first-child) {
      display: none;
    }

    article {
      padding: 0 10px;
      .unread h2 a {color: #fff}

      h2 {
        a {color: #2d6084; text-decoration: none}
        margin: 0;
        padding: 0;

        &:hover {text-decoration: underline}
      }

      h3 {
        display: inline-block;
        font-size: 16px;
        margin: 10px 0;
        padding: 0;
        a {color: #666; text-decoration: none}
      }
    }

    #yak, #new, #alerts {
      & > .toasts-container > .toasts > .toast {max-width: 100% !important}
      & > .toasts-container > .toasts > .children {
        margin-left: 0;
      }

      .toasts .favourites {font-size: 24px; cursor: pointer}
      .toasts .favourites + h2 {display: inline}

      .toasts-loading {
        &.active {display: visible;}
        display: none;
        color: #00F;
        font-size: 20px;
        text-align: center;
      }

      .toasts-empty {
        &.active {display: inherit;}
        display: none;
      }

      .toast {
        max-width: 480px;
        padding: 20px 0;

        h2 + p {
          margin-left: 20px;
        }

        p, p a {
         color: #fff;
        }

        p {
          margin: 0;

          br {display: none}
        }
      }

      p.filters {position: relative; z-index: 2}

      .date {text-align: center; padding: 5px 0; line-height: 1em}
    }
  }

  .toast-new {margin: 10px !important}

  .toast-new, .note, .author {
    margin: 10px 0 10px 40px;

    &.read {
      opacity: 0.5;
    }

    &.author {
      margin: 0;
      margin-top: -25px;

      .avatar {
        position: relative;
        top: 25px;
      }

      .content {
        position: relative;
        top: 25px;
        left: -10px;
        width: calc(100% - 50px);
        padding-left: 10px;
        overflow: hidden;
      }
    }

    &.toast-new > div {
      background: none;
      box-shadow: none;

      &:hover {background: none}
    }

    &.author > div {
      background: none;
      box-shadow: none;
      margin: 0;
      padding: 0;
      align-items: center;
      &:hover {background: none}
    }

    &.author + div.note {padding: 0 0 0 40px; margin: 0}

    &:hover footer a {
      transition: all 0.5s;
      opacity: 0.2;
    }

    .toasts {
      & > div:last-child {margin-bottom: 0}
    }

    button {
      float: right;
      margin-left: 10px;
    }

    &.highlight > div {background: #fff0f4 !important}

    & > div {
      background: #fff;
      margin-bottom: 15px;
      box-shadow: 0px 2px 0px 0px #2d6084;
      transition: all 0.5s;
      background: linear-gradient(to right, #fb64b6 0%, #fb64b6 80px, #FFFFFFCC 80px, #FFFFFFCC 100%) repeat-y scroll 0 0 rgba(0, 0, 0, 0);
      &:hover {background: linear-gradient(to right, #fb64b6 0%, #fb64b6 80px, #FFFFFFFF 80px, #FFFFFFFF 100%) repeat-y scroll 0 0 rgba(0, 0, 0, 0)}
      border-radius: 15px;
      display: flex;

      form {
        width: 100%;
        clear: both;
        margin-bottom: 0;
        display: flex;
        align-items: center;

        .middle {
          flex: 1;
          padding: 10px;
          background: #fff;
          border-radius: 20px;
        }

        .reply-details {
          background: rgba(255, 255, 255, 0.3);
          border-radius: 10px;
          padding: 10px;

          p.heading {
            margin-top: 0;
            font-weight: bold;
          }

          .reply-cancel {
            width: 20px;
            height: 20px;
            line-height: 0;
            font-size: 18px;
            padding: 0 0 5px;
            margin: 0;
          }

          .context {
            border-left: 2px solid #000;
            padding-left: 5px;

            .username {font-weight: bold}
            .pubkey {color: #999}

            .content {
              img, iframe {
                max-width: min(50px, 100%);
                max-height: min(50px, 100%);
              }
            }

            .avatar {
              width: 20px !important;
              min-height: 20px;
              min-width: 20px;
              border: 1px solid #FFF;
              object-fit: cover;
              border-radius: 20px;
              overflow: hidden;
              height: 20px !important;
              margin-right: 0;
              display: inline-block;
              vertical-align: top;

             img {
                &.hashicon {transform: scale(1.25)}
                width: 20px;
                height: 20px;
              }
            }
          }
        }

        #show-emoji-picker-button {
          width: 30px;
          height: 30px;
          display: inline-block;
          vertical-align: middle;
          fill: #AAA;
          cursor: pointer;

          @media screen and (max-width: 660px) {
            display: none;
          }
        }

        input, textarea {
          outline: none;
          padding: 14px;
          background: #fff;
          border-radius: 20px;
          vertical-align: middle;
          font-size: 14px;
          width: calc(100% - 40px);
          overflow: hidden;
          max-width: calc(100% - 40px);
          border: none;
          color: #282a51;
          display: inline-block;
          resize: none;
          @media screen and (max-width: 660px) {
            width: 100%;
            max-width: 100%;
          }
        }
      }

      .avatar {
        object-fit: cover;
        border-radius: 74px;
        overflow: hidden;
        height: 74px;
        min-height: 74px;
        min-width: 74px;
        width: 74px;
        border: 5px solid #FFF;
        margin-right: 10px;

        & > img {
          &.hashicon {transform: scale(1.25)}
          width: 64px;
          height: 64px;
        }
      }

      footer {
        display: flex;
        flex-direction: row;
        margin-left: 5px;
        justify-content: space-between;
        min-width: 50px;

        a {
          flex-basis: 32%;
          opacity: 0;
          margin-bottom: 2px;
          &:hover {opacity: 1}

          img {width: 12px; height: 12px}
        }
      }

      & > .content {
        display: flex;
        flex-direction: row;
        align-items: start;
        padding: 2px;
        width: 100%;

        .caption {
          flex-grow: 1;
          img, iframe {
            max-width: min(400px, 100%);
            max-height: min(400px, 100%);
          }

          .context {
            border-left: 2px solid #000;
            padding-left: 5px;

            .reply-context {cursor: pointer}

            .avatar {
              min-height: 20px;
              max-width: 20px;
              object-fit: cover;
              border-radius: 20px;
              overflow: hidden;
              height: 20px;
              width: 20px;
              border: 1px solid #FFF;
              min-width: 20px;
              margin-right: 0;
              display: inline-block;
              vertical-align: top;

              img {
                &.hashicon {transform: scale(1.25)}
                width: 20px;
                height: 20px;
              }
            }

            .username {font-weight: bold}
            .pubkey {color: #999; font-size: 12px; font-style: italic; font-weight: lighter; display: none}
          }
        }

        .created_at {
          min-width: 80px;
          color: #FFF;
          text-align: center;
          padding-left: 10px;
        }

        header {
          color: #2d6084;
          display: flex;
          align-content: center;
          font-size: 18px;
          margin-left: -7px;
          max-width: 100%;

          a.modal-profile-button {
            text-decoration: none;
            color: #2d6084;
          }

          .details {
            display: inline;
            .username {font-weight: bold; margin-right: 10px; white-space: nowrap}
          }

          .read {
            display: inline;
            padding-left: 10px;
          }

          .pubkey {
            display: inline;
            font-style: italic;
            font-weight: lighter;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover {color: #000; transition: all 0.5s}
          }
        }
      }
    }
  }
  #modal-info {
    p {max-width: 400px}
  }

  #modal-account {
    @media screen and (min-width: 980px) {
      #modal-account-content {
        display: flex;
        justify-content: space-between;

        & > div:first-child {
          border-right: 1px dashed #ccc;
          margin-right: 20px;
        }
      }
    }

    #profile .avatar {
      object-fit: cover;
      border-radius: 74px;
      overflow: hidden;
      height: 74px;
      min-height: 74px;
      min-width: 74px;
      width: 74px;
      border: 5px solid #FFF;
      margin: 0 auto;
      display: block;
    }

    #profile, #relays, #keys {
      width: 300px;
      display: flex;
      color: #160b39;
      padding: 10px;
      margin: 10px;

      form {
        width: 100%;
        button {float: right}

        .submit-container {display: none}

        .field {
          display: flex;
          flex-direction: column;
          width: fit-content;
          position: static;
          width: 100%;

          label {
            font-size: 0.75rem;
            font-weight: 700;
            margin: 10px 0 0 0;
            padding: 0 3px;
            text-align: right;
            width: fit-content;
            padding: 5px 5px 5px 0;
            margin: 3px 0;
            display: inline-block;
          }

          input[type=text].input, input[type=url].input, textarea {
            padding: 11px 10px;
            font-size: 0.75rem;
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid #eaeaea;
            border-radius: .375rem;
            resize: vertical;

            &:disabled {background: #FFF; opacity: 0.5}
            &:focus {outline: none}
          }
        }
      }
    }
  }

  #modal-profile {
    text-align: center;

    .avatar {
      object-fit: cover;
      border-radius: 138px;
      overflow: hidden;
      height: 138px;
      min-height: 138px;
      min-width: 138px;
      width: 138px;
      border: 5px solid #FFF;
      margin: 0 auto;

      & > img {
        &.hashicon {transform: scale(1.25)}
        width: 128px;
        height: 128px;
      }
    }
  }
}

@media screen and (max-width: 930px) {
  body #container {
    top: 115px;
  }

  body #topbar {
    nav {
      .left {
        margin-top: -10px;
        #logoLink, #logoLink #logo {width: 180px; height: 113px}
        #backBtn {
          width: 30px;
          height: 30px;
          svg {width: 30px; height: 30px}
        }
        .middle {
          top: -40px;
          left: 10px;
          #title {font-size: 24px; -webkit-text-stroke: 8px #FFF}
          #room-buttons {font-size: 30px; svg {width: 24px; height: 22px}}
        }
      }
      .right {margin-top: 25px}
    }
  }
}

@media screen and (max-width: 700px) {
  body #container {
    top: 90px;
  }

  body #topbar {
    nav {
      .left {
        margin-top: 5px;
        #backBtn {
          margin: 0 -15px 0 5px;
        }

        #logoLink {
          margin: 0 10px;
          width: 70px;
          height: 70px;
          #logo {display: none}
          #logo-mini {display: inherit}
        }
        .middle {
          top: -10px;

          &.hidden {display: none}
        }
      }
      .right {
        margin-top: 22px;
        min-width: 180px;
        a {svg, .avatar {width: 20px; height: 20px}}

      }
    }
  }
}
@media screen and (max-width: 500px) {
  body {
    #topbar nav {
      .right {
        min-width: 140px;
        a {margin: 5px}
      }

      .left {
        #logoLink {
          &.hidden {display: none}
        }
      }
    }
  }
}


@media screen and (max-width: 400px) {
  body.extension {
    #topbar nav {
      .left {
        #backBtn {margin: 0; display: none !important}
        #logoLink {margin: 0; display: none}

        .middle {
          left: 0;
          top: 10px;
          padding-left: 10px;

          #room-buttons {
            text-align: left;
            a:first-child {margin-left: 0}
          }
          #title {-webkit-text-stroke: 4px #FFF; font-size: 20px}
        }
      }

      .right {
        margin-top: 7px;
      }
    }
  }
}