html {
  font-family: monospace;
}

body {
  background-color:rgb(255, 255, 255);
}

h1 {
  text-align: center;
  font-size: 3rem;
  margin: 20px auto;
  padding: 20px; /* Add padding for spacing */
  border-radius: 10px; /* Add rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  background: linear-gradient(to right, rgb(65, 65, 65), rgb(240, 240, 240)); /* Gradient background */
  color: white; /* Text color */
}

.add-skill-button {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.explanation-button {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#toggleExplanation {
  font-size: 0.8rem; /* Adjust font size */
  padding: 5px 10px; /* Adjust padding */
  background-color: rgb(240, 240, 240);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#toggleExplanation:hover {
  background-color: #242425;
}


.hidden {
  display: none;
}

input {
  font-weight: bold;
  font-size: 1.75rem;
  width: 130px;
  border: none; /* Remove default border */
  background: none; /* Remove default background */
  margin-left: 5px;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

p{
  display: flex;
  justify-content: center;
  font-style: italic;
  font-size: 0.75 rem;
  color: rgb(73, 73, 73);
  margin-bottom: 20px;
}

input::placeholder {
  color: #484849; /* Change placeholder text color for input fields */
}

.skill {
  display: flex;
  justify-content: flex-start;
  align-items: baseline; 
}

.skill-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  min-width: fit-content;
  margin: auto;
  border: solid grey 1px;
  padding: 10px;
  background: rgb(240, 240, 240);
  width: fit-content;
  margin-bottom: 2svh;
}

.level-counter {
  font-family: calibri;
  display: flex;
}

span {
  color: rgb(0, 0, 0);
  font-size: 2rem;
  font-weight: bold;
}

.elements {
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-button {
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 20px;
  background: linear-gradient(to right, #ffd700, #d8a830); /* Golden gradient */
  border-radius: 25px;
  border: none; /* Remove border */
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Add box shadow for depth */
}
.add-button:hover {
  transform: translateY(-2px); /* Add upward movement on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Increase shadow size on hover for more depth */
}

.remove-button {
  font-size: 0.8rem; /* Smaller font size */
  font-weight: bold;
  padding: 6px 12px; /* Adjust padding */
  background: linear-gradient(to right, #555050, #b82a2a); /* Red gradient */
  border-radius: 20px; /* Smaller border radius */
  border: none; /* Remove border */
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Add box shadow for depth */
}

.remove-button:hover {
  transform: translateY(-1px); /* Add upward movement on hover */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Increase shadow size on hover for more depth */
}

.bar {
  background-color: rgba(146, 168, 190, 0.7);
  height: 25px;
  width: 45svw; 
  border: solid 1px white;
  border-radius: 5px; 
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); 
}

.level-counter {
  font-size: 2rem;
}

.xp-progress {
  height: 24px;
  background: linear-gradient(to right, #1e5f00, #00be06); /* Add gradient background */
  text-align: center;
  line-height: 24px;
  color: white;
  width: 0%; /* Initial width */
  transition: width 0.5s ease-in-out; /* Smooth transition for width changes */
  border-radius: 5px; /* Add border radius for rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add box-shadow for shine effect */
}

.neon-effect {
  box-shadow:
      0 0 3px #19FF19, /* Innermost glow */
      0 0 6px #19FF19, /* Inner glow */
      0 0 9px #19FF19, /* Middle glow */
      0 0 12px #19FF19; /* Outer glow */
  animation: pulsate 0.5s ease-in-out infinite;
}

@keyframes pulsate {
  0%, 100% {
      box-shadow:
          0 0 3px #19FF19,
          0 0 6px #19FF19,
          0 0 9px #19FF19,
          0 0 12px #19FF19;
  }
  50% {
      box-shadow:
          0 0 4px #19FF19,
          0 0 8px #19FF19,
          0 0 12px #19FF19,
          0 0 16px #19FF19;
  }
}

.progress-bar {
  transition: width 0.5s ease; /* Change 0.5s to adjust the duration of the animation */
}