p {
    color: #ddd;
}

div#results{
    display: flex;
    gap: 1rem;
    padding: 1rem;
    max-width: 600px;       /* cap the width so there's room to center */
    margin: 0 auto;         /* centers the block horizontally */
}

/* Stack vertically on narrow screens */
@media (max-width: 600px) {
    div#results {
        flex-direction: column;
    }
}

div.servercol {
    flex: 1;                /* each takes an equal share */
    min-width: 0;           /* let columns shrink instead of overflowing the cap */
    padding: 1rem;
}

div.servercol input {
    width: 100%;            /* fill the column rather than overflow it */
    box-sizing: border-box;
}

div#errors {
  margin-top: 10pt;
  color: #e83333;
  font-size: 18pt;
  text-align: center;
}

div.form {
    margin-top: 20px;
    text-align: center;
}

/* Keep the buttons together so that, if the line wraps, they all drop to
   the next row as a group rather than breaking up between themselves */
.buttons {
    display: inline-block;
    white-space: nowrap;
}

/* A small gap sets the randomize buttons apart from "Find Out!" */
#randomizeHashtag {
    margin-left: 0.75rem;
}

div#results {
    text-align: center;
}

div.share {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10pt;
}

/* Make the <a> and <input type="button"> share controls look identical */
.sharebtn {
    font: inherit;
    padding: 4px 10px;
    border: 1px solid #76c7c4;
    background: transparent;
    color: #76c7c4;
    text-decoration: none;
    cursor: pointer;
}

div.tagdata {
    margin-top: 6pt;
}

span.usertext {
    font-size: 0.8rem;
}

div.loading {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16pt;
    text-align: center;
    display: none;
    color: #fffd00;
}

h2 {
    text-align: center;
}

p:first-child {
    margin-top: 0px;
}

p:last-child {
    margin-bottom: 0px;
}

#about {
    margin-top: 30pt;
    color: #999;
    font-size: 0.85rem;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: fit-content;
  /*font-weight: bold;
  font-family: monospace;
  font-size: 30px;*/
  clip-path: inset(0 3ch 0 0);
  animation: l4 1s steps(8) infinite;
  display: inline-block;
}
.loader:before {
  content:"..."
}
@keyframes l4 {to{clip-path: inset(0 -.5ch 0 0)}}