@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import './utilities/_fonts.css';
@import './utilities/_icons.css';
@import './utilities/_root.css';
@import './utilities/_global.css';
@import './utilities/_header.css';
@import './utilities/_footer.css';
@import './utilities/_search.css';
@view-transition {
  navigation: auto;
}
/* Create a custom animation */
@keyframes move-out {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.75);
  }
}

@keyframes move-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in-out both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in-out 0.4s both move-in;
}