/* .emoji is a wrapper (not the image itself): it owns position/size/the
   continuous float animation, while the <img> inside owns the hover-scale
   transform -- two separate elements so the two transforms never collide,
   and scaling always happens from the image's own center (no anchor-point
   drift the way growing width/height from a fixed top-left corner would
   cause). */
.emoji {
  position: fixed;
  display: block;
  /* pointer-events enabled (not none) so hovering an emoji itself can also
     trigger its callout cluster's group-hover -- see animations.css /
     js/landing-animations.js. */
  pointer-events: auto;
}

.emoji img {
  display: block;
  width: 100%;
  height: 100%;
}

.emoji--ruler {
  left: calc(var(--canvas-x) + 369.6px);
  top: 144.3px;
  width: 40.32px;
  height: 40.32px;
}

.emoji--eyes {
  left: calc(var(--canvas-x) + 1129.71px);
  top: 111.71px;
  width: 30.72px;
  height: 30.72px;
}

.emoji--evergreen {
  left: calc(var(--canvas-x) + 200.4px);
  top: 137.1px;
  width: 30.72px;
  height: 30.72px;
}

.emoji--deciduous {
  left: calc(var(--canvas-x) + 186px);
  top: 137.1px;
  width: 30.72px;
  height: 30.72px;
}

.emoji--pencil {
  left: calc(var(--canvas-x) + 229.64px);
  top: 420px;
  width: 30.72px;
  height: 30.72px;
}

.emoji--thinking {
  left: calc(var(--canvas-x) + 1173px);
  top: 562px;
  width: 30.72px;
  height: 30.72px;
}

.photo-tag {
  position: fixed;
  left: calc(var(--canvas-x) + 1220px);
  top: 361px;
  width: 134px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.948px;
  background: var(--bg);
  border: 0.292px solid var(--red);
  border-radius: 2.922px;
}

.photo-tag p {
  font-family: "Monomaniac One", sans-serif;
  font-size: 12.661px;
  letter-spacing: -0.3798px;
  color: var(--red);
  text-align: center;
}