:root{
    --fall: url('../images/fall.svg');
    --initinere: url('../images/initinere.svg');
    --transito: url('../images/transito.svg');
    --fired: url('../images/fired.svg');
    --money: url('../images/money.svg');
    --sick: url('../images/sicknes.svg');
    --star: url("../images/star.svg");
}

.fall-icon {
    display: inline-block;
    width: 1.25em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--fall);
    mask-image: var(--fall);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

.initinere-icon{
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--initinere);
    mask-image: var(--initinere);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.transit-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--transito);
    mask-image: var(--transito);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.fired-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--fired);
    mask-image: var(--fired);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.succesion-icon{
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--money);
    mask-image: var(--money);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sickness-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--sick);
    mask-image: var(--sick);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.star-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    
    background-color: currentColor;
    -webkit-mask-image: var(--star);
    mask-image: var(--star);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}