:root {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    /* layout: header (auto) + toolbar (auto) + content (1fr) */
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      grid-template-rows: auto auto 1fr;
      height: 100vh;
      background: #fafafa;
      justify-content: space-evenlty;
      align-items: center;
    }

    header {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      padding: 8px 12px;
      width: 100%;
      border-bottom: 1px solid #ddd;
      font-weight: bold;
      font-size: 26px;
      margin: 20px -30px 0px -12px;
      align-items: center;
      background: green;
      color: white;
    }

    /* Top-left toolbar with the button pinned left */
    #toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 8px 12px;
      padding: 8px 12px;
      border-radius: 8px;
      padding: 8px 12px;
      border: 1px solid #eee;
      position: center;
    }
    #loadOlder {
      border: 1px solid #ccc;
      background: #f7f7f7;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
    }
    #status {
      margin-left: 6px;
      font-size: 12px;
      opacity: .7;
    }

  /* Center column for messages + form */
  main#messages,
  form#form {
    max-width: 720px;      /* controls the column width */
    width: 100%;
    margin-left: auto;      /* center horizontally */
    margin-right: auto;     /* center horizontally */
  }

  /* scrollable messages area */
  #messages {
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* take remaining height, leaving room for the form */
    min-height: 0;          /* allow flex/grid child to shrink */
  }

  .msg { line-height: 1.3; }
  .meta { font-size: 12px; opacity: .6; }
  .system { font-style: italic; opacity: .7; }

  /* centered form */
  form {
    display: flex;
    gap: 8px;
    padding: 10px 12px 16px;
  }
  input[type="text"], input[name="nick"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  input#input { flex: 1; }
  button[type="submit"] {
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: #2f6fed;
    color: #fff;
  }

  .container {
    /*width: 100%;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .gallery {
    width: 80%;
    margin: auto;
    padding-right: 5px;
    padding-left: 5px;
    display: flex;
    border: 3px solid #eee;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
  }

  .gallery-item img {
    width: 350px;
    display: flex;
    position: relative;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, outline .15s ease;
    max-height: 350px;
    border-radius: 20%;
    outline: 0;
    user-select: none;
    align-self: center;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 20px;
  }

  .gallery-item::after {
    content: attr(data-alt);
    display: block;
    padding-bottom: 6px;
    margin-top: -26px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: rgba(0,0,0,.6);
    border-radius: 6px;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }

  .gallery-item:hover::after {
    opacity: 1;
    tranform: translateY(0);
  }

  .gallery-item img:hover {
    transform: translateY(-1px) scale(1.25); 
  }

  .hide_part{
    display: none;
  }