body {
margin: 0;
padding: 0;
font-family: "Segoe UI", "Helvetica Neue", sans-serif;
color: #2f2323;
background-color: #f5f7fa;
}

body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://images.pexels.com/photos/1435895/pexels-photo-1435895.jpeg); 
    /*Photo by Engin Akyurt*/
    /*Above link is a royalty free image, no risk of copyright infringement */
background-size: cover;
background-position: center;
opacity: 0.35;
z-index: -1;
}

form {
font-size: 1rem;
color: #23272f;
margin: 20px auto;
padding: 20px;
max-width: 1400px;
background-color: #ffffffee;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(44, 62, 80, 0.13);
}

input, textarea, select {
padding: 10px;
font-family: inherit;
font-size: 1rem;
background-color: #f8f0f0;
border: 1px solid #d1bfbf;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
transition: background-color 0.3s, border-color 0.3s;
}

input:focus, textarea:focus, select:focus {
background-color: #ffffff;
outline: none;
border-color: #ac5e5e;
}

input#reset, input#submit {
width: auto;
cursor: pointer;
background-color: #ac5e5e;
color: white;
border: none;
border-radius: 8px;
transition: background-color 0.3s ease;
}

input#reset:hover, input#submit:hover {
background-color: #6b4040;
}

div.label {
width: 120px;
float: left;
}

div#head {
margin-bottom: 30px;
padding: 20px;
border-radius: 10px;
text-align: center;
}

div#head h1, div#head h2 {
margin: 0;
}

div#head h2 {
font-style: italic;
color: #8f6b6b;
}

div#container, p#top {
margin: 20px auto;
padding: 20px;
max-width: 1400px;
background-color: #ffffffee;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(44, 62, 80, 0.09);
}

p.normal {
background-color: #fbeaeacc;
border-radius: 8px;
padding: 15px;
}

p.Title {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 5px;
}

p.Guide {
font-weight: bold;
font-style: italic;
}

p.Ingredients {
font-weight: 300;
}

p.PostedBy {
text-align: right;
font-style: italic;
}

div.post {
background-color: #f6e3e39d;

grid-template-columns: repeat(2, 1fr);
border-radius: 8px;
padding: 15px;
margin: 20px auto;
max-width: 1400px;
border: 1px solid #ccc;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

div.error, div.success {
padding: 15px;
border-radius: 8px;
margin: 10px auto;
max-width: 1400px;
border: 2px solid #23272f;
}

div.error {
background-color: #fdd8d8;
color: #c0392b;
}

div.success {
background-color: #e6fbe6;
color: #218c5b;
}

div.success > ul, div.error > ul {
list-style-type: square;
padding-left: 20px;
}

div.options {
background-color: #ffeaea;
padding: 15px;
border-radius: 8px;
margin: 20px auto;
max-width: 600px;
}

div.options a {
display: inline-block;
margin: 5px;
padding: 8px 12px;
background-color: #ac5e5e;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.3s;
}

div.options a:hover {
background-color: #6b4040;
}

div.toolbar {
display: flex;
justify-content: space-around;
background-color: #4a3838;
padding: 10px 0;
}

div.toolbar a {
color: white;
text-decoration: none;
padding: 10px 20px;
transition: background-color 0.3s;
}

div.toolbar a:hover {
background-color: #ac5e5e;
}

table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

th, td {
border: 1px solid #bfc9d1;
padding: 10px;
text-align: left;
}

th {
background-color: #eaf3ff;
}

a {
color: #5e81ac;
text-decoration: underline;
transition: color 0.2s;
}

a:hover {
color: #6b4040;
}

a:focus-visible, input:focus-visible, button:focus-visible {
    outline: 2px solid #ac5e5e;
    outline-offset: 2px;
}

.post-details {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 1em 0;
    background: #fafafa;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
    overflow: hidden;
}

.post-details[open] {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.post-details summary {
    font-size: 1.2em;
    font-weight: bold;
    padding: 1em;
    cursor: pointer;
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    outline: none;
    transition: background 0.2s;
}

.post-details summary:hover,
.post-details summary:focus {
    background: #e0e0e0;
}

.post-details .post {
    padding: 1em;
}