/* styles.css */
body {
  font-family: sans-serif;
  background: #494949;
  color: #c1c1c1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

main {
  background: rgb(48, 48, 48);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 600px;
  max-width: 90%;
}

textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 1rem;
  padding: 0.5rem;
  font-size: 1rem;
  resize: vertical;
}

#output {
  border: 1px solid #f9f9f9;
  background: #f9f9f9;
  padding: 1rem;
  overflow-y: auto;
  min-height: 100px;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;   /* horizontally center words */
  justify-content: center; /* keep words stacked top to bottom */
  gap: 1rem;
}



.glyph-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #6a645d;
  
  padding-top: 8%;
  padding-bottom: 11%;
  padding-left: 8%;
  padding-right: 8%;
  line-height: 0;         /* eliminate line spacing */
  
  clip-path: polygon(
    50% 0%,
    77.77% 4.34%,
    100% 13.04%,
    100% 39.13%,
    94.44% 65.22%,
    88.88% 78.26%,
    77.77% 86.96%,
    50% 100%,
    22.22% 86.96%,
    11.11% 78.26%,
    5.55% 65.22%,
    0% 39.04%,
    0% 13.04%,
    22.22% 4.34%

  );

}

.glyph-column > div {
  padding: 0;
  margin: 0;
  line-height: 0;         /* eliminate spacing inside glyph wrapper */
}

svg {
  display: block;         /* removes inline spacing below SVG */
}