body {
  margin: 0;
  padding: 0;
  background: url("backgroundo1.jpeg") no-repeat center center fixed;
  background-size: cover;
}

.nav {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.nav ul {
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin: 0;
}

.nav-button {
  display: block;
  width: 200px;
  height: 60px;
  background-image: url("sprites.png");
  background-repeat: no-repeat;
}

#products-btn {
  background-position: 0 0;
}
#products-btn:hover {
  background-position: 0 -60px;
}
#products-btn:active {
  background-position: 0 -120px;
}

#events-btn {
  background-position: 0 -180px;
}
#events-btn:hover {
  background-position: 0 -240px;
}
#events-btn:active {
  background-position: 0 -300px;
}

#about-btn {
  background-position: 0 -360px;
}
#about-btn:hover {
  background-position: 0 -420px;
}
#about-btn:active {
  background-position: 0 -480px;
}

#contact-btn {
  background-position: 0 -540px;
}
#contact-btn:hover {
  background-position: 0 -600px;
}
#contact-btn:active {
  background-position: 0 -660px;
}

#blog-btn {
  background-position: 0 -720px;
}
#blog-btn:hover {
  background-position: 0 -780px;
}
#blog-btn:active {
  background-position: 0 -840px;
}