* {
  /* margin: 0;
  padding: 0; */
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

html {
  text-rendering: geometricPrecision;
  font-size: var(--body-text-size, 18px);
}

body {
  font-size: var(--body-text-size);
  line-height: 1.5;
  font-family: var(--font-family-text);
  background-color: var(--background-04);
  margin: 0;
  overflow-x: hidden;
  color: var(--foreground-01);
}

h1,
.h1 {
  font-size: var(--headline-l);
}
h2,
.h2 {
  font-size: var(--headline-m);
}
h3,
.h3 {
  font-size: var(--headline-s);
}
h4,
.h4 {
  font-size: var(--headline-xs);
}
h5,
.h5 {
  font-size: var(--headline-xs);
}
h6,
.h6 {
  font-size: var(--body-text-size);
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.4s;
}

/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100px);
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

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

@media screen and (max-width: 320px) {
  * {
    hyphens: auto;
  }
}