.onboarding-modal {
  clear: both;
  margin-top: 10vh;
}

@media (min-width: 640px) {
  .onboarding-modal {
    padding: 40px 48px;
    border-radius: 24px;
    background-color: var(--gray-superdark);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    width: 460px;
  }
}

.onboarding-modal h1,
.onboarding-modal h2,
.onboarding-modal h3,
.onboarding-modal h4,
.onboarding-modal h5 {
  margin: 0;
}

.onboarding-modal button.secondary:hover {
  background-color: var(--gray-medium);
}

.onboarding-modal {
  --border-color: #3a3a3a;
}

.new-username {
  padding: 10px 16px !important;
  align-self: stretch;
  border-radius: 100px !important;
  background-color: var(--gray-superlight) !important;
  box-shadow: 0px 0px 0px 4px transparent !important;
  color: var(--gray-ultradark) !important;
}

.new-username:focus {
  box-shadow: 0px 0px 0px 4px rgba(172, 136, 255, 0.8) !important;
}

.new-trending {
  max-height: 30vh;
  overflow-y: scroll;
}
