.chore_boxes {
  padding-left: 2%;
  padding-right: 2%;
}

.chore_box {
  width: 400px;
  border-color: black;
  border-style: solid;
  border-width: 5px;

  background-image:
    repeating-linear-gradient(
      30deg,
      transparent 0px 3px,
      rgba(255, 255, 255, 0.027) 3px 6px
    ),
    repeating-linear-gradient(
      120deg,
      transparent 0px 3px,
      rgba(255, 255, 255, 0.027) 3px 6px
    ),
    linear-gradient(150deg, var(--c1) 0%, var(--c2) 100%);
}

.important_chore_box {
  border-color: rgb(255, 177, 8);
}

.chore_icon {
  width: 100%;
  aspect-ratio: 1;
  object-fit: scale-down;
}

.chore_progress_bar {
  background-color: rgba(255, 255, 255, 0.192);
  height: 100%;
  max-height: 20px;
  width: 100%;
  display: flex;
  justify-content: right;

  border-radius: 100vh;
  border-color: rgb(0, 0, 0);
  border-width: 5px;
  border-style: solid;

  overflow: hidden;
}

.chore_progress_bar_warning {
  animation-name: warning_bar_fill;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.chore_progress_bar_fill {
  background-color: var(--f, green);
  height: 100%;
  width: calc(var(--p) + 20px);
  margin-right: -20px;

  border-radius: 100vh;
}

.progress_bar_fill_scroll {
  background-image: repeating-linear-gradient(
    120deg,
    transparent 0px 7px,
    rgba(255, 255, 255, 0.394) 7px 10px
  );

  animation-name: progress_bar_fill_scroller;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}

@keyframes progress_bar_fill_scroller {
  from {
    background-position: -11px 0px;
  }
  to {
    background-position: 0px 0px;
  }
}

@keyframes warning_bar_fill {
  from {
    background-color: rgba(255, 255, 255, 0.192);
  }
  to {
    background-color: rgba(101, 0, 0, 0.586);
  }
}

.glow {
  animation: glow 1s ease-in-out infinite alternate;
  color: white;
}

@keyframes glow {
  from {
    text-shadow:
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 30px #e60073,
      0 0 40px #e60073,
      0 0 50px #e60073,
      0 0 60px #e60073,
      0 0 70px #e60073;
  }
  to {
    text-shadow:
      0 0 20px #fff,
      0 0 30px #ff4da6,
      0 0 40px #ff4da6,
      0 0 50px #ff4da6,
      0 0 60px #ff4da6,
      0 0 70px #ff4da6,
      0 0 80px #ff4da6;
  }
}

.fit_icon {
  width: 100%;
  aspect-ratio: 1;
  object-fit: scale-down;
}

.share_bound {
  height: 100h;
  min-height: 152px;
}

.share_col {
  height: 100%;
  width: 30px;
}

.share_bar {
  background-color: black;
  margin-left: 9px;
  margin-right: 9px;
  height: var(--h, 0%);
  border-radius: 100px;
}