/* ------------------------------
   Basic reset
------------------------------ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  background: #185b24;
  overflow-x: hidden;
}


/* ------------------------------
   Homepage scene
------------------------------ */

.homepage-scene {
  position: relative;

  /* Original illustration ratio: 1433 × 805 */
  width: 100vw;
  aspect-ratio: 1433 / 805;

  margin: 0 auto;
  overflow: hidden;
}


/* The complete illustrated homepage */
.homepage-background {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;
  pointer-events: none;
}


/* ------------------------------
   Shared character button styles
------------------------------ */

.character-button {
  position: absolute;
  display: block;

  transform: translate(-50%, -50%);

  line-height: 0;
  cursor: pointer;

  z-index: 5;
}

.character-button img {
  display: block;
  width: 100%;
  height: auto;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}


/* Hover animation */
.character-button:hover img,
.character-button:focus-visible img {
  transform: scale(1.1);

  filter:
    drop-shadow(0 0 8px rgba(255, 200, 60, 0.85))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.4));
}


/* Keyboard accessibility */
.character-button:focus-visible {
  outline: 3px solid white;
  outline-offset: 6px;
  border-radius: 12px;
}


/* ------------------------------
   Bear placement
------------------------------ */

.bear-button {
  /*
    These percentages are measured relative
    to the complete homepage illustration.
  */

  left: 85.1%;
  top: 32.5%;

  width: 6.5%;
}


/* ------------------------------
   Banana placement
------------------------------ */

.banana-button {
  left: 85.1%;
  top: 79.5%;

  width: 6.5%;
}