/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Navigation status colors */
nav a.complete {
    color: #22c55e; /* green for completed pages */
}

nav a.in-progress {
    color: #f59e0b; /* orange/yellow for in-progress pages */
}

nav a.incomplete {
    color: #ef4444; /* red for incomplete/empty pages */
}

nav a.complete:hover {
    color: #16a34a; /* darker green on hover */
}

nav a.in-progress:hover {
    color: #d97706; /* darker orange on hover */
}

nav a.incomplete:hover {
    color: #dc2626; /* darker red on hover */
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Navigation */
nav {
    background-color: #2c3e50;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
}

nav a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 8px 12px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 3px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #34495e;
}

/* Main Content */
main {
    background-color: white;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

h1 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 2em;
}

h2 {
    color: #34495e;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.5em;
}

h3 {
    color: #34495e;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
}

p {
    margin-bottom: 15px;
}

a {
    color: #3498db;
}

a:hover {
    color: #2980b9;
}

/* Lists */
ul, ol {
    margin-left: 30px;
    margin-bottom: 15px;
}

li {
    margin-bottom: 8px;
}

/* Footer */
footer {
    text-align: center;
    color: #7f8c8d;
    font-size: 0.9em;
    padding: 20px;
}

/* Grid for galleries */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.gallery-item {
    background-color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    transition: transform 0.3s;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 3px;
}

/* Recipe cards */
.recipe {
    background-color: #ecf0f1;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-left: 4px solid #3498db;
}

.recipe h3 {
    margin-top: 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    nav a {
        display: block;
        margin-bottom: 5px;
    }
    
    main {
        padding: 20px;
    }
}