:root {
  --primary: #FFC100;
  --secondary: #FF8A08;
  --tertiary: #FF6500;
  --quaternary: #C40C0C;
}

html, body {
  min-height: 100%;
  height: 100%;
}

body {
  background: var(--primary);
  display: flex;
  align-items: center;
  overflow: hidden;
}

@keyframes wave {
  0% {
    height: 0%;
    opacity: 100%;
  }
  50% {
    height: 100%;
    opacity: 10%;
  }
  100% {
    height: 0%;
    opacity: 100%;
  }
}
.sand {
  background: linear-gradient(to top right, var(--secondary), var(--tertiary));
  width: 100%;
  height: 0%;
  display: block;
  border-radius: 100px;
  transform: rotate(65deg);
  animation: wave 10s ease-in-out;
  animation-iteration-count: infinite;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

a#add {
  background-color: #000;
  position: fixed;
  top: 1em;
  left: 1em;
  color: #fff;
  padding: 1em;
  line-height: 1em;
  border-radius: 12.5px;
}/*# sourceMappingURL=style.css.map */