/* Define primary colors */
:root {
    --primary-red: #C10206; /* UE Red */
    --secondary-red: #A50113; /* Carmine */
    --primary-white: #FFFFFF; /* White */
    --primary-black: #010A10; /* Rich Black */
}

/* Apply global styles */
body {
    background-color: var(--primary-white);
    color: var(--primary-black);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Style headers */
h1, h2 { 
    color: var(--primary-red);
    display: flex;
    justify-content: center;  /* Centers horizontally */
    align-items: center;      /* Centers vertically */
    text-align: center;       /* Ensures text is centered */
    flex-direction: column;   /* Stacks elements if there are multiple */
}
h3, h4, h5, h6 {
    color: var(--primary-red);
    margin-bottom: 0.5em;
}

/* Style links */
a {
    color: var(--primary-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-red);
}

/* Style navigation menu */
nav {
    background-color: var(--primary-black);
    padding: 1em;
}

nav a {
    color: var(--primary-white);
    margin-right: 1em;
}

nav a:hover {
    color: var(--primary-red);
}

/* Style buttons */
button, .button {
    background-color: var(--primary-red);
    color: var(--primary-white);
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover, .button:hover {
    background-color: var(--secondary-red);
}

/* Style sections */
section {
    padding: 2em;
    margin-bottom: 1em;
}

/* Add subtle animations */
.fade-in {
    animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}