.fa-btn-thin {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 1px solid Dimgrey;
  border-radius: 50%;
  transition: all 0.3s ease;
  & i {
    color: DimGrey;
    transition: all 0.3s ease;
  }
}
.fa-btn-light {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-color: Gainsboro;
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
  & i {
    color: DimGrey;
    transition: transform 0.3s ease;
  }
}
.fa-btn-dark {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-color: Grey;
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
  & i {
    color: Whitesmoke;
    transition: transform 0.3s ease;
  }
}
.fa-btn-light-grad {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(220deg, cyan, darkturquoise);
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
  & i {
    color: lightcyan;
    transition: transform 0.3s ease;
  }
}
.fa-btn-mid-grad {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(40deg, hotpink, lightsalmon);
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
  & i {
    color: lavenderblush;
    transition: transform 0.3s ease;
  }
}
.fa-btn-dark-grad {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(220deg, mediumslateblue, mediumorchid);
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
  & i {
    color: aliceblue;
    transition: transform 0.3s ease;
  }
}
.lt-btn-thin {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 1px solid Dimgrey;
  border-radius: 50%;
  & dotlottie-player {
    filter: invert(65%);
  }
}
.lt-btn-light {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-color: Gainsboro;
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
  & dotlottie-player {
    filter: invert(65%);
  }
}
.lt-btn-dark {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-color: Grey;
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}
.lt-btn-light-grad {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(220deg, cyan, darkturquoise);
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}
.lt-btn-mid-grad {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(40deg, hotpink, lightsalmon);
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}
.lt-btn-dark-grad {
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(220deg, mediumslateblue, mediumorchid);
  border: 0px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}
@media (hover: hover) {
  .fa-btn-thin:hover {
    border-color: DodgerBlue;
    & i {
      color: DodgerBlue;
      transform: scale(1.2);
    }
  }
  .fa-btn-light:hover {
    box-shadow: 2px 2px 8px #8f8f8f inset;
    & i {
      transform: scale(1.2);
    }
  }
  .fa-btn-dark:hover {
    box-shadow: 2px 2px 8px #3f3f3f inset;
    & i {
      transform: scale(1.2);
    }
  }
  .fa-btn-light-grad:hover {
    box-shadow: 2px 2px 8px #359899 inset;
    & i {
      transform: scale(1.2);
    }
  }
  .fa-btn-mid-grad:hover {
    box-shadow: 2px 2px 8px #a65562 inset;
    & i {
      transform: scale(1.2);
    }
  }
  .fa-btn-dark-grad:hover {
    box-shadow: 3px 3px 8px 2px #472e6d inset;
    & i {
      transform: scale(1.2);
    }
  }
  .lt-btn-light:hover {
    box-shadow: 2px 2px 8px #8f8f8f inset;
  }
  .lt-btn-dark:hover {
    box-shadow: 2px 2px 8px #3f3f3f inset;
  }
  .lt-btn-light-grad:hover {
    box-shadow: 2px 2px 8px #359899 inset;
  }
  .lt-btn-mid-grad:hover {
    box-shadow: 2px 2px 8px #a65562 inset;
  }
  .lt-btn-dark-grad:hover {
    box-shadow: 3px 3px 8px 2px #472e6d inset;
  }
}
.style-thin {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 1px solid dimgrey;
  border-radius: 50%;
  cursor: pointer;
}
.style-light {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-color: gainsboro;
  border: 0px solid gainsboro;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.style-dark {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-color: grey;
  border: 0px solid grey;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.style-light-grad {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(220deg, cyan, darkturquoise);
  border: 0px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.style-mid-grad {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(40deg, hotpink, lightsalmon);
  border: 0px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.style-dark-grad {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(220deg, mediumslateblue, mediumorchid);
  border: 0px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.style-square {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 1px solid dimgrey;
  border-radius: 6px;
  cursor: pointer;
}
@media (hover: hover) {
  .style-thin:hover {
    border-color: Dodgerblue;
  }
}
@media (hover: hover) {
  .style-thin:hover {
    border-color: Dodgerblue;
  }
  .style-light:hover {
    box-shadow: 2px 2px 4px 2px #8f8f8f inset;
  }
  .style-dark:hover {
    box-shadow: 2px 2px 4px 2px #3f3f3f inset;
  }
  .style-light-grad:hover {
    box-shadow: 2px 2px 4px 2px #359899 inset;
  }
  .style-mid-grad:hover {
    box-shadow: 2px 2px 4px 2px #a65562 inset;
  }
  .style-dark-grad:hover {
    box-shadow: 2px 2px 4px 2px #472e6d inset;
  }
  style-square:hover {
    border-color: Dodgerblue;
  }
}