* {
  box-sizing: border-box;
}

.pvp-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-group {
  max-width: 20em;
  display: flex;
  flex-direction: column;
  z-index: 2;
align-items: center;
}

.input-group__label {
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  font-size: 0.875em;
  letter-spacing: 0.1em;
  color: #ccd;
  color: rgba(255, 220, 255, 0.6);
  cursor: pointer;
}

.input-group__input {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  border-style: none;
  outline: none;
  height: calc(1em + 1.6em + 0.5em);
  width: 100%;
  padding: 0.8em 1em;
  border: 0.25em solid transparent;
  background-image: linear-gradient(#6d6d6d, #333), linear-gradient(120deg, #00dbff 0%, #00ff58 50%, #9f0 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 1.8em;
  background-size: 200% 100%;
  transition: background-position 0.8s ease-out;
  text-align: center;
}
.input-group__input:hover {
  background-position: 100% 0;
}

.character-info {
  visibility: hidden;
  display: flex;
  flex-direction:column;
  justify-content: center;
  width: 100%; /* Adjust width as needed */
  padding: 20px;
align-items: center;
}

#character-name{
  padding: 20px;
  color: white;
  font-size: 20px;
}

#character-realm{
  padding: 20px;
  color: white;
  font-size: 20px;
}


#character-details {
  display: flex;
  flex-direction: row; /* Arrange items in a column */
}


#max-ratings {
  display: flex;
  flex-direction: column; /* Arrange items in a column */
}

#character-2v2{
  padding-left: 10px;
  color: white;
  font-size: 20px;
}

#character-3v3{
  padding-left: 10px;
  color: white;
  font-size: 20px;
}

#character-5v5{
  padding-left: 10px;
  color: white;
  font-size: 20px;
}

#character-RBG{
  padding-left: 10px;
  color: white;
  font-size: 20px;
}

#character-Shuffle{
  padding-left: 10px;
  color: white;
  font-size: 20px;
}

.rating{
  padding: 10px;
  color: white;
  font-size: 20px;
  display: flex;
  flex-direction: row; /* Arrange items in a column */
}