:root {
  --color-primary: rgb(221, 124, 208);
  --color-secondary: rgb(182, 230, 143);
}

html {
  font-size: 16px;
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

body {
  background: linear-gradient(
    270deg,
    var(--color-primary),
    var(--color-secondary)
  );
  background-size: 400% 400%;

  -webkit-animation: move 30s ease infinite;
  -moz-animation: move 30s ease infinite;
  animation: move 30s ease infinite;

  display: flex;
  flex-direction: column;
  height: 100vh;
}

@-webkit-keyframes move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

main {
  flex-grow: 1;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 96px;
  font-family: "Sixtyfour", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "BLED" 0, "SCAN" 0;
}

footer {
  padding: 48px;
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
}