/* From Uiverse.io by shadowmurphy */
.radio-form {
   display: flex;
   /* display: block;
   max-width: 10em; */
   margin: auto;
   position: relative;
}

.radio-form input {
   position: fixed;
   top: -1.5em;
   left: -1.5em;
}

.radio-form label {
   cursor: pointer;
   display: block;
   font-weight: bold;
   text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
   transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.radio-form label:not(:last-of-type) {
   margin-bottom: 1.5em;
}

.radio-form label span {
   box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.2), 0 0.3em 0.2em rgba(0, 0, 0, 0.2) inset;
   display: inline-block;
   margin-right: 0.5em;
   vertical-align: bottom;
   border-radius: 50%;
   width: 1.5em;
   height: 1.5em;
   transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 2), box-shadow 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.radio-form input:checked+label,
.radio-form input:checked+label span {
   color: #255ff4;
}

.radio-form input:checked+label,
.radio-form input:checked+label span {
   transition-delay: 0.4s;
}

.radio-form label span {
   transform: scale(1.2);
}

.radio-form .worm {
   top: 0.375em;
   left: 0.375em;
   position: absolute;
}

.radio-form .worm__segment {
   position: absolute;
   top: 0;
   left: 0;
   width: 0.75em;
   height: 0.75em;
   border-radius: 50%;
   transition: transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.radio-form .worm__segment:before {
   animation-duration: 0.4s;
   animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
   background: currentColor;
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
}

.radio-form .worm__segment:first-child:before,
.radio-form .worm__segment:last-child:before {
   box-shadow: 0 0 1em 0 currentColor;
}

@keyframes hop {

   from,
   to {
      transform: translateX(0);
   }

   50% {
      transform: translateX(-1.5em);
   }
}

.radio-form input:nth-of-type(1):checked~.worm .worm__segment {
   transform: translateX(0);
}

.radio-form input:nth-of-type(1):checked~.worm .worm__segment:before,
.radio-form input:nth-of-type(2):checked~.worm .worm__segment:before,
.radio-form input:nth-of-type(3):checked~.worm .worm__segment:before,
.radio-form input:nth-of-type(5):checked~.worm .worm__segment:before,
.radio-form input:nth-of-type(6):checked~.worm .worm__segment:before,
.radio-form input:nth-of-type(4):checked~.worm .worm__segment:before {
   animation-name: hop;
}

.radio-form input:nth-of-type(2):checked~.worm .worm__segment {
   transform: translateX(2.68em);
}

.radio-form input:nth-of-type(3):checked~.worm .worm__segment {
   transform: translateX(5.35em);
}

.radio-form input:nth-of-type(4):checked~.worm .worm__segment {
   transform: translateX(8em);
}

.radio-form input:nth-of-type(5):checked~.worm .worm__segment {
   transform: translateX(11em);
}

.radio-form input:nth-of-type(6):checked~.worm .worm__segment {
   transform: translateX(14em);
}

@media screen and (prefers-color-scheme: dark) {
   body {
      background: #17181c;
      /* color: #e3e4e8; */
   }

   .radio-form input:checked+label,
   .radio-form input:checked+label span,
   .radio-form .worm__segment:before {
      color: #5583f6;
   }
}