@import url("https://fonts.googleapis.com/css?family=Varela+Round");

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  letter-spacing: 1.1px;
}

body,
html {
  width: 100%;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2vh;
  padding-inline: 1rem;
  list-style: none;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0;
}

.menu li {
  height: 50px;
  padding-inline: 1rem;
  transition: background-position-x 0.9s linear;
  font-family: "Varela Round", sans-serif;
  text-align: center;
}

.menu li a {
  display: inline-block;
  font-size: 22px;
  color: #777;
  text-decoration: none;
  transition: all 0.45s;
}

.menu li:has(a:hover) {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
  animation: line 1s;
  animation-iteration-count: infinite;
}

.menu li a:hover {
  color: black;
}

@keyframes line {
  0% {
    background-position-x: 390px;
  }

  100% {
    background-position-x: 0;
  }
}

footer {
  position: sticky;
  bottom: 0;
  background-color: white;
  padding: 0.25rem;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
  z-index: 1000;
}