:root {
  box-sizing: border-box;
  color-scheme: only light;
  font-size: 1vmin;
}

body {
  background: rgb(242, 237, 211);
  /* background: black; */
  /* background: url(imgs/circles-in-a-circle-1923.jpg); */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

img {
  display: none;
}


/* Turn cross-document view-transitions on */
/* Note that this at-rule is all that is needed to create the default cross-fade animation  */
@view-transition {
  navigation: auto;
}

/* Customize the default animation behavior */
::view-transition-group(root) {
  animation-duration: 0.5s;
}

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

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

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

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