body {
  background-color: beige;
  background-image: url("images/wood-background.jpg");
  font-family: Verdana;
  overflow: hidden;
}

.shelf {
  display: block;
  z-index: 9;
  content: url("images/wood-background.jpg");
  position: relative;
  width: 941px;
  height: 175px;
  margin-left: auto;
  margin-right: auto;
  transform: perspective(400px) rotateX(57deg);
  transition: transform 0.5s ease-in-out;
  filter: drop-shadow(0px 17px 54px #000000);
}

.shelf:hover {
  transform: perspective(400px) rotateX(45deg);
}

.stuffonshelf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 10;
  margin-bottom: -100px; /* This is what actually puts the stuff ON the shelf instead of hovering above it */
  width: 770px;
  margin-left: auto;
  margin-right: auto;
}

.example { /* Of course, you can delete this */
  width: 200px;
  height: 200px;
  padding: 5px;
}

.example2 { /* Of course, you can delete this */
  width: 200px;
  height: 300px;
  padding: 5px;
  background-color: magenta;
}

.painting {
  position: absolute;
  filter: drop-shadow(0px 2px 14px #000000);
  margin-left: -83px;
  margin-top: -40px;
}

.painting2 {
  filter: drop-shadow(0px 2px 14px #000000);
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: 250px;
  margin-right: -140px;
}

.catalogue {
  width: 300px;
  padding: 5px;
}

.skate {
  width: 250px;
  padding: 5px;
}