body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background-color: var(--bg-color);
  color: #fff;
  text-align: center;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.avatar-section {
  background-color: rgb(147, 39, 39);
  width: 100vw;
  margin-bottom: 20px;
}

#avatarPopup.avatar-section {
  width: auto;
  background-color: #fff;
  margin-bottom: 0;
}

.avatars {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}

.avatar {
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform 0.2s,
    border 0.2s;
}

.avatar:hover {
  transform: scale(1.1);
}

.avatar.selected {
  border: 3px solid #00ff00;
}

.selected-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 10px;
  border: 2px solid #00ff00;
}
.stats-section {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F2FF41'/%3E%3Cstop offset='1' stop-color='%23f40'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='10' cy='10' r='10'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.1'/%3E%3C/svg%3E");
  background-attachment: fixed;
  margin: 0 10px;
  border-radius: 3px;
  display: flex;
  justify-content: space-around;
  padding: 20px;
}
.stats-section ul {
  list-style: none;
  padding: 0;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 20vh;
  align-items: start;
}
.stats-section ul li {
  font-family: "dotoFont", sans-serif;
}

#resetBtn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #ff5555;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
}

#resetBtn:hover {
  background-color: #ff0000;
}