/* name generator */
.name-generator {
  margin: 1rem 4rem;
  background-color: rgb(28, 28, 30);
  border-radius: 1rem;

  display: flex;
  justify-content: space-between;
  
  user-select: none;
  -webkit-user-select: none;
}

.name-generator p {
  margin-top: 1rem;
  margin-left: 1rem;
}

.name-generator i {
  font-size: 1.5em;
  transition: .5s;
  
  padding-top: .5em;
  padding-left: .5em;
  height: 2.25rem;
  width: 2.25rem;
  
  border-radius: 1rem;
  cursor: pointer;
}

.name-generator i:hover {
  display: inline;
  
  background-color: #86868b;
  color: #1d1d1f;
}

@media screen and (max-width: 800px) {
  .name-generator {
    margin: 1rem 1rem;
  }
}