div, p {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  background-color: #fff3f9;
  /*background-color: #fffafc;*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 0;
}

#main0 {
  position: relative;
  width: 600px;
  max-width: calc(100% - 2em);
  min-width: 0;
  margin-top: 2em;
}

#main1 {
  position: absolute;
  width: 100%;
  height: 0;
  padding-top: 100%;
  min-width: 0;
  background-color: #fff3f9;
}

button.tile-button {
  position: absolute;
  width: 11.5%;
  height: 0;
  padding-top: 11.5%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
  border: 0;
  outline: none;
  background-color: #ffcccc;
  cursor: pointer;
  border-radius: 2px;
}

button.tile-button:hover {
  background-color: #ffdddd;
}

#b0 { left:  0.50%; top:  0.50%; }
#b1 { left: 13.00%; top:  0.50%; }
#b2 { left:  0.50%; top: 13.00%; }

#b3 { left: 88.00%; top:  0.50%; }
#b4 { left: 75.50%; top:  0.50%; }
#b5 { left: 88.00%; top: 13.00%; }

#b0 { background-color: #ffcccc; }
#b1 { background-color: #f6d1d8; }
#b2 { background-color: #e7cccc; }
#b3 { background-color: #dec5d4; }
#b4 { background-color: #ffc8bb; }
#b5 { background-color: #efc1c1; }

.focal-image {
  position: absolute;
  padding: 0;
  margin: 0;
  opacity: 0.0;
}

.focal-image.active {
  opacity: 1.0;
  animation-duration: 0.25s;
  animation-name: fadein;
}

@keyframes fadein {
  from {
    opacity: 0.0;
  }
  
  50% {
    opacity: 0.5;
  }
  
  to {
    opacity: 1.0;
  }
}

.focal-image.inactive {
  opacity: 0.0;
  animation-duration: 0.25s;
  animation-name: fadeout;
}

@keyframes fadeout {
  from {
    opacity: 1.0;
  }
  
  50% {
    opacity: 0.2;
  }
  
  to {
    opacity: 0.0;
  }
}

#p0 { left: 28%; top: 15%; width: 50%; }
#p1 { left: 12.5%; top: 15%; width: 75%; }
#p2 { left: 14.5%; top: 15%; width: 75%; }
#p3 { left: 12.5%; top: 12%; width: 75%; }
#p4 { left:  0%; top:  4%; width: 100%; }
#p5 { left: 16%; top: 18%; width: 75%; }

#hearts {
  color: #e5d5d5;
  position: absolute;
  top: 115%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 18pt;
}