@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Base styles for the new color palette */
body {
    font-family: 'Inter', sans-serif;
    /* This will be your dark greyish-black background */
    background-color: #0c1014;
    color: #e2e8f0;
}

/* Custom button hover effect */
.btn-hover-scale {
    transition: transform 0.2s ease-in-out;
}
.btn-hover-scale:hover {
    transform: scale(1.05);
}

/* Message box styling for the homepage */
.message-box {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    /* Deep turquoise background */
    background-color: #2dd4bf;
    color: #0c1014;
    font-weight: bold;
}

/* Style the main headings with a new gradient.
   Note: Tailwind classes in the HTML already control the gradient color.
   This rule is a fallback. */
.gradient-text {
  background-clip: text;
  color: transparent;
}