pres_security_benchmarking_llm/pages/end.md

<div class="bouncing-container">
  <div class="bg-icon security-icon" style="top: 35%; left: 15%;"><i class="fas fa-shield-alt"></i></div>
  <div class="bg-icon bug-icon" style="top: 65%; left: 70%;"><i class="fas fa-bug"></i></div>
  <div class="bg-icon ai-icon" style="top: 20%; left: 80%;"><i class="fas fa-robot"></i></div>
  <div class="bg-icon lock-icon" style="top: 75%; left: 30%;"><i class="fas fa-lock"></i></div>
  <div class="bg-icon warning-icon" style="top: 45%; left: 60%;"><i class="fas fa-exclamation-triangle"></i></div>
  
  <div class="bouncing-box">
    <h1 class="multicolor-text">Questions?</h1>
  </div>
</div>

<style>
.bouncing-container {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.bouncing-box {
  position: absolute;
  padding: 2rem 3rem;
  background: rgba(23, 28, 45, 0.8);
  border: 3px solid var(--primary-color);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  animation: bounce 20s linear infinite;
  z-index: 10;
  top: 10%;
  left: 20%;
}

.multicolor-text {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(
    to right, 
    #800020, /* Deep burgundy */
    #B22222, /* Firebrick red */
    #0066CC, /* Deeper blue */
    #104E8B, /* Dark blue */
    #800020  /* Back to burgundy */
  );
  background-size: 400% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gentle-rainbow 6s linear infinite;
}

.bg-icon {
  position: absolute;
  font-size: 4rem;
  z-index: 5;
}

.bg-icon i {
  font-size: 4rem;
}

.security-icon {
  animation: security-bounce 24s linear infinite;
  color: rgba(0, 102, 204, 0.35); /* Blue icon */
}

.bug-icon {
  animation: bug-bounce 22s linear infinite;
  color: rgba(178, 34, 34, 0.35); /* Red icon */
}

.ai-icon {
  animation: ai-bounce 26s linear infinite;
  color: rgba(103, 92, 246, 0.35); /* Purple icon */
}

.lock-icon {
  animation: lock-bounce 28s linear infinite;
  color: rgba(15, 116, 147, 0.35); /* Blue-teal icon */
}

.warning-icon {
  animation: warning-bounce 25s linear infinite;
  color: rgba(176, 27, 27, 0.35); /* Red warning icon */
}

@keyframes bounce {
  0% {
    top: 10%;
    left: 20%;
  }
  12.5% {
    top: 70%;
    left: 75%;
  }
  25% {
    top: 30%;
    left: 80%;
  }
  37.5% {
    top: 80%;
    left: 15%;
  }
  50% {
    top: 40%;
    left: 10%;
  }
  62.5% {
    top: 65%;
    left: 50%;
  }
  75% {
    top: 25%;
    left: 40%;
  }
  87.5% {
    top: 55%;
    left: 65%;
  }
  100% {
    top: 10%;
    left: 20%;
  }
}

@keyframes security-bounce {
  0% { top: 35%; left: 15%; font-size: 3.8rem; }
  20% { top: 75%; left: 40%; font-size: 4.2rem; }
  40% { top: 25%; left: 75%; font-size: 3.5rem; }
  60% { top: 65%; left: 25%; font-size: 4rem; }
  80% { top: 45%; left: 60%; font-size: 3.7rem; }
  100% { top: 35%; left: 15%; font-size: 3.8rem; }
}

@keyframes bug-bounce {
  0% { top: 65%; left: 70%; font-size: 4.2rem; }
  25% { top: 20%; left: 30%; font-size: 3.6rem; }
  50% { top: 80%; left: 20%; font-size: 4rem; }
  75% { top: 40%; left: 75%; font-size: 3.8rem; }
  100% { top: 65%; left: 70%; font-size: 4.2rem; }
}

@keyframes ai-bounce {
  0% { top: 20%; left: 80%; font-size: 3.6rem; }
  20% { top: 55%; left: 15%; font-size: 4.1rem; }
  40% { top: 70%; left: 60%; font-size: 3.7rem; }
  60% { top: 25%; left: 45%; font-size: 4.2rem; }
  80% { top: 60%; left: 85%; font-size: 3.8rem; }
  100% { top: 20%; left: 80%; font-size: 3.6rem; }
}

@keyframes lock-bounce {
  0% { top: 75%; left: 30%; font-size: 4rem; }
  25% { top: 30%; left: 65%; font-size: 3.5rem; }
  50% { top: 65%; left: 15%; font-size: 4.3rem; }
  75% { top: 15%; left: 50%; font-size: 3.7rem; }
  100% { top: 75%; left: 30%; font-size: 4rem; }
}

@keyframes warning-bounce {
  0% { top: 45%; left: 60%; font-size: 3.9rem; }
  20% { top: 15%; left: 25%; font-size: 4.2rem; }
  40% { top: 60%; left: 40%; font-size: 3.5rem; }
  60% { top: 30%; left: 80%; font-size: 4.1rem; }
  80% { top: 70%; left: 10%; font-size: 3.8rem; }
  100% { top: 45%; left: 60%; font-size: 3.9rem; }
}

@keyframes gentle-rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>

<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">