:root {
    --goal: 600000;
    --raised-amount: 9500;
    --raised-percentage: calc(var(--raised-amount) / var(--goal) * 100%);
    --raised: 17%;
    --raised-text: '17%';
}


.fundraiser-block {
  display: flex;
  flex-direction: column;
  gap: calc(var(--body-margin));
  /* margin-bottom: calc(var(--body-margin)*2); */
}
.fundraiser-goal {
  width: 100%;
  display: block;
  height: var(--footer-height);
  background: var(--background);
  border: 2px solid  var(--text-color);

  box-sizing: border-box;
  border-radius: var(--border-rad);
  margin-bottom: 0px !important;
}



.fundraiser-stats {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-weight: bold;
   align-content: center;
   align-items: center;
}

.fundraiser-stats .fr-left {
  text-align: left;
  width: 50%;
}

.fundraiser-stats .fr-right {
  text-align: right;
  width: 50%;
  color: var(--text-color);
}



.fundraiser-progress {
  /* width: var(--raised-percentage); */
  max-width: 100%;
  display: block;
  height: calc(var(--footer-height) - 4px);
    background:  var(--text-color);
  box-sizing: border-box;
  /* border-radius: var(--border-rad); */
}
.fundraiser-progress h6 {
  float:right;
  color: var(--background);
  line-height: calc(var(--footer-height) - 4px);
  /* font-weight: bold; */
  padding-right: var(--body-margin);
  text-align: right;
      margin-top:0px !important;
}
.fundraiser-progress h6::after {
  /* content: var(--raised-text); */
  text-align: right;
}

.fundraiser-progress h6.left {
  float: left;
  text-align: left;
}

.fundraiser-progress h6.right {
  float: right;
  text-align: right;
}