@font-face {
  font-family: 'zpix';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/zpix.ttf') format('truetype');
  font-display: swap;
}

body {
  background-color: #ededeb;
}
.gb-form,
.gb-form label,
.gb-form input,
.gb-form textarea,
.gb-form button,
.gb-entries,
.gb-entry,
.gb-meta,
.gb-name,
.gb-msg {
  font-family: 'zpix', monospace;
}

.content { align-self: center; }

.gb-form { display: flex; flex-direction: column; gap: 8px; max-width: 400px; }
.gb-form label { font-size: 12px; }
.gb-form input[type="text"],
.gb-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed #a69f9f;
  background: transparent;
  padding: 6px 8px;
  font-family: 'zpix', monospace;
  font-size: 12px;
  outline: none;
  resize: vertical;
}
.gb-form input[type="text"]:focus,
.gb-form textarea:focus {
  border-color: #333;
}
.gb-form button[type="submit"] {
  font-family: 'zpix', monospace;
  font-size: 12px;
  background: none;
  border: 1px dashed #a69f9f;
  padding: 4px 12px;
  cursor: pointer;
  width: fit-content;
}
.gb-form button[type="submit"]:hover { border-color: #333; }

.emoji-wrap { position: relative; display: inline-block; }
.emoji-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 0;
}
.emoji-toggle img { width: 28px; height: 28px; image-rendering: pixelated; }

.emoji-tray {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px dashed #a69f9f;
  padding: 8px;
  flex-wrap: wrap;
  gap: 6px;
  width: 260px;
  z-index: 9999;
}
.emoji-tray.open { display: flex; }

.emoji-tray button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  border-radius: 4px;
}
.emoji-tray button:hover { background: #f0eef0; }
.emoji-tray button img { width: 32px; height: 32px; image-rendering: pixelated; }

.gb-entries { margin-top: 24px; max-width: 400px; }
.gb-entries > p { font-family: 'zpix', monospace; font-size: 12px; }

.gb-entry {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 10px;
  background: #f5f0f5;
  /*border-left: 2px solid #d5b5f5;*/
}
.gb-meta { color: #a69f9f; font-size: 10px; margin-bottom: 2px; font-family: 'zpix', monospace; }
.gb-name { font-weight: bold; font-family: 'zpix', monospace; }
.gb-msg  { margin: 0; font-family: 'zpix', monospace; }
.gb-emoji { width: 20px; height: 20px; vertical-align: middle; image-rendering: pixelated; }