#StoryCompletion {
  display: none;
}  
  
  .completion-animation {
    height: 100%;
    display: grid;
    place-items: center;
  }
  .completion-animation-label *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .completion-animation-label {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    height: 125px;
    width: 125px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-left-color: #5cb85c;
    position: relative;
    animation: completion-animation-rotate 1.2s linear infinite;
  }
  
  @keyframes completion-animation-rotate {
    50% {
      border-left-color: #ff4268;
    }
    75% {
      border-left-color: hsla(37, 95%, 57%, 1);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  #completion-animation-check {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: none;
  }
  #completion-animation-check:checked ~ .completion-animation-label {
    animation: none;
    border-color: #5cb85c;
    transition: border 0.5s ease-out;
  }
  
  .completion-animation-label .completion-animation-icon {
    display: none;
  }
  
  .completion-animation-label .completion-animation-icon::after {
    position: absolute;
    content: "";
    height: 56px;
    width: 28px;
    border-top: 4px solid #5cb85c;
    border-right: 4px solid #5cb85c;
    left: 28px;
    top: 50%;
    transform: scaleX(-1) rotate(135deg);
    transform-origin: left top;
    animation: completion-animation-icon 0.8s ease;
  }
  
  @keyframes completion-animation-icon {
    0% {
      height: 0;
      width: 0;
      opacity: 1;
    }
    20% {
      height: 0;
      width: 28px;
      opacity: 1;
    }
    40% {
      height: 56px;
      width: 28px;
      opacity: 1;
    }
    100% {
      height: 56px;
      width: 28px;
      opacity: 1;
    }
  }
  
  #completion-animation-check:checked ~ .completion-animation-label .completion-animation-icon {
    display: block;
  }