/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Image Evolution                                         - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.canvas-pair {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center; }

.canvas-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0; }
  .canvas-wrapper canvas {
    border: 1px solid var(--draw-color-surface);
    border-radius: 4px;
    background: var(--background-color-ground); }
  .canvas-wrapper figcaption {
    font-size: 0.875rem;
    color: var(--text-color-surface); }

.image-controls {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem; }
  .image-controls .is-start {
    display: block; }
  .image-controls .is-pause {
    display: none; }
  .image-controls.is-running .is-start {
    display: none; }
  .image-controls.is-running .is-pause {
    display: block; }

#fitness-bar {
  width: 100%;
  height: .5rem;
  margin-top: .5rem;
  appearance: none;
  border: none;
  border-radius: .25rem;
  background: var(--draw-color-surface); }
  #fitness-bar::-webkit-progress-bar {
    background: var(--draw-color-surface);
    border-radius: .25rem; }
  #fitness-bar::-webkit-progress-value {
    background: var(--draw-color-primary);
    border-radius: .25rem;
    transition: width 100ms; }
  #fitness-bar::-moz-progress-bar {
    background: var(--draw-color-primary);
    border-radius: .25rem; }