* {transition: 0.5s;}
body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  background: #bbb;
}
canvas {
  width: 100%;
  height: 42%;
  background-color: #ff6;
  border-radius: 15px;
  /*
  background-image: url(http://image-url/image1.jpg);
  background-size: cover;
  backgrouns-position: center; */
}
html, body, section {
  height: 100%;
}
h1, p {
  padding: 2%;
  margin: 2%;
  border: 2px solid #000;
  border-radius: 40px;
  background-color: #ff6;
  font-size: 2em;
}
p {
  float: left;
  display: none;
}
span#preload-01 {
  background-image: url("fru1.jpg")
}
span#preload-02 {
  background-image: url("fru2.jpg")
}
span#preload-03 {
  background-image: url("fru3.jpg")
}
span#preload-04 {
  background-image: url("fru4.jpg")
}
span#preload-05 {
  background-image: url("fru5.jpg")
}