/* datasets.css */

/* Centering the title and applying a cool font */
.centered-section {
    text-align: center;
    margin: var(--spacing-lg) auto;
    max-width: 800px;
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

.centered-section h2 {
    font-family: 'Orbitron', sans-serif; /* Applying cool font */
    font-size: var(--font-size-h2); /* Ensuring font size matches the design */
    color: var(--color-primary);
    text-align: center; /* Centering the title */
    margin: var(--spacing-md) 0; /* Adjusting margins for spacing */
}

/* Adjusting the paragraph styles */
.centered-section p {
    font-family: 'Roboto', sans-serif;
    color: var(--color-text-primary);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-base); /* Ensuring consistent line height */
    margin: var(--spacing-md) 0; /* Adjusting margins for spacing */
}

/* Card styles */
.card {
    margin: var(--spacing-lg) auto;
    max-width: 600px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.card-title {
    font-family: 'Orbitron', sans-serif; /* Applying cool font */
    font-size: var(--font-size-h3); /* Ensuring font size matches the design */
    color: var(--color-accent);
    margin: var(--spacing-sm) 0; /* Adjusting margins for spacing */
}

.card-text {
    font-family: 'Roboto', sans-serif;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: var(--spacing-md) 0; /* Adjusting margins for spacing */
}

/* Button styles */
.button {
    display: inline-block;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-secondary);
    color: var(--color-text-light);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.button:hover, .button:focus {
    background: var(--color-highlight);
    transform: scale(1.05);
}