body{margin:0;font-family:Arial,sans-serif;background:linear-gradient(to right,#f0f0f0,#e0e0f0)}.App{display:grid;grid-template-rows:auto 1fr;grid-template-columns:250px 1fr;height:100vh;overflow:auto;gap:10px}header{display:flex;justify-content:space-between;align-items:center;background-color:#333;color:#fff;grid-column:1 / span 2;padding:15px;box-shadow:0 2px 5px #0000004d}header h1{margin:0;font-size:1.5em}form{padding:20px;display:flex;flex-direction:column;align-items:flex-start;background-color:#fff;border-radius:5px;box-shadow:0 2px 5px #0000001a;margin-bottom:20px}form input,form textarea{margin-bottom:15px;width:100%;padding:10px;border:1px solid #ccc;border-radius:4px}form input:focus,form textarea:focus{border-color:#66afe9;outline:none}nav{background-color:#dee9ff;padding:10px;border-radius:5px;box-shadow:0 2px 5px #0000001a}nav p{margin:10px 0}nav p:hover{text-decoration:underline;cursor:pointer;color:#06c}article{padding:10px;background-color:#fff;border-radius:5px;box-shadow:0 2px 5px #0000001a}article .date{font-style:italic;color:#888}article .body{white-space:pre-wrap;line-height:1.6}.error{background-color:#fdd;color:#d8000c;padding:10px;border:1px solid #d8000c;border-radius:4px}header button{margin-left:20px}@media (max-width: 768px){.App{grid-template-columns:30% auto}.App nav{width:auto}.App form input,.App form textarea{width:100%}}