@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import './variables.css';
@import './dark.css';

@import './typography.css';

* {
  box-sizing: border-box;
}

html:root,
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

html.fade-in:root {
  animation: fadeInAnimation ease 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

html.fade-out:root {
  animation: fadeOutAnimation ease 0.4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
    /* background-color: var(--bg-primary);
    color: var(--text-primary); */
  }

  100% {
    opacity: 0;
    /* background-color: var(--bg-ultimate);
    color: var(--text-ultimate); */
  }
}
