.ordenarPalabras {
   --color1: #FFD83B;
   --color2: #009251;
   --color3: #79B82C;
   --color4: #444B44;
   --color5: #000000;

   --wrap_width: 800px;
   --font_size_base: 22px;
   --color_base: #666;

   --title_font_size: 1.4rem;
   --title_color: var(--color2);

   --element_gap_y: 5px;
   --element_gap_x: 5px;
   --element_height: 40px;


   font-size: var(--font_size_base);

   max-width: var(--wrap_width);
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

@media (max-width: 565px) {
   .ordenamientoTextos {
      --font_size_base: 18px;
   }
}

.title {
   display: block;
   text-align: center;
   font-size: var(--title_font_size);
   color: var(--title_color);
   margin-bottom: 20px;
}

.title span {
   font-size: 1.2rem;
   font-weight: normal;
   color: var(--color5);
}

.origin {
   margin-bottom: 10px;
}

.originList {
   list-style: none;
   padding-left: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.originList__item {
   background-color: #ededed;
   border-radius: 8px;
   margin: var(--element_gap_y) var(--element_gap_x);
}

.element {
   font-size: 1em;
   padding: 2px 10px;
   background-color: #fff;
   border: 1px solid var(--color1);
   border-radius: 8px;
   box-shadow: 0 2px 0 var(--color1);
   transform: scale(1);
   transition: transform .3s;
}

@media (max-width: 430px) {
   .element {
      font-size: .9em;
      padding: .4em .5em .5em;
   }
}

.element:hover {
   cursor: pointer;
   transform: scale(1.03);
}

.element--invisible {
   visibility: hidden;
}

.destiny {
   position: relative;
   margin-bottom: 40px;
}

.lines {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.line {
   height: calc(var(--element_height) + (var(--element_gap_y) * 2));
   border-bottom: 2px dashed var(--color4);
}

.destinyList {
   display: flex;
   flex-wrap: wrap;
}

.destiny .element {
   margin: var(--element_gap_y) var(--element_gap_x);
   border: 1px solid var(--color3);
   box-shadow: 0 2px 0 var(--color3);
   transition: border .3s, box-shadow .3s, transform .3s;
}

.destiny .element:hover {
   border: 2px solid var(--color1);
   box-shadow: 0 4px 0 var(--color1);
}

.score {
   text-align: center;
   position: sticky;
   bottom: 0;
}

.destiny .element.incorrecta {
   border: 2px solid hsl(344, 81%, 67%);
   box-shadow: 0 4px 0 hsl(344, 81%, 67%);
   background-color: hsl(344, 81%, 94%);
}

.controls {
   margin-bottom: 20px;
   display: flex;
   justify-content: center;
   gap: 20px;
}

.counterWord {
   display: flex;
   width: fit-content;
   background-color: var(--color1);
   color: var(--color2);
   border-radius: 2rem;
   padding: 5px 20px;
   font-size: 25px;
   line-height: 1.2;
   font-weight: 700;
}

.wordTime {
   display: flex;
   align-items: center;
   justify-content: end;
}

.icon {
   width: 30px;
   margin-right: 10px;
   animation: vibration .3s infinite;
}

.timer {
   color: var(--color2);
   font-size: 35px;
   line-height: 1;
   font-weight: 700;
}

.progress {
   display: block;
   align-items: center;
   justify-content: center;
   color: var(--color5);
   font-size: 1rem;
   line-height: 1;
   background-color: var(--color1);
   border-radius: 1.2rem;
   padding: 5px 20px;
   margin-bottom: 10px;
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
}

.d-none {
   display: none !important;
}