@import url(background.css);

:root {
  line-height: 1.125;
  font-family: Arial, "MS PGothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
}

main {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
}

main, #header {
  display: flex;
  flex-direction: column;
  align-items: center;
  place-items: center;
  justify-content: center;
}

#header {
  position: fixed;
  inset: 0;
}

#header img {
  width: 25rem;
  /*
  animation: 1s cubic-bezier(0, 0, 0.24, 1.24) both sun;
  */
}

h1, h2 {
  color: #2f2f2f;
  filter: drop-shadow(0 0 0 0 2rem black);
  /* -webkit-text-stroke: 1px black; */
}

h1 {
  font: bold 5rem sans-serif;
}

h2 {
  font: bold 3rem sans-serif;
}

@keyframes sun {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes scroll-scale {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  51% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

#scroll {
  position: fixed;
  margin: auto;
  padding: 2.5rem 1px;
  max-width: 0.25rem;
  background-color: white;
  inset: auto 0 2rem;
  animation: 3s ease 1s scroll-scale infinite both;
}