body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f2;
  margin: 0;
  font-family: sans-serif;
  overflow: hidden; /* Prevent scrolling */
}

.confession-container {
  text-align: center;
  max-width: 600px;
  padding: 20px;
  overflow: hidden; /* Prevents overflow within the container */
}

.confession-text {
  font-family: 'Shadows Into Light', cursive;
  font-size: 1.5rem; /* Fixed size for desktop to prevent overflow */
  line-height: 1.4;
  color: #2f2f2f;
  margin-bottom: 20px;
  opacity: 0; /* Initially invisible */
  transition: opacity 1s ease-in-out, filter 1s ease-in-out, transform 1s ease-in-out;
}

.confession-text.show {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.confession-text:not(.show) {
  opacity: 0;
  filter: blur(3px);
  transform: scale(0.98);
}

/* Tablet and Small Screens */
@media (max-width: 768px) {
  .confession-container {
    max-width: 90%;
    padding: 15px;
  }

  .confession-text {
    font-size: 3.5vw; /* Viewport-based font size for better readability */
    line-height: 1.4;
  }
}

/* Style for clickable text to stand out as the focus */
.clickable-text {
  color: inherit; /* Keep the text color harmonious with the parent */
  text-decoration: none; /* Remove the default underline */
  font-family: inherit; /* Match the parent font */
  font-size: inherit; /* Match the parent font size */
  line-height: inherit; /* Match the parent line height */
  transition: transform 0.2s ease, color 0.2s ease; /* Add smooth transitions */
}

/* Enhance the hover effect without breaking harmony */
.clickable-text:hover {
  transform: scale(1.05); /* Slightly enlarge on hover for emphasis */
  color: #ff5722; /* A bold accent color (e.g., a deep orange-red) */
}



/* Very Small Screens (Mobile) */
@media (max-width: 480px) {
  .confession-container {
    max-width: 95%;
    padding: 10px;
  }

  .confession-text {
    font-size: 4vw; /* Scaled-down font size for smaller screens */
    line-height: 1.3;
    word-wrap: break-word; /* Ensure text wraps properly */
  }
}