body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.eye {
  width: 100px;
  height: 100px;
  background-image: url("eye.webp");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 66%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(1.2);
}

.pupil {
  width: 40px;
  height: 40px;
  position: absolute;
  transition: transform 0.08s;
}

.eye,
.pupil {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.troll {
  width: 120px;
  height: auto;
  position: absolute;
  top: 23%;
  left: 17%;
  animation: spin 2s linear infinite;
  transition: transform 0.2s ease;
}

.troll:hover {
  animation: spin 2s linear infinite, bounce 0.4s ease infinite;
}

.lion {
  position: absolute;
  top: 11%;
  left: 67%;
  width: 190px;
  height: auto;
  animation: glow 1.4s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.lion:hover {
  transform: scale(1.15);
  animation: glow-intense 0.6s ease-in-out infinite;
  cursor: pointer;
}

.webring-link-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.left img,
.right img {
  width: 110px;
  height: 100px;
  object-fit: contain;
}

.webring-gif {
  width: 120px;
  height: 120px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: scale(1.2); }
  50%       { transform: scale(1.35); }
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 18px #ff2600); }
  50%       { filter: drop-shadow(0 0 18px gold); }
}

@keyframes glow-intense {
  0%, 100% { filter: drop-shadow(0 0 12px gold) drop-shadow(0 0 24px #ff4200); }
  50%       { filter: drop-shadow(0 0 24px gold) drop-shadow(0 0 48px orange); }
}