html { font-family: sans-serif; background: #eee; padding: 1rem; }
a { color: #4A6E2A; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { width:25%; margin: 0 auto; padding: 1em; background: #4A6E2A; border: 1px solid #4E3B31; color: white; text-align: center}
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #BFAF9D; }
input[type=submit] { align-self: start; min-width: 10em; }
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    grid-template-rows: auto 1fr; /* One row for the top boxes, one for the bottom */
    gap: 10px; /* Space between boxes */
}
.box1 {
    grid-column: 1; /* First column */
    grid-row: 1; /* First row */
}
.box2 {
    grid-column: 2; /* Second column */
    grid-row: 1; /* First row */
}
.box3 {
    grid-column: 1 / span 2; /* Span both columns */
    grid-row: 2; /* Second row */
}

body {
    background-color: #BFAF9D; /* Light Brown */
    color: #4E3B31; /* Dark Brown */
    font-family: Arial, sans-serif;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
th, td {
    padding: 12px;
    text-align: left;
    border-top: 1px solid #4E3B31; /* Dark Brown */
    border-bottom: 1px solid #4E3B31; /* Dark Brown */
}
th {
    background-color: #4A6E2A; /* Olive Green */
    color: white;
}
tr:hover {
    background-color: #A8D5BA; /* Light Green */
}
.action {
    background-color: #4A6E2A; /* Olive Green */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.action:hover {
    background-color: #4E3B31; /* Dark Brown */
}