.work-sans {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500 ; /* from 100 to 900 */ 
    font-style: normal;
  }
.truncate {
    width: 300px;
    inline-size: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
   }

h2 {
    justify-content: center;
    color: #00FFAA;
    
}
h1 {
  font-size:5em;
  text-align: left;
  margin-bottom: auto;
  display:inline;
  margin-left: 40px;
  align-items: flex-end;

  color: #00FFAA;

  animation: circulate_text_color 24s infinite;
}
/* #D3D6D3  #c300ff  #00FFAA*/

progress {
  width: 100%;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  /*border: 1px solid #4d5154;*/
  border-radius: 5px;
  accent-color: #00FFAA;
  background-color: #212529;
}

progress::-moz-progress-bar {
  /* Firefox */
  accent-color: #00FFAA;
  background-color: #00FFAA;
}
progress::-webkit-progress-bar {
  /* Chrome, Safari, Opera */
  background-color:  #212529;
}
progress::-webkit-progress-value {
  background-color:   #00FFAA;
}

.derp-primary {
  --bs-btn-color: #000000;
  --bs-btn-bg: #00FFAA;
  --bs-btn-border-color: #00FFAA;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c300ff;
  --bs-btn-hover-border-color: #c300ff;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a600d8;
  --bs-btn-active-border-color: #a200d3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #D3D6D3;
  --bs-btn-disabled-bg: #00FFAA;
  --bs-btn-disabled-border-color: #D3D6D3;
}

.table-derp-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #4d5154;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #a600d8;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

a {
  color: #fff;
}
a:hover {
  color: #D3D6D3;
  background-color: transparent;
}




#eye_black_left_bottle {
    animation: rotateInnerRing 3s linear infinite, color_circulate 6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }

  @keyframes rotateInnerRing {
    from {
      transform: rotate(0deg) translate(45px) rotate(0deg);
      fill: #00FFAA;
    }
    to {
      transform: rotate(360deg) translate(45px) rotate(-360deg);
      
    }
  }

@keyframes color_circulate {
    0%,20% {
        fill: #c300ff;
    }
    30%{
        fill: #D3D6D3;
    }
    40%,60% {
        fill: #00FFAA;
    }
    70%{
        fill: #D3D6D3;
    }
    80%,100% {
        fill: #c300ff;
    }
}
@keyframes circulate_text_color {
    0%,20% {
      color: #00FFAA;
    }
    30%{
      color: #D3D6D3;
    }
    40%,60% {
      color:  #00FFAA;
    }
    70%{
      color: #D3D6D3;
    }
    80%,100% {
      color: #00FFAA;
    }
}
@keyframes color_stroke_circulate {
    0%,20% {
      stroke: #D3D6D3;
      
    }
    30%{
      stroke: #c300ff;
    }
    40%,60% {
      stroke: #D3D6D3;
      
    }
    70%{
      stroke: #00FFAA;
    }
    80%,100% {
      stroke: #D3D6D3;
    }
}

  #eye_white_left_bottle {
    animation: rotateOuterRing 6s linear infinite, color_stroke_circulate 6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
    z-index: 0;
  }

  @keyframes rotateOuterRing {
    0% {
        transform: rotate(0deg) translate(45px) rotate(360deg);
    }
    33% {
        transform: rotate(-90deg) translate(45px) rotate(-360deg);
    }
    66% {
        transform: rotate(-70deg) translate(45px) rotate(-360deg);
    }
    100% {
      transform: rotate(0deg) translate(45px) rotate(360deg);
    }
  }

body {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500 ; /* from 100 to 900 */ 
  font-style: normal;
  /* background-image: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="m 45,125 c 0,-25.06 20.96,-45.01 45.02,-45.01 25.06,0 45.02,20.95 45.02,45.01 0,25.06 -20.96,45.03 -45.02,45.03 -25.06,0 -45.02,-20.97 -45.02,-45.03 z" style="fill:none;stroke:%232323;stroke-width:10.0006;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" id="eye_white_left_bottle" /><path d="m 100,100 c 0,-10.86 -8.05,-19.93 -19.92,-19.93 -10.87,0 -19.93,8.07 -19.93,19.93 0,10.87 8.06,19.93 19.93,19.93 10.87,0 19.92,-8.06 19.92,-19.93" style="fill:%2300FFAA;fill-opacity:1;fill-rule:nonzero;stroke:none" id="eye_black_left_bottle" /></svg>');
  background-repeat: no-repeat; */
}

/* .animated_background {
  background-image: url("/static/a_derp.svg");
  background-repeat: no-repeat;
  min-height: 200px;
} */

.alert-info {
  --bs-alert-color: #FFF;
  --bs-alert-bg: #c300ff;
  --bs-alert-border-color: #D3D6D3;
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}