@font-face{
  font-family: 'Univers';
  src: url('/font/UniversRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Stefan';
  src: url('/font/ABCStefan-Simple-Trial.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Gestures';
  src: url('/font/Gestures-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body, h1, h2, h3 {
  font-family: 'Univers', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(14px, 2vw, 26px);
  margin: 0;
  padding: 0;
  font-weight: 400;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
  animation-name: page-fade-out;
}

::view-transition-new(root) {
  animation-name: page-fade-in;
}

@keyframes page-fade-out {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(2px);
  }
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}