/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Page */
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
background: #393d3a; /* your page grey */
color: #fff;
}
/* Sticky Header (full-bleed) */
header.site-header {
position: sticky;
top: 0;
background: #000;
width: 100%;
z-index: 1000;
margin: 0;
background: linear-gradient(to bottom, #000000 0%, #1a1a1a 50%, #2e2e2e 100%);
color: white; /* no centering nonsense */
}
/* Header inner layout */
#header1 {
max-width: 1100px;
margin: 0 auto;
padding: 12px 16px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 150%;
}
/* Container for content (move padding off ) */
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
/* Images */
img { display: block; margin-inline: auto; max-width: 100%; height: auto; }
#logo { height: 200px; } /* ‘length’ is not a property */
/* Kill the negative vw margins */
#changelog {
background: #5e5f5e;
border-radius: 12px;
margin: 20px auto;
padding: 16px;
width: min(100%, 900px);
}
/* Footer sane */
footer { margin: 80px auto 40px; text-align: center; opacity: 0.9; }
/* Sidebar positioning */
.sidebar {
position: fixed;
top: 50%;
left: 10px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 1000; /* keeps it above other content */
}
/* Melon button */
.sidebar-btn {
display: inline-block;
}
.sidebar-icon {
width: 256px;
height: 256px;
max-width: none;
border-radius: 50%; /* circular melon */
object-fit: cover;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Fun hover effect */
.sidebar-icon:hover {
transform: scale(1.15) rotate(5deg);
box-shadow: 0 0 12px rgba(0, 255, 0, 0.6);
}
#kofi {
color: white;
font-weight: bold;
}
#news {
margin: inline;
border-radius: 50%;
display: flex;
flex-direction: column;
}