.badges-align {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 2rem;
}

@container main-page (width < 768px) {
  .main-page .badge-selection {
    padding: .5rem;
  }

  .main-page .badges {
    gap: .1rem;
  }
}

.badge-selection {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  border: var(--border, var(--default-border));
  padding: 1rem;
  width: 100%;

  h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

#copy {
  color: var(--fg);
  padding: 1rem;
  border: var(--border, var(--default-border));
  resize: none;
}

#copybtn {
  color: var(--fg);
  padding: 1rem;

  &:hover {
    color: var(--fg-lighter);
    background-color: var(--bg-lighter);
  }
}

.badge {
  color:transparent;
  image-rendering: pixelated;

  width: 88px;
  height: 31px;
}
