* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #6f5132;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #333;
}

.container {
max-width: 990px;
margin: 0 auto;
background: linear-gradient(to bottom, #f4ecdf 0%, #e8dcc8 100%);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

header {
background: linear-gradient(to bottom, #fff 0%, #f7f3ed 100%);
padding: 20px;
border-bottom: 3px solid #f90;
}

.logo {
font-size: 24px;
font-weight: bold;
color: #6f5132;
text-decoration: none;
display: inline-block;
}

.top-menu {
float: right;
margin-top: 5px;
font-size: 12px;
}

.top-menu a {
color: #6f5132;
text-decoration: none;
margin-left: 15px;
}

.top-menu a:hover {
text-decoration: underline;
color: #f90;
}

.top-menu span {
color: #f90;
margin: 0 5px;
}

.clearfix::after {
content: "";
display: table;
clear: both;
}

main {
background-color: #f4ecdf;
padding: 30px 20px;
min-height: 400px;
}

h1 {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="40"><rect fill="%23836744" width="100" height="40"/></svg>') repeat-x;
background-color: #836744;
color: #fff;
padding: 12px 20px;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
border-radius: 3px;
}

article {
background-color: #fff;
padding: 25px;
margin-bottom: 25px;
border: 1px solid #ddd;
border-radius: 3px;
color: #333;
}

article h2 {
color: #6f5132;
font-size: 18px;
margin-top: 20px;
margin-bottom: 12px;
font-weight: bold;
}

article h3 {
color: #836744;
font-size: 16px;
margin-top: 15px;
margin-bottom: 10px;
font-weight: bold;
}

article h4 {
color: #6f5132;
font-size: 14px;
margin-top: 12px;
margin-bottom: 8px;
font-weight: bold;
}

article p {
margin-bottom: 15px;
text-align: justify;
}

.transition-section {
background-color: #fff;
padding: 20px 25px;
margin-bottom: 25px;
border: 1px solid #ddd;
border-radius: 3px;
color: #333;
}

.transition-section p {
margin-bottom: 12px;
}

.links-section {
background-color: #fff;
padding: 25px;
border: 1px solid #ddd;
border-radius: 3px;
margin-bottom: 25px;
}

.links-section h2 {
color: #6f5132;
font-size: 18px;
margin-bottom: 15px;
font-weight: bold;
}

.links-section h3 {
background-color: #836744;
color: #fff;
padding: 8px 15px;
font-size: 14px;
margin-top: 20px;
margin-bottom: 10px;
border-radius: 3px;
}

.links-section h3:first-of-type {
margin-top: 0;
}

.links-section ul {
list-style: none;
column-count: 2;
column-gap: 20px;
margin-bottom: 15px;
}

.links-section li {
margin-bottom: 8px;
break-inside: avoid;
padding-left: 15px;
position: relative;
}

.links-section li::before {
content: "▸";
position: absolute;
left: 0;
color: #f90;
}

.links-section a {
color: #0052ab;
text-decoration: underline;
font-size: 13px;
}

.links-section a:hover {
text-decoration: none;
color: #f90;
}

footer {
background: linear-gradient(to bottom, #6f5132 0%, #5a4028 100%);
color: #fff;
padding: 15px 20px;
text-align: right;
font-size: 11px;
border-top: 3px solid #f90;
}

footer a {
color: #fff;
text-decoration: none;
margin-left: 10px;
}

footer a:hover {
text-decoration: underline;
color: #f90;
}

footer span {
color: #f90;
margin: 0 5px;
}

@media (max-width: 768px) {
.container {
margin: 0;
}

header {
padding: 15px;
}

.logo {
font-size: 20px;
display: block;
margin-bottom: 10px;
}

.top-menu {
float: none;
margin-top: 10px;
}

.top-menu a {
display: inline-block;
margin: 5px 10px 5px 0;
}

main {
padding: 20px 15px;
}

h1 {
font-size: 18px;
padding: 10px 15px;
}

article {
padding: 20px 15px;
}

article h2 {
font-size: 16px;
}

article h3 {
font-size: 15px;
}

.transition-section {
padding: 15px;
}

.links-section {
padding: 20px 15px;
}

.links-section ul {
column-count: 1;
}

footer {
text-align: center;
padding: 12px 15px;
}

footer a {
display: inline-block;
margin: 5px;
}
}

@media (max-width: 480px) {
h1 {
font-size: 16px;
}

article h2 {
font-size: 15px;
}

.links-section h3 {
font-size: 13px;
}
}