/* Basic Button Styling */
a.fancy-button {
    display: inline-block; /* Allows padding and block styling */
    padding: 12px 24px; /* Space inside the button */
    font-size: 16px; /* Text size */
    font-weight: bold; /* Bold text */
    text-decoration: none; /* Remove underline */
    color: white; /* Text color */
    background: linear-gradient(90deg, #4caf50, #81c784); /* Gradient background */
    border: none; /* No border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    cursor: pointer; /* Pointer cursor on hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; /* Smooth hover effects */
    text-align: center; /* Center text inside the button */
  }
  
  /* Hover Effect */
  a.fancy-button:hover {
    transform: scale(1.1); /* Slightly enlarge the button */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
    background: linear-gradient(90deg, #388e3c, #66bb6a); /* Darker gradient */
  }
  
  /* Active State */
  a.fancy-button:active {
    transform: scale(0.95); /* Slight shrink on click */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Softer shadow */
    background: linear-gradient(90deg, #2e7d32, #4caf50); /* Subtle change on click */
  }
  
  /* Optional Focus Style */
  a.fancy-button:focus {
    outline: 3px solid #66bb6a; /* Highlight for accessibility */
    outline-offset: 2px;
  }
  
 /* Styling for the h1 tag */
h1.cool-title {
    font-family: 'Roboto', 'Arial', sans-serif; /* Modern and clean font */
    font-size: 2.5rem; /* Large but professional size */
    color: #e0f7ff; /* Very light blue, close to white */
    text-transform: uppercase; /* Professional all caps */
    letter-spacing: 1.5px; /* Gentle spacing for clarity */
    background: linear-gradient(90deg, #e6faff, #cfefff); /* Subtle gradient text */
    -webkit-background-clip: text; /* Clip gradient to text */
    -webkit-text-fill-color: transparent; /* Text filled by gradient */
    margin: 10px 0; /* Space above and below the title */
    text-align: left; /* Align text to the left */
    position: relative; /* For positioning the underline */
    padding-left: 10px; /* Optional left padding for alignment */
  }
  
  /* Short Underline */
  h1.cool-title::after {
    content: ""; /* Create an underline */
    display: block;
    width: 50%; /* Adjust this value to change the underline length */
    height: 3px; /* Thickness of the underline */
    background: #cfefff; /* Light blue underline */
    margin-top: 5px; /* Spacing between text and underline */
    border-radius: 2px; /* Rounded edges for the underline */
  }