/* Set height to 100% for body and html to enable the background image to cover the whole page */
body, html {
height: 100%;
}

bgimg {
/* Background image */
background-image: url('/w3images/forestbridge.jpg');
/* Full-screen */
height: 100%;
/* Center the background image */
background-position: center;
/* Scale and zoom in the image */
background-size: cover;
/* Add position: relative to enable absolutely positioned elements inside the image (place text) */
position: relative;
/* Add a white text color to all elements inside the .bgimg container */
color: white;
/* Add a font */
font-family: "Courier New", Courier, monospace;
/* Set the font-size to 25 pixels */
font-size: 25px;
}

/* Position text in the top-left corner */
topleft {
position: absolute;
top: 0;
left: 16px;
}

/* Position text in the bottom-left corner */
bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}

/* Position text in the middle */
middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

/* Style the <hr> element */
hr {
margin: auto;
width: 40%;
}

/* Base setup for the circular area */
.circle-container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optional Center Content */
.center-logo {
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  color: #333;
}

/* Individual character link wrappers */
.char-link {
  position: absolute;
  width: 200px;  /* Size of the character image */
  height: 200px;
  
  /* The Math Variables */
  --total: 3; /* Change this to your total number of characters */
  --radius: 150px; /* How far from the center the images sit */
  
  /* Calculating X and Y coordinates using trigonometry */
  --angle: calc(var(--i) * (360deg / var(--total)));
  transform: 
    translate(
      calc(cos(var(--angle)) * var(--radius)), 
      calc(sin(var(--angle)) * var(--radius))
    );
  
  transition: transform 0.3s ease;
}

/* Style the images to be perfect circles */
.char-link img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Hover effects for interaction */
.char-link:hover {
  /* Keeps its position but scales up slightly when hovered */
  transform: 
    translate(
      calc(cos(var(--angle)) * var(--radius)), 
      calc(sin(var(--angle)) * var(--radius))
    ) 
    scale(1.15);
  z-index: 10;
}

/* The class you apply to your frog image */
.jumping-frog {
  width: 200px; /* Adjust size as needed */
  height: auto;
  
  /* Apply the animation: 
     - 'jump' is the name of the keyframes below
     - '1.2s' is the duration of one full jump cycle
     - 'ease-in-out' makes the physics look natural (slowing at the peak)
     - 'infinite' keeps it looping forever
  */
  animation: jump 1.2s ease-in-out infinite;
  
  /* Keeps the transform origin at the bottom so the squash effect happens on the ground */
  transform-origin: bottom center; 
}

/* The physics of the jump */
@keyframes jump {
  0%, 100% {
    transform: translateY(0) scale(1, 1); /* On the ground, normal size */
  }
  10% {
    transform: translateY(0) scale(1.1, 0.8); /* Squashing down to prep for the leap */
  }
  50% {
    transform: translateY(-80px) scale(0.9, 1.1); /* Peak of the jump, stretched out vertically */
  }
  90% {
    transform: translateY(0) scale(1.05, 0.95); /* Landing impact, slight squash */
  }
}