@keyframes leftToRight {
  from {
    left: -100%; }
  to {
    left: 0; } }

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
    /* Start above the original position */ }
  to {
    opacity: 1;
    transform: translateY(0);
    /* Move to the original position */ } }

@keyframes slideDown2 {
  0% {
    display: block;
    height: fit-content;
    opacity: 0; }
  20% {
    transform: translateY(-20px);
    opacity: 0; }
  100% {
    height: fit-content;
    /* Set this to the maximum height of the content */
    transform: translateY(0px);
    opacity: 1;
    display: block; } }

@keyframes slideUp {
  0% {
    display: block;
    height: fit-content;
    opacity: 1; }
  20% {
    transform: translateY(0px);
    opacity: 1;
    height: fit-content; }
  100% {
    height: fit-content;
    /* Set this to the maximum height of the content */
    transform: translateY(-30px);
    opacity: 0;
    display: none; } }