body {
  background-color: beige;
}
#ball1, #ball2 {
  width: 5.5%;
  position:absolute;
  padding-left:1.1%;
  padding-top:.8%;
  z-index:2;
}
#ball2 {
  visibility:hidden;
}
.bin {
  width:100%;
  padding-left:9%;
}
#box {
  visibility:hidden;
  margin:0 auto;
  xborder:1px solid black;
  display:grid;
  grid-template-columns: repeat(18,1fr);
  grid-template-rows: repeat(18,1fr);
  position:relative;
}
.number {
  font-size:3.5vmin;
  font-style:italic;
  font-weight: bold;
  font-family: sans-serif;
  color:white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  z-index:4;
}
.pipe, .bin, .number, #smiley, #message_container {
  display:flex;
  justify-content:center;
  align-items:center;
}
.pipe {
  width:120%;
}
#smiley {
  grid-row:1/span 18;
  grid-column:1/span 18;
  z-index:5;
}
#smiley {
  visibility:hidden;
}
#smiley img {
  width:50%;
}
#message_container {
  grid-row:3/span 3;
  grid-column:1/span 18;
}
#message {
  background-color:lightblue;
  border:2px solid blue;
  padding: 1.5vmin 3vmin;
  font-size:4vmin;
  font-family: sans-serif;
  opacity:.7;
}
#back, #again, #message_container {
  z-index:5;
}
#back {
  grid-row:2/span 2;
  grid-column:2/span 2;
}
#again {
  grid-row:4/span 2;
  grid-column:17/span 2;
}
#home {
  grid-row:2/span 2;
  grid-column:17/span 2;
}
#back, #again, #home {
  width:80%;
}