:root { --bg: rgb(12, 12, 24); /* Dark background */ --logo: tomato; --text: rgb(120, 120, 164); --fonts: "Courier New"; } body { background-color: var(--bg); /* Dark background */ margin: 0; font-family: var(--fonts); color: var(--text); padding: 5%; overflow-x: hidden; /* Prevent horizontal overflow */ } header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding-top: 10px; } h1 { font-size: 36px; /* Fixed size */ color: var(--logo); margin: 0; padding-top: 10px; } sup, sub { font-size: 18px; color: salmon; } hr { color: crimson; margin-top: -20px; } h2 { font-size: 28px; /* Fixed size */ color: tomato; } p { font-size: 20px; /* Fixed size */ margin-bottom: 1rem; } a { color: tomato; font-size: 20px; /* Fixed size */ text-decoration: none; } a:hover { color: crimson; } footer { margin-top: 2rem; text-align: center; } .footer-flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .footer-left, .footer-right { flex: 1; } .footer-note { font-size: 18px; color: salmon; } .easter { color: var(--bg); text-align: right; } .logoSubline, .linksSubline { font-family: var(--fonts); font-size: 18px; color: salmon; text-align: left; display: block; padding-top: 5px; /* Added padding to avoid touching the top */ } /* Mobile styles */ @media (max-width: 1200px) { .header-flex { flex-direction: column; align-items: flex-start; } } @media (max-width: 768px) { body { padding: 3%; } .header-left, .header-right { text-align: left; } .footer-flex { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { h1 { font-size: 30px; } h2 { font-size: 24px; } p, a { font-size: 16px; } .footer-note { font-size: 16px; } }