* {margin:0;padding:0;box-sizing:border-box}
body {font:16px 'Lora',serif;background:#dbd577;color:#242A88}
header {width:100%;background:#252b58;color:white;text-align:center;padding:1rem;border-bottom:4px solid black;z-index:1000;}
h1 {color:#bfaa53;font-size:2em;margin-bottom:0.5rem;}
img {max-width:100%; max-height: 30vh; float:left; margin:1em;}
header img {width:7em;transition:transform .3s;}
header img:hover {transform:scale(1.1);}

nav {display:flex;justify-content:center;gap:1rem;padding:1rem;background:#5F0201;}
nav details {position:relative;}
nav summary {color:white;cursor:pointer;padding:0.5rem 1rem;background:#5F0201;border:1px solid #fff;}
nav ul {position:absolute;list-style:none;background:#5F0201;padding:0.5rem;border:1px solid #fff;display:none;}
nav details[open] ul {display:block;z-index:1001;}
nav a {color:white;text-decoration:none;padding:0.5rem;display:block;}
nav a:hover {color:#bfaa53;background:rgba(255,255,255,0.1);}

article {position:relative;max-width:1200px;margin:2rem auto;padding:1rem;background:white;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);}
article details[open], td{border: 2px solid #242A88;}
blockquote {text-align:center;padding:1rem}
blockquote:before {content:">>";}
blockquote:after {content:"<<";}
h2,h3,h4,h5,h6 {color:#5F0201;margin:1rem 0;float:none;}
p {line-height:1.6;margin-bottom:1rem;}
ul,ol,li {padding:0 1em;}
footer {background:#252b58;color:white;padding:1rem;text-align:center;border-top:4px solid #5F0201;}

@media (max-width:768px) {
	nav {flex-direction:column;}
	nav ul {position:static;}
}