body {
  background-color: snow;
  width: 100%;
}
.top{
  text-align: center;
}
h1{
  text-align: center;
  font-family: courier;
  font-weight: lighter;
}
#show-dessert{
  text-decoration: none;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background-color: pink;
  border: dotted;
  color: red;
}
.container {
  position: relative;
  margin: 80px auto;
  height: 400px;
  width: 90%;
}
.tablecloth, .cup, .cup2, .plate, .plate2, .pasta, .pasta2, .roses/*, .dessert*/{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.tablecloth {
  z-index: 8;
}
.cup, .cup2, .plate, .plate2, .pasta, .pasta2, .roses {
  z-index: 10;
}

.tablecloth {
  height: 100%;
  width: 100%;
}

.cup {
  width: 80px;
  height: 120px;
  top: 10%;
  left: 20%;
}
.cup2{
  width: 80px;
  height: 120px;
  top: 50%;
  left: 70%;
}
.plate{
  height: 150px;
  width: 150px;
  top: 55%;
  left: 2%;
}
.plate2{
  height: 150px;
  width: 150px;
  top: 5%;
  left: 85%;
}
.pasta{
  height: 150px;
  width: 150px;
  top: 15%;
  left: 3%;
}
.pasta2{
  height: 150px;
  width: 150px;
  top: 50%;
  left: 85%;
}
.roses{
  height: 150px;
  width: 200px;
  top: 15%;
  left: 43%;
}

.dessert{
  display: none;
  position: absolute;
  height: 80px;
  width: 110px;
  left: 40px;
  top: 60%;
  z-index: 10;
}
.dessert2{
  display: none;
  position: absolute;
  height: 80px;
  width: 110px;
  left: 86%;
  top: 50px;
  z-index: 10;
}