body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
color: black;
font-family: "Times New Roman", serif;
font-size: 18px;
line-height: 1.6;
margin: 0;
padding: 20px;
}

.container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
max-width: 1200px;
margin: auto;
}

.main {
flex: 1;
max-width: 800px;
background: rgba(255,255,255,0.85);
padding: 15px;
box-shadow: 4px 4px 0px rgba(0,0,0,0.25);
}

.header,
.footer {
text-align: center;
}

.header img,
.footer img {
width: min(700px, 95%);
border-radius: 5px;
}

.content h2 {
color: #2f2d30;
margin-top: 1.5em;
}

.sidebar {
width: 220px;
background: rgba(255,255,255,0.88);
padding: 12px;
position: sticky;
top: 10px;
box-shadow: 4px 4px 0px rgba(0,0,0,0.25);
}

.sidebar h3 {
text-align: center;
color: #2f2d30;
margin-top: 0;
}

.navbutton {
display: block;
text-align: center
margin-bottom: 8px;
padding: 8px;
text-decoration: none;
color: white;
background: #2f2d30;
border: 2px outset #9d9191;
font-weight: bold;
}

.navbutton:hover {
background: #2f2d30;
color: white;
}

a {
color: #2f2d30;
}

a:hover {
color: limegreen;
}

.blinkies {
margin-top: 25px;
text-align: center;
}

.blinkies img {
margin: 1px;
}

::selection {
background: limegreen;
color: white;
}

@media (max-width: 900px) {

.container {
flex-direction: column;
align-items: center;
}

.sidebar {
width: min(500px, 95%);
position: static;
}

}