/* Override Bulma's CSS custom properties for hot pink links */
:root {
    --bulma-link: #ff1493; /* Hot pink */
    --bulma-link-hover: #ff69b4; /* Lighter hot pink on hover */
    --bulma-link-active: #dc1470; /* Darker hot pink for active state */
}

/* Prevent flash of unstyled content - start content hidden */
#content {
    opacity: 0;
}

/* Additional specific overrides if needed */
.tabs li.is-active a {
    border-bottom-color: var(--bulma-link) !important;
}

header h1.title {
    font-family: "lullabies-regular", sans-serif;
    color: #ff1493;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
    #header {
        text-align: center !important;
        padding: 1rem;
    }
    
    #header h1.title {
        font-size: 1.75rem;
    }
    
    #header h2 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    #header h3 {
        font-size: 1rem;
    }
    
    .buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .buttons .button {
        width: 100%;
        max-width: 300px;
        margin-bottom: 0.75rem;
    }
}