utilify-css/dist/styles.css

Tiny utility-first CSS library

.p-0 {
  padding: 0;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.g-0 {
  gap: 0;
}

.p-05 {
  padding: 0.5rem;
}

.px-05 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-05 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.m-05 {
  margin: 0.5rem;
}

.mt-05 {
  margin-top: 0.5rem;
}

.mr-05 {
  margin-right: 0.5rem;
}

.mb-05 {
  margin-bottom: 0.5rem;
}

.ml-05 {
  margin-left: 0.5rem;
}

.g-05 {
  gap: 0.5rem;
}

.p-1 {
  padding: 1rem;
}

.px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.m-1 {
  margin: 1rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.ml-1 {
  margin-left: 1rem;
}

.g-1 {
  gap: 1rem;
}

.p-2 {
  padding: 2rem;
}

.px-2 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.m-2 {
  margin: 2rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mr-2 {
  margin-right: 2rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.ml-2 {
  margin-left: 2rem;
}

.g-2 {
  gap: 2rem;
}

.p-4 {
  padding: 4rem;
}

.px-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.m-4 {
  margin: 4rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mr-4 {
  margin-right: 4rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.ml-4 {
  margin-left: 4rem;
}

.g-4 {
  gap: 4rem;
}

.p-8 {
  padding: 8rem;
}

.px-8 {
  padding-left: 8rem;
  padding-right: 8rem;
}

.py-8 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.m-8 {
  margin: 8rem;
}

.mt-8 {
  margin-top: 8rem;
}

.mr-8 {
  margin-right: 8rem;
}

.mb-8 {
  margin-bottom: 8rem;
}

.ml-8 {
  margin-left: 8rem;
}

.g-8 {
  gap: 8rem;
}

.p-16 {
  padding: 16rem;
}

.px-16 {
  padding-left: 16rem;
  padding-right: 16rem;
}

.py-16 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}

.m-16 {
  margin: 16rem;
}

.mt-16 {
  margin-top: 16rem;
}

.mr-16 {
  margin-right: 16rem;
}

.mb-16 {
  margin-bottom: 16rem;
}

.ml-16 {
  margin-left: 16rem;
}

.g-16 {
  gap: 16rem;
}

.p-24 {
  padding: 24rem;
}

.px-24 {
  padding-left: 24rem;
  padding-right: 24rem;
}

.py-24 {
  padding-top: 24rem;
  padding-bottom: 24rem;
}

.m-24 {
  margin: 24rem;
}

.mt-24 {
  margin-top: 24rem;
}

.mr-24 {
  margin-right: 24rem;
}

.mb-24 {
  margin-bottom: 24rem;
}

.ml-24 {
  margin-left: 24rem;
}

.g-24 {
  gap: 24rem;
}

.flex {
  display: flex;
}

.row {
  display: flex;
  flex-direction: row;
}

.col {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 640px) {
  .sm-flex {
    display: flex;
  }
  .sm-row {
    display: flex;
    flex-direction: row;
  }
  .sm-col {
    display: flex;
    flex-direction: column;
  }
  .sm-grid {
    display: grid;
  }
  .sm-p-0 {
    padding: 0;
  }
  .sm-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .sm-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .sm-m-0 {
    margin: 0;
  }
  .sm-g-0 {
    gap: 0;
  }
  .sm-p-05 {
    padding: 0.5rem;
  }
  .sm-px-05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .sm-py-05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .sm-m-05 {
    margin: 0.5rem;
  }
  .sm-g-05 {
    gap: 0.5rem;
  }
  .sm-p-1 {
    padding: 1rem;
  }
  .sm-px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sm-py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .sm-m-1 {
    margin: 1rem;
  }
  .sm-g-1 {
    gap: 1rem;
  }
  .sm-p-2 {
    padding: 2rem;
  }
  .sm-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sm-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .sm-m-2 {
    margin: 2rem;
  }
  .sm-g-2 {
    gap: 2rem;
  }
  .sm-p-4 {
    padding: 4rem;
  }
  .sm-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .sm-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .sm-m-4 {
    margin: 4rem;
  }
  .sm-g-4 {
    gap: 4rem;
  }
  .sm-p-8 {
    padding: 8rem;
  }
  .sm-px-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .sm-py-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .sm-m-8 {
    margin: 8rem;
  }
  .sm-g-8 {
    gap: 8rem;
  }
  .sm-p-16 {
    padding: 16rem;
  }
  .sm-px-16 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  .sm-py-16 {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }
  .sm-m-16 {
    margin: 16rem;
  }
  .sm-g-16 {
    gap: 16rem;
  }
  .sm-p-24 {
    padding: 24rem;
  }
  .sm-px-24 {
    padding-left: 24rem;
    padding-right: 24rem;
  }
  .sm-py-24 {
    padding-top: 24rem;
    padding-bottom: 24rem;
  }
  .sm-m-24 {
    margin: 24rem;
  }
  .sm-g-24 {
    gap: 24rem;
  }
}
@media (min-width: 768px) {
  .md-flex {
    display: flex;
  }
  .md-row {
    display: flex;
    flex-direction: row;
  }
  .md-col {
    display: flex;
    flex-direction: column;
  }
  .md-grid {
    display: grid;
  }
  .md-p-0 {
    padding: 0;
  }
  .md-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .md-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .md-m-0 {
    margin: 0;
  }
  .md-g-0 {
    gap: 0;
  }
  .md-p-05 {
    padding: 0.5rem;
  }
  .md-px-05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .md-py-05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .md-m-05 {
    margin: 0.5rem;
  }
  .md-g-05 {
    gap: 0.5rem;
  }
  .md-p-1 {
    padding: 1rem;
  }
  .md-px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .md-py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .md-m-1 {
    margin: 1rem;
  }
  .md-g-1 {
    gap: 1rem;
  }
  .md-p-2 {
    padding: 2rem;
  }
  .md-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .md-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .md-m-2 {
    margin: 2rem;
  }
  .md-g-2 {
    gap: 2rem;
  }
  .md-p-4 {
    padding: 4rem;
  }
  .md-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .md-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .md-m-4 {
    margin: 4rem;
  }
  .md-g-4 {
    gap: 4rem;
  }
  .md-p-8 {
    padding: 8rem;
  }
  .md-px-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .md-py-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .md-m-8 {
    margin: 8rem;
  }
  .md-g-8 {
    gap: 8rem;
  }
  .md-p-16 {
    padding: 16rem;
  }
  .md-px-16 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  .md-py-16 {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }
  .md-m-16 {
    margin: 16rem;
  }
  .md-g-16 {
    gap: 16rem;
  }
  .md-p-24 {
    padding: 24rem;
  }
  .md-px-24 {
    padding-left: 24rem;
    padding-right: 24rem;
  }
  .md-py-24 {
    padding-top: 24rem;
    padding-bottom: 24rem;
  }
  .md-m-24 {
    margin: 24rem;
  }
  .md-g-24 {
    gap: 24rem;
  }
}
@media (min-width: 1024px) {
  .lg-flex {
    display: flex;
  }
  .lg-row {
    display: flex;
    flex-direction: row;
  }
  .lg-col {
    display: flex;
    flex-direction: column;
  }
  .lg-grid {
    display: grid;
  }
  .lg-p-0 {
    padding: 0;
  }
  .lg-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .lg-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .lg-m-0 {
    margin: 0;
  }
  .lg-g-0 {
    gap: 0;
  }
  .lg-p-05 {
    padding: 0.5rem;
  }
  .lg-px-05 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .lg-py-05 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .lg-m-05 {
    margin: 0.5rem;
  }
  .lg-g-05 {
    gap: 0.5rem;
  }
  .lg-p-1 {
    padding: 1rem;
  }
  .lg-px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg-py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .lg-m-1 {
    margin: 1rem;
  }
  .lg-g-1 {
    gap: 1rem;
  }
  .lg-p-2 {
    padding: 2rem;
  }
  .lg-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .lg-m-2 {
    margin: 2rem;
  }
  .lg-g-2 {
    gap: 2rem;
  }
  .lg-p-4 {
    padding: 4rem;
  }
  .lg-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .lg-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .lg-m-4 {
    margin: 4rem;
  }
  .lg-g-4 {
    gap: 4rem;
  }
  .lg-p-8 {
    padding: 8rem;
  }
  .lg-px-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .lg-py-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .lg-m-8 {
    margin: 8rem;
  }
  .lg-g-8 {
    gap: 8rem;
  }
  .lg-p-16 {
    padding: 16rem;
  }
  .lg-px-16 {
    padding-left: 16rem;
    padding-right: 16rem;
  }
  .lg-py-16 {
    padding-top: 16rem;
    padding-bottom: 16rem;
  }
  .lg-m-16 {
    margin: 16rem;
  }
  .lg-g-16 {
    gap: 16rem;
  }
  .lg-p-24 {
    padding: 24rem;
  }
  .lg-px-24 {
    padding-left: 24rem;
    padding-right: 24rem;
  }
  .lg-py-24 {
    padding-top: 24rem;
    padding-bottom: 24rem;
  }
  .lg-m-24 {
    margin: 24rem;
  }
  .lg-g-24 {
    gap: 24rem;
  }
}
.grid-cols-autofit-8 {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.grid-cols-autofill-8 {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.w-8 {
  width: 8rem;
}

.h-8 {
  height: 8rem;
}

.grid-cols-autofit-12 {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.grid-cols-autofill-12 {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.w-12 {
  width: 12rem;
}

.h-12 {
  height: 12rem;
}

.grid-cols-autofit-14 {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.grid-cols-autofill-14 {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.w-14 {
  width: 14rem;
}

.h-14 {
  height: 14rem;
}

.grid-cols-autofit-16 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.grid-cols-autofill-16 {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.w-16 {
  width: 16rem;
}

.h-16 {
  height: 16rem;
}

.grid-cols-autofit-20 {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.grid-cols-autofill-20 {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.w-20 {
  width: 20rem;
}

.h-20 {
  height: 20rem;
}

.grid-cols-autofit-24 {
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

.grid-cols-autofill-24 {
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}

.w-24 {
  width: 24rem;
}

.h-24 {
  height: 24rem;
}

.grid-cols-autofit-32 {
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
}

.grid-cols-autofill-32 {
  grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
}

.w-32 {
  width: 32rem;
}

.h-32 {
  height: 32rem;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.justify-content-center {
  justify-content: center;
}

.rounded-full {
  border-radius: 100%;
}

.object-cover {
  object-fit: cover;
}

.shadow-1 {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.shadow-2 {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

:root {
  --animate-duration: 300ms;
  --animate-easing: ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate-fade-in {
  animation-name: fade-in;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.reveal-fade-in {
  animation-name: fade-in;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

@keyframes slide-up-xs {
  from {
    transform: translateY(0.25rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-down-xs {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(0.25rem);
    opacity: 1;
  }
}
.animate-slide-up-xs {
  animation-name: slide-up-xs;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.animate-slide-down-xs {
  animation-name: slide-down-xs;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.reveal-slide-up-xs {
  animation-name: slide-up-xs;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.reveal-slide-down-xs {
  animation-name: slide-down-xs;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

@keyframes slide-up-sm {
  from {
    transform: translateY(0.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-down-sm {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(0.5rem);
    opacity: 1;
  }
}
.animate-slide-up-sm {
  animation-name: slide-up-sm;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.animate-slide-down-sm {
  animation-name: slide-down-sm;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.reveal-slide-up-sm {
  animation-name: slide-up-sm;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.reveal-slide-down-sm {
  animation-name: slide-down-sm;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

@keyframes slide-up-md {
  from {
    transform: translateY(1rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-down-md {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(1rem);
    opacity: 1;
  }
}
.animate-slide-up-md {
  animation-name: slide-up-md;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.animate-slide-down-md {
  animation-name: slide-down-md;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.reveal-slide-up-md {
  animation-name: slide-up-md;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.reveal-slide-down-md {
  animation-name: slide-down-md;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

@keyframes slide-up-lg {
  from {
    transform: translateY(1.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-down-lg {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(1.5rem);
    opacity: 1;
  }
}
.animate-slide-up-lg {
  animation-name: slide-up-lg;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.animate-slide-down-lg {
  animation-name: slide-down-lg;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.reveal-slide-up-lg {
  animation-name: slide-up-lg;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.reveal-slide-down-lg {
  animation-name: slide-down-lg;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

@keyframes slide-up-xl {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-down-xl {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(2rem);
    opacity: 1;
  }
}
.animate-slide-up-xl {
  animation-name: slide-up-xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.animate-slide-down-xl {
  animation-name: slide-down-xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.reveal-slide-up-xl {
  animation-name: slide-up-xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.reveal-slide-down-xl {
  animation-name: slide-down-xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

@keyframes slide-up-2xl {
  from {
    transform: translateY(3rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-down-2xl {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(3rem);
    opacity: 1;
  }
}
.animate-slide-up-2xl {
  animation-name: slide-up-2xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.animate-slide-down-2xl {
  animation-name: slide-down-2xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
}

.reveal-slide-up-2xl {
  animation-name: slide-up-2xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.reveal-slide-down-2xl {
  animation-name: slide-down-2xl;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-easing);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.duration-100 {
  animation-duration: 100ms;
}

.duration-200 {
  animation-duration: 200ms;
}

.duration-300 {
  animation-duration: 300ms;
}

.duration-400 {
  animation-duration: 400ms;
}

.duration-500 {
  animation-duration: 500ms;
}

.duration-600 {
  animation-duration: 600ms;
}

.duration-700 {
  animation-duration: 700ms;
}

.duration-800 {
  animation-duration: 800ms;
}

.duration-900 {
  animation-duration: 900ms;
}

.duration-1000 {
  animation-duration: 1s;
}

.ease-default {
  animation-timing-function: ease;
}

.ease-in {
  animation-timing-function: ease-in;
}

.ease-out {
  animation-timing-function: ease-out;
}

.ease-in-out {
  animation-timing-function: ease-in-out;
}