header {
    text-align: center;
    background-color: black;
    margin: 5px; 
    
}

#wizard-h {
    color: yellow;
}

#healer-h {
    color: red
}

#druid-h {
    color: green
}

#bard-h {
    color:aqua
}

#addxp {
    align-items: center;
    width: 100%;
}

#resetxp {
    align-items: center;
    width: 100%;
}

.list-group {
 display: flex;
 justify-content: center;
 padding: 0;
 font-size: 25px;
 
}

.experienceBar {
    display: flex;
    align-items: center;
    float: center;
    width: 100%;
    background-color: silver;
    overflow: hidden;
    padding: 15px;
    text-align: center;
}

h2 {
    text-align: center;
}

.level-container {
    display: flex;
    align-items: center;
    margin-left: 10px;
    float: center;
}

.experienceFill {
    background-color: rgb(170, 31, 31);
    height: 20px;
    width: 0;
    transition: width 0.5s;
}

.btn-group {
    display: flex;
    width: 100%;
    text-align: center;
}

.spell-index {
    text-align: center;
    background-color: black;
}


footer {
    text-align: center;
    font-size: larger;
    background-color: black;
    margin: 5px;
    
}

@media (max-width: 690px) {
    .btn {
      font-size: 1rem;
      margin: 16px 0px 0px 0px;
      padding: 10px 15px;
    }
  }