main {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1em;
}

@media (min-width: 800px) {
	body main {
		font-size: 2em;
		gap: .5em
	}
}

@media (max-width: 799px) {
	body main {
		font-size: 1.1em;
		gap: .5em
	}
	main .section-2 {
		gap: 1em;

	}
}


body main .section-2 a {
font-size: .7em
}

body, html {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center
}

body {
	gap: 3em
}

.section-2 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	gap: 2em;
}

footer {
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: .5em
}

@view-transition {
	navigation: auto;
	}


	@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;
}