/* 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 {
  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));
  padding-bottom: 50px;
  color: #2d6084;

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

  #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%;
  }

  #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}

  #topbar {
    width: 90%;
    position: relative;
    z-index: 2;
    margin: 0 auto;

    nav {
      display: flex;

      a {display: inline-block}

      .left {
        margin-right: auto;

        #logo {
          margin-top: -30px;
          width: 360px;
          height: 227px;
        }

      }
      .right {
        margin-top: 50px;

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

        a {
          margin: 10px;

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

          font-family: 'Fredoka';
          font-weight: bold;
          font-size: 20px;
          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}

          #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 {
    width: 90%;
    margin: 0 auto;
    padding: 0 10px 50px 10px;
    border-radius: 50px;
    position: relative;
    z-index: 2;
    min-height: calc(90vh - 100px);

    #settings, #about {max-width: 700px}

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

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

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

    article {
      & > h1:before {
        content: '✦';
        transform: rotate(15deg);
        text-shadow: none;
        color: #2d6084;
        font-size: 96px;
        position: relative;
        left: -20px;
        display: inline-block;
        margin-right: -60px;
        top: 20px;
        -webkit-text-stroke: none;
        z-index: -1;
      }

      & > h1:first-of-type {
        font-size: 30px;
        display: inline;
        line-height: 1em;
        font-family: 'Grandstander';
        color: #93d1f7;
        margin-top: 0;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 1;
        paint-order: stroke fill;
        -webkit-text-stroke: 12px #FFF;

        &:hover {text-decoration: underline}
      }

      .unread h2 a {color: #fff}

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

        &:hover {text-decoration: underline}
      }

      & > h2:first-of-type {
        margin-left: 25px;
        font-size: 16px;
        padding-bottom: 30px;
        font-weight: normal;
        text-transform: lowercase;
      }

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

      #about {
        .about {
          width: 500px;
          color: #160b39;
          border-radius: 10px;
          padding: 15px;
          margin: 15px;

          p:first-child {margin-top: 0}
          p:last-child {margin-bottom: 0}
        }
      }
    }

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

      svg {fill: #fb64b6}
    }

    form:valid button, button.valid {
      background: #fb64b6;
      color: #fff;
      svg {fill: #fff; width: 18px; vertical-align: middle}
      &:hover {background: #fb64b6; color: #fff; svg {fill: #fff}}
      &:active {background: #cc5295}
    }

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

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

          .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 {
              padding: 11px 10px;
              font-size: 0.75rem;
              background-color: rgba(255, 255, 255, 0.8);
              border: 1px solid #eaeaea;
              border-radius: .375rem;

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

    #yak, #new, #alerts {
      .hidden {display: none !important}
      & > .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}
        }
      }

      .toast-new {margin: 100px 0 !important}

      p.filters {margin: -30px 0 0 30px; position: relative; z-index: 2}

      .date {text-align: center; padding-top: 30px}

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

        &.read {
          opacity: 0.5;
        }

        &.author {
          margin: 0;

          .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;
            }

            .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}

                .avatar {
                  width: 20px !important;
                  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;
                  }
                }
              }
            }

            input, textarea {
              font-size: 14px;
              resize: vertical;
              width: 100%;
              height: auto;
              overflow: hidden;
              max-width: 100%;
              border: none;
              padding: 10px;
              border: 10px solid #fff;
              background: #fff;
              border-radius: 20px;
              color: #282a51;
              flex: 1;
            }
          }

          .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: 0;
                  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;

              time:hover .tooltip {
                display: block;
              }

              .tooltip {
                display: none;
                background: #222;
                padding: 10px;
                color: #FFF;
                text-align: center;
                position: absolute;
                z-index: 1000;
                font-size: 10px;
                border-radius: 5px;
                margin-left: -61px;
                margin-top: -37px;
              }

               .tooltip::after {
                content: " ";
                position: absolute;
                top: 100%; /* At the bottom of the tooltip */
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: black transparent transparent transparent;
              }
            }

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

              .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}
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  body {
    #topbar {width: 100%; padding: 0 10px}
    #container {width: 100%}
  }
}

@media screen and (max-width: 930px) {
  body #topbar {
    nav {
      .right {margin-top: 40px}
      .left #logo {margin-top: -18px; width: 270px; height: 170px}
    }
  }
}

@media screen and (max-width: 840px) {
  body #topbar {
    nav .right a span {font-size: 0}
  }
}

@media screen and (min-width: 512px) and (max-width: 660px) {
  body #topbar {
    nav {
      .right {margin-top: 18px; #search-container #search-wrapper #search-bar {width: 250px}}
      .left #logo {margin-top: -10px; width: 180px; height: 113px}
    }
  }
}

@media screen and (max-width: 520px) {
  body #topbar nav {
    .right {margin-top: 18px; #search-container #search-wrapper #search-bar {width: calc(100vw - 90px)}}
    .left #logo {margin-top: -10px; width: 180px; height: 113px; &.hidden {opacity: 0; width: 1px}}
  }
}