diff --git a/styles.css b/styles.css index edd58d4..379532b 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/* Base Styles */ html, body { height: 100%; margin: 0; @@ -8,8 +9,8 @@ html, body { } .container { - width: 60%; - max-width: 950px; + width: 90%; /* Make it responsive and fit within the screen */ + max-width: 950px; /* Set a max width */ margin: auto; display: flex; flex-direction: column; @@ -18,7 +19,8 @@ html, body { height: 100vh; text-align: center; position: relative; - z-index: 1; + padding: 1rem; /* Add breathing room for small screens */ + box-sizing: border-box; } .background-image { @@ -27,15 +29,15 @@ html, body { left: 50%; transform: translate(-50%, -50%); width: 100%; + max-width: 600px; /* Limit size */ height: auto; - opacity: 0.2; + opacity: 0.15; /* Light transparency for clarity */ z-index: 0; - pointer-events: none; + pointer-events: none; } - blockquote { - font-size: 1.8rem; + font-size: clamp(1.2rem, 2vw, 1.8rem); /* Responsive font size */ font-style: italic; margin: 0; line-height: 1.5; @@ -43,16 +45,16 @@ blockquote { } .author { - margin-top: 1.5rem; - font-size: 1.2rem; + 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: 1rem; - font-size: 1rem; + margin-top: 0.5rem; + font-size: clamp(0.9rem, 1.2vw, 1rem); color: #999999; z-index: 1; } @@ -69,3 +71,24 @@ blockquote { 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; + } +}