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

/* Loading a chunky font variant locally or via system fallbacks to replicate the Kermit Extrabold character */
@font-face {
    font-family: 'Kermit Extrabold';
    src: local('Impact'), local('Arial Black'), sans-serif;
}

body {
    font-family: 'Inter', sans-serif;
}

.font-kermit {
    font-family: 'Kermit Extrabold', 'Inter', sans-serif;
    font-weight: 100;
}

.aesthetic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 9999px; /* Fully rounded */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.aesthetic-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
}

.aesthetic-btn:active {
    transform: translateY(0);
}