/* Global styles */
:root {
    --primary-color: #3498db; /* A classic blue */
    --secondary-color: #2ecc71; /* A fresh green */
    --danger-color: #e74c3c; /* For errors/warnings */
    --success-color: #27ae60; /* A slightly darker green for success */
    --text-color: #333; /* Dark gray for text */
    --bg-color: #f8f9fa; /* Very light gray background */
    --header-footer-bg: #343a40; /* Darker gray for headers/footers */
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    --transition: all 0.3s ease; /* Smooth transitions */
}

body {
    font-family: 'Roboto', sans-serif; /* Modern, clean font */
    line-height: 1.6;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: var(--transition);
}

/* Color themes (Simplified) */
.theme-light {
    --bg-color: #f8f9fa;
    --text-color: #333;
    --header-footer-bg: #343a40;
}

.theme-dark {
    --bg-color: #212529; /* Darker background */
    --text-color: #f8f9fa;
    --header-footer-bg: #343a40;
}

/* Header styles */
header {
    background: var(--header-footer-bg);
    color: #ffffff;
    padding: 1rem 0; /* Use rem for scalable units */
    text-align: center;
    box-shadow: var(--box-shadow);
}

.logo {
    font-size: 2.5rem; /* Slightly smaller logo */
    color: var(--primary-color);
    font-weight: 600; /* Semi-bold logo */
    margin-bottom: 0.5rem; /* Space below the logo */
}

nav {
    display: flex;
    justify-content: center; /* Center the navigation */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin: 0 1rem; /* Consistent spacing */
}

nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    transition: var (--transition);
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle hover background */
}

/* Main content styles */
main {
    max-width: 960px; /* Wider content area */
    margin: 2rem auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

main:hover {
    transform: translateY(-4px); /* More pronounced hover effect */
}

.card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin: 1rem;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow on hover */
}

/* Headings */
h1, h2, h3 {
    color: var(--text-color);
    margin-bottom: 1rem;
}

h2 {
    border-bottom: 2px solid var(--primary-color); /* Use primary color for the line */
    padding-bottom: 0.5rem;
}

/* Paragraphs */
p {
    margin-bottom: 1rem;
}

/* Button styles */
button {
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--box-shadow);
}

button:hover {
    background: var(--secondary-color); /* Use secondary color on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Footer styles */
footer {
    text-align: center;
    padding: 1rem 0;
    background: var(--header-footer-bg);
    color: #ffffff;
    box-shadow: var(--box-shadow);
}

/* Responsive styles (Improved) */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Stack navigation vertically */
    }

    nav li {
        margin: 0.5rem 0; /* Adjust spacing */
    }

    .card {
        margin: 1rem 0; /* Remove side margins on smaller screens */
    }
}

/* Removed Animations:  Animations can be distracting.  It's better to use them sparingly and intentionally.  If you want to add them back, do so thoughtfully.  For example, a subtle hover animat[...]
*/

/* Sprite shapes */
.sprite {
    width: 50px; /* Default width */
    height: 50px; /* Default height */
    position: relative;
    display: inline-block;
}

.sprite.circle {
    border-radius: 50%;
    background-color: var(--primary-color);
}

.sprite.square {
    background-color: var(--secondary-color);
}

.sprite.triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid var(--danger-color);
}

.sprite.triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid var(--success-color);
}

/* Character shapes */
.character {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.character .head {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    margin-bottom: 10px;
}

.character .body {
    width: 30px;
    height: 50px;
    background-color: var(--secondary-color);
}

.character .arms {
    position: absolute;
    top: 20px;
    left: -10px;
    width: 50px;
    height: 10px;
    background-color: var(--secondary-color);
}

.character .legs {
    display: flex;
    justify-content: space-between;
    width: 30px;
}

.character .legs .leg {
    width: 10px;
    height: 30px;
    background-color: var(--danger-color);
}