/* Base Styles */ html, body { height: 100%; margin: 0; font-family: 'Georgia', serif; background-color: #121212; color: #f5f5f5; position: relative; } .container { width: 90%; /* Make it responsive and fit within the screen */ max-width: 950px; /* Set a max width */ margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center; position: relative; padding: 1rem; /* Add breathing room for small screens */ box-sizing: border-box; } .background-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 600px; /* Limit size */ height: auto; opacity: 0.15; /* Light transparency for clarity */ z-index: 0; pointer-events: none; } blockquote { font-size: clamp(1.2rem, 2vw, 1.8rem); /* Responsive font size */ font-style: italic; margin: 0; line-height: 1.5; z-index: 1; } .author { margin-top: 1rem; font-size: clamp(1rem, 1.5vw, 1.2rem); /* Responsive font size */ font-style: italic; color: #bbbbbb; z-index: 1; } .source { margin-top: 0.5rem; font-size: clamp(0.9rem, 1.2vw, 1rem); color: #999999; z-index: 1; } .source a { color: #f5f5f5; text-decoration: none; font-weight: bold; border-bottom: 2px solid #f5f5f5; transition: color 0.3s, border-color 0.3s; } .source a:hover { color: #d1d1d1; border-color: #d1d1d1; } /* Mobile Responsive Styles */ @media (max-width: 768px) { .container { width: 95%; height: auto; /* Allow the container to grow naturally */ padding: 2rem 1rem; } .background-image { max-width: 400px; opacity: 0.1; } } @media (max-width: 480px) { .background-image { max-width: 300px; opacity: 0.08; } }