:root {
    --content: #000000;
    /* Base XP + Current Level ^ k * Scaler = XP For next level
    1 + Current Level ^ 1.1 * 4 = XP Needed
    1 = 2
    2 = 5
    3 = 10
    4 = 14
    5 = 19 */
    --currentRunecrafting: 0;
    --maxRunecrafting: 2;
  
    --currentArcanum: 0;
    --maxArcanum: 2;
  
    --currentAurum: 0;
    --maxAurum: 2;
  
    --currentUmbra: 0;
    --maxUmbra: 2;
  
    --currentLuminor: 0;
    --maxLuminor: 2;
  
    --currentIgnis: 0;
    --maxIgnis: 2;
  
    --currentEthenor: 0;
    --maxEthenor: 2;
  
    --currentDominus: 0;
    --maxDominus: 2; 
  
    --currentAstra: 0;
    --maxAstra: 2;
  
    --currentMonis: 0;
    --maxMonis: 2;
  
    --currentTactilis: 0;
    --maxTactilis: 2;
  
    --currentCryptus: 0;
    --maxCryptus: 2;
  
    --currentMortivex: 0;
    --maxMortivex: 2;
  
    --currentCultura: 0;
    --maxCultura: 2;
  
    --currentGlyphus: 0;
    --maxGlyphus: 2;
  
    --currentCodrexa: 0;
    --maxCodrexa:2;
  
    --currentIteron: 0;
    --maxIteron: 2;
  
    --currentKinetra: 0;
    --maxKinetra: 2;
  
    --currentDracorius: 0;
    --maxDracorius: 2;
  
    --currentNovar: 0;
    --maxNovar: 2;
  
    --currentGaius: 0;
    --maxGaius: 2;
  }
    
  .runecrafting {width: calc((var(--currentRunecrafting) / var(--maxRunecrafting)) * 100%);}
  .arcanum {width: calc((var(--currentArcanum) / var(--maxArcanum)) * 100%);}
  .aurum {width: calc((2 / 10) * 100%);}
  .umbra {width: calc((var(--currentUmbra) / var(--maxUmbra)) * 100%);}
  .luminor {width: calc((var(--currentLuminor) / var(--maxLuminor)) * 100%);}
  .ignis {width: calc((var(--currentIgnis) / var(--maxIgnis)) * 100%);}
  .ethenor {width: calc((var(--currentEthenor) / var(--maxEthenor)) * 100%);}
  .dominus {width: calc((var(--currentDominus) / var(--maxDominus)) * 100%);}
  .astra {width: calc((var(--currentAstra) / var(--maxAstra)) * 100%);}
  .monis {width: calc((var(--currentMonis) / var(--maxMonis)) * 100%);}
  .tactilis {width: calc((var(--currentTactilis) / var(--maxTactilis)) * 100%);}
  .cryptus {width: calc((var(--currentCryptus) / var(--maxCryptus)) * 100%);}
  .mortivex {width: calc((var(--currentMortivex) / var(--maxMortivex)) * 100%);}
  .cultura {width: calc((var(--currentCultura) / var(--maxCultura)) * 100%);}
  .glyphus {width: calc((var(--currentGlyphus) / var(--maxGlyphus)) * 100%);}
  .codrexa {width: calc((var(--currentCodrexa) / var(--maxCodrexa)) * 100%);}
  .iteron {width: calc((var(--currentIteron) / var(--maxIteron)) * 100%);}
  .kinetra {width: calc((var(--currentKinetra) / var(--maxKinetra)) * 100%);}
  .dracorius {width: calc((var(--currentDracorius) / var(--maxDracorius)) * 100%);}
  .novar {width: calc((var(--currentNovar) / var(--maxNovar)) * 100%);}
  .gaius {width: calc((var(--currentGaius) / var(--maxGaius)) * 100%);}

body {
    font-family: 'Trebuchet MS';
    font-size: 11px;
    margin: 0;
    color: white;
}

.container {
  margin-top: -10px;
}

.skill-title {
  margin-top: 10px;
  margin-bottom: 5px;
}

.skill-title span {
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  letter-spacing: 1px;
}

.progress-bar {
  position: relative;
  width: 200px;
  height: 5px;
  background: #333;
  border: 1px solid #aa7;
  border-radius: 5px;
  box-shadow: 0 0 2px #aa7;
  overflow: hidden;
}

.progress-bar:before, .progress-bar:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #aa7;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.progress-bar:before {
  left: -5px;
}

.progress-bar:after {
  right: -5px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00aa00, #00ff00);
  transition: width 0.5s ease;
}

.progress-fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: radial-gradient(circle, #aaffaa 0%, transparent 70%);
  opacity: 0.6;
}

hr {
    width: 200px;
    margin-top: 7px; 
    margin-left: 0;
    margin-bottom: 5px;
    border: 1px solid #895be5
}

.infolink
{
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    width: 1.8ex;
    height: 1.8ex;
    font-size: 2.5ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
    margin-right: 20px;
    padding: 1px;
    color: #895be5;
    background: white;
    border: 1px solid #895be5;
    text-decoration: none;
    float: right;
}

.infolink:hover
{
    color: white;
    background: rgb(255, 0, 0);
    border-color: white;
    text-decoration: none;
}