| 1 | body { |
| 2 | font-family: "Inter", sans-serif; |
| 3 | margin: 0; |
| 4 | overflow: hidden; /* Prevent scrollbars if canvas overfills */ |
| 5 | display: flex; /* Use flexbox to center canvas content conceptually */ |
| 6 | justify-content: center; |
| 7 | align-items: center; |
| 8 | min-height: 100vh; |
| 9 | background-color: #000; /* Fallback for body background */ |
| 10 | } |
| 11 | |
| 12 | canvas { |
| 13 | display: block; /* Remove extra space below canvas */ |
| 14 | position: absolute; /* Position the canvas to cover the entire viewport */ |
| 15 | top: 0; |
| 16 | left: 0; |
| 17 | /* No z-index needed if canvas is the only visual element */ |
| 18 | } |
| 19 | |
| 20 | /* Styles for the new main content container */ |
| 21 | .main-content-container { |
| 22 | position: relative; /* Ensure content is positioned above the canvas */ |
| 23 | z-index: 1; /* Bring content to the front */ |
| 24 | display: flex; |
| 25 | flex-direction: column; |
| 26 | justify-content: center; |
| 27 | align-items: center; |
| 28 | background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background for contrast */ |
| 29 | border-radius: 12px; /* Rounded corners */ |
| 30 | padding: 30px; /* Padding inside the container */ |
| 31 | margin: 20px; /* Margin from screen edges */ |
| 32 | max-width: 700px; /* Limit width for readability */ |
| 33 | box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* More prominent shadow */ |
| 34 | color: white; /* Default text color for content */ |
| 35 | text-align: center; |
| 36 | backdrop-filter: blur(3px); /* Optional: subtle blur effect for content behind */ |
| 37 | } |
| 38 | |
| 39 | .content-title { |
| 40 | font-size: 2.5rem; /* text-4xl equivalent */ |
| 41 | font-weight: 700; /* font-bold equivalent */ |
| 42 | margin-bottom: 1rem; |
| 43 | color: #E0E0E0; /* Slightly off-white for title */ |
| 44 | } |
| 45 | |
| 46 | .content-paragraph { |
| 47 | font-size: 1.1rem; /* text-lg equivalent */ |
| 48 | line-height: 1.6; |
| 49 | margin-bottom: 1rem; |
| 50 | color: #F0F0F0; /* Slightly off-white for paragraph */ |
| 51 | } |
| 52 | |
| 53 | .content-image { |
| 54 | max-width: 200px; /* Ensure image is responsive */ |
| 55 | height: auto; |
| 56 | border-radius: 8px; |
| 57 | margin-top: 1.5rem; |
| 58 | margin-bottom: 1.5rem; |
| 59 | box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| 60 | } |
| 61 | |
| 62 | /* Responsive adjustments for smaller screens */ |
| 63 | @media (max-width: 768px) { |
| 64 | .main-content-container { |
| 65 | padding: 20px; |
| 66 | margin: 10px; |
| 67 | } |
| 68 | .content-title { |
| 69 | font-size: 2rem; |
| 70 | } |
| 71 | .content-paragraph { |
| 72 | font-size: 1rem; |
| 73 | } |
| 74 | } |