.post.svelte-okgu2n {
    position: relative;
    display: flex;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    gap: 10px;
  }
    .moderated.svelte-okgu2n {
      opacity: 0.5;
      padding-top: 0px;
      padding-bottom: 0px;
    }
      .moderated.svelte-okgu2n .header:where(.svelte-okgu2n) {
        cursor: pointer;
      }
      .hidden.svelte-okgu2n .header:where(.svelte-okgu2n) {
        box-shadow: none;
        background-color: transparent;
      }

    .icon.svelte-okgu2n {
      width: var(--iconSize);
      overflow: hidden;
      cursor: pointer;
      position: relative;
    }
      .icon.svelte-okgu2n img:where(.svelte-okgu2n) {
        display: block;
      }
      .desktop.svelte-okgu2n .icon:where(.svelte-okgu2n) img:where(.svelte-okgu2n) {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        display: block;
      }
      .mobile.svelte-okgu2n .icon:where(.svelte-okgu2n) {
        border: 1px solid var(--panel);
        float: left;
        /*
        margin-top: -16px;
        margin-left: -15px;
        */
        margin-right: 15px;
        margin-bottom: 5px;
      }
      .badge.svelte-okgu2n {
        top: 0px;
        left: 0px;
      }

  .body.svelte-okgu2n {
    flex: 1;
    overflow: hidden;
  }
    .content.svelte-okgu2n {
      background-color: var(--block);
      overflow-wrap: anywhere;
      /* box-shadow: 2px 2px 3px #0002; */
    }
      .hidden.svelte-okgu2n .content:where(.svelte-okgu2n), .hidden.svelte-okgu2n .toolbar:where(.svelte-okgu2n), .hidden.svelte-okgu2n .icon:where(.svelte-okgu2n), .hidden.svelte-okgu2n .time:where(.svelte-okgu2n), .hidden.svelte-okgu2n .reply:where(.svelte-okgu2n) {
        display: none;
      }
    .header.svelte-okgu2n {
      position: relative;
      width: 100%;
      min-height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      /*
      background-color: color-mix(in srgb, var(--block), var(--panel) 50%);
      box-shadow: 2px 2px 3px #0002;
      */
      border-bottom: 1px var(--panel) solid;
      background-color: var(--block);
      padding: 5px 15px;
      color: var(--dim);
    }
      .whispered.svelte-okgu2n .content:where(.svelte-okgu2n), .whispered.svelte-okgu2n .header:where(.svelte-okgu2n) {
        background-color: var(--whisper);
      }
      .header.svelte-okgu2n button:where(.svelte-okgu2n) {
        background: none;
        border: none;
        box-shadow: none;
        color: var(--dim);
      }
      .title.svelte-okgu2n {
        flex: 1;
      }
      .time.svelte-okgu2n {
        font-family: arial, sans-serif;
        font-size: 14px;
        opacity: 0.7;
        margin-right: 5px;
      }
      .audience.svelte-okgu2n {
        font-size: 15px;
        padding-left: 5px;
        color: var(--character);
      }
      .toolbar.svelte-okgu2n {
        display: flex;
        align-items: center;
        gap: 10px;
      }
        .delete.svelte-okgu2n, .edit.svelte-okgu2n, .moderate.svelte-okgu2n, .label.svelte-okgu2n {
          padding: 5px;
          font-size: 19px;
          cursor: pointer;
          opacity: 0.7;
        }
        .reply.svelte-okgu2n {
          opacity: 0.7;
        }
          .time.svelte-okgu2n:hover, .delete.svelte-okgu2n:hover, .edit.svelte-okgu2n:hover, .moderate.svelte-okgu2n:hover, .reply.svelte-okgu2n:hover {
            opacity: 1;
            color: var(--text);
          }
    .clear.svelte-okgu2n {
      clear: both;
    }

    .important.svelte-okgu2n .content:where(.svelte-okgu2n), .important.svelte-okgu2n .header:where(.svelte-okgu2n) {
      background-color: var(--prominent);
    }
    .important.svelte-okgu2n div.body:where(.svelte-okgu2n) {
      border-left: 5px solid var(--linkVisited);
    }
    .edited.svelte-okgu2n {
      font-size: 12px;
      color: var(--dim);
    }
    .illustration.svelte-okgu2n {
      object-fit: contain;
    }

  @media (max-width: 860px) {
    .post.svelte-okgu2n {
      gap: 0px;
    }
    .toolbar.svelte-okgu2n {
      gap: 5px;
    }
    .sep.svelte-okgu2n {
      display: none;
    }
    .header.svelte-okgu2n {
      display: block;
      padding: 10px 10px 5px 10px;
      padding-left: 15px;
    }
      .reaction.svelte-okgu2n {
        padding: 0px 5px;
      }
      .toolbar.svelte-okgu2n {
        width: 100%;
        display: flex;
      }
        .toolbar.svelte-okgu2n .time:where(.svelte-okgu2n) {
          flex: 1;
        }
    .content.svelte-okgu2n {
      padding: 15px;
    }
  }
  @media (max-width: 500px) {
    .illustration.svelte-okgu2n {
      max-width: 20%;
    }
  }