* {
	box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: #f4eeff; /* Light lavender background */
    font-family: "Roboto", sans-serif; /* Added sans-serif fallback */
    padding: 0;
    margin: 0;
    color: #333; /* Default text color for better readability */
    line-height: 1.6; /* Improved line spacing for readability */
}

.title {
    background: linear-gradient(to right, #6A11CB 0%, #2575FC 100%); /* Attractive gradient background */
    color: #ffffff; /* White text for contrast against the gradient */
    /* Responsive font size with min and max values */
    font-size: clamp(2rem, 5vw, 3.5rem); /* Min: 2rem, Preferred: 5vw, Max: 3.5rem */
    text-align: center;
    width: 100%;
    /* Responsive padding */
    padding: clamp(30px, 8vh, 70px) 20px; /* Vertical padding responsive to viewport height, horizontal padding fixed */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
    border-bottom: 5px solid #424874; /* Accent border */
    letter-spacing: 1px; /* Slight letter spacing for a more refined look */
    font-weight: 700; /* Bolder font weight */
}

.title a {
    color: inherit; /* Inherits the white color from .title */
    text-decoration: none;
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
}

.title a:hover,
.title a:focus {
    opacity: 0.85; /* Slight fade on hover/focus for interactivity */
}