| 1 | body { |
| 2 | font-family: "Inter", sans-serif; |
| 3 | margin: 0; |
| 4 | overflow-x: hidden; /* Prevent horizontal scrollbar on body */ |
| 5 | overflow-y: auto; /* Enable vertical scrolling for the entire page */ |
| 6 | display: flex; /* Use flexbox to center canvas content conceptually */ |
| 7 | justify-content: center; |
| 8 | align-items: center; |
| 9 | min-height: 100vh; |
| 10 | background-color: #000; /* Fallback for body background */ |
| 11 | } |
| 12 | |
| 13 | canvas { |
| 14 | display: block; /* Remove extra space below canvas */ |
| 15 | position: fixed; /* Use fixed to keep it in viewport regardless of scroll */ |
| 16 | top: 0; |
| 17 | left: 0; |
| 18 | z-index: -1; /* Place the canvas behind other content */ |
| 19 | width: 100%; /* Ensure canvas covers full width */ |
| 20 | height: 100%; /* Ensure canvas covers full height */ |
| 21 | } |
| 22 | |
| 23 | /* Styles for the new main content container */ |
| 24 | .main-content-container { |
| 25 | position: relative; /* Ensure content is positioned above the canvas */ |
| 26 | z-index: 1; /* Bring content to the front */ |
| 27 | display: flex; |
| 28 | flex-direction: column; |
| 29 | justify-content: center; |
| 30 | align-items: center; |
| 31 | background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background for contrast */ |
| 32 | border-radius: 12px; /* Rounded corners */ |
| 33 | padding: 30px; /* Padding inside the container */ |
| 34 | margin: 20px auto; /* Changed margin to auto for horizontal centering */ |
| 35 | width: 90%; /* Make it more fluid on smaller screens */ |
| 36 | max-width: 700px; /* Limit width for readability on larger screens */ |
| 37 | box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* More prominent shadow */ |
| 38 | color: white; /* Default text color for content */ |
| 39 | text-align: center; |
| 40 | backdrop-filter: blur(3px); /* Optional: subtle blur effect for content behind */ |
| 41 | box-sizing: border-box; /* Include padding in the element's total width */ |
| 42 | } |
| 43 | |
| 44 | .content-title { |
| 45 | font-size: 2.5rem; /* text-4xl equivalent */ |
| 46 | font-weight: 700; /* font-bold equivalent */ |
| 47 | margin-bottom: 1rem; |
| 48 | color: #E0E0E0; /* Slightly off-white for title */ |
| 49 | } |
| 50 | |
| 51 | .content-paragraph { |
| 52 | font-size: 1.1rem; /* text-lg equivalent */ |
| 53 | line-height: 1.6; |
| 54 | margin-bottom: 1rem; |
| 55 | color: #F0F0F0; /* Slightly off-white for paragraph */ |
| 56 | } |
| 57 | |
| 58 | .content-image { |
| 59 | max-width: 200px; /* Ensure image is responsive */ |
| 60 | height: auto; |
| 61 | border-radius: 8px; |
| 62 | margin-top: 1.5rem; |
| 63 | margin-bottom: 1.5rem; |
| 64 | box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
| 65 | } |
| 66 | |
| 67 | /* Navigation */ |
| 68 | .topnav { |
| 69 | background-color: black; |
| 70 | display: flex; |
| 71 | gap: 15px; |
| 72 | padding: 12px 20px; |
| 73 | border-bottom: 2px solid darkred; |
| 74 | justify-content: center; |
| 75 | } |
| 76 | |
| 77 | .topnav a { |
| 78 | color: darkgreen; |
| 79 | text-decoration: none; |
| 80 | padding: 8px 14px; |
| 81 | border-radius: 8px; |
| 82 | transition: background-color 0.3s ease, color 0.3s ease; |
| 83 | } |
| 84 | |
| 85 | .topnav a.active, |
| 86 | .topnav a:hover { |
| 87 | background-color: darkgreen; |
| 88 | color: darkred; |
| 89 | } |
| 90 | |
| 91 | /* Title styling */ |
| 92 | h1.title { |
| 93 | text-align: center; |
| 94 | margin: 20px 0; |
| 95 | color: darkgreen; |
| 96 | } |
| 97 | |
| 98 | /* Status message */ |
| 99 | .status-message p { |
| 100 | text-align: center; |
| 101 | font-weight: bold; |
| 102 | color: darkgreen; |
| 103 | margin-bottom: 20px; |
| 104 | } |
| 105 | |
| 106 | /* Carousel container with horizontal scroll */ |
| 107 | .css-carousel { |
| 108 | display: flex; |
| 109 | overflow-x: auto; /* Enable horizontal scrolling */ |
| 110 | scroll-snap-type: x mandatory; |
| 111 | -webkit-overflow-scrolling: touch; |
| 112 | padding-bottom: 12px; /* Keep bottom padding for scrollbar */ |
| 113 | scrollbar-width: thin; |
| 114 | scrollbar-color: darkred black; |
| 115 | border: 2px solid darkred; /* Full border for clearer limits */ |
| 116 | scroll-behavior: smooth; |
| 117 | color: darkgreen; |
| 118 | width: 100%; /* Ensure it takes full width of its parent */ |
| 119 | box-sizing: border-box; /* Ensure padding is included in width */ |
| 120 | gap: 20px; /* Space between carousel items */ |
| 121 | |
| 122 | /* New: Dynamic scroll-padding for consistent edge snapping */ |
| 123 | /* This ensures the item snaps to the start, but we add padding to the scroll container itself */ |
| 124 | /* The padding is calculated to center the item based on its flex-basis */ |
| 125 | scroll-padding-inline: calc(50% - (250px / 2)); /* 50% of carousel width - half of default item width */ |
| 126 | } |
| 127 | |
| 128 | /* Scrollbar styling */ |
| 129 | .css-carousel::-webkit-scrollbar { |
| 130 | height: 8px; |
| 131 | } |
| 132 | |
| 133 | .css-carousel::-webkit-scrollbar-track { |
| 134 | background: black; |
| 135 | } |
| 136 | |
| 137 | .css-carousel::-webkit-scrollbar-thumb { |
| 138 | background-color: darkred; |
| 139 | border-radius: 10px; |
| 140 | border: 2px solid black; |
| 141 | } |
| 142 | |
| 143 | /* Scroll instruction text */ |
| 144 | .scroll-instruction { |
| 145 | color: darkgreen; |
| 146 | font-size: 0.9rem; |
| 147 | text-align: center; |
| 148 | margin-top: 6px; |
| 149 | font-style: italic; |
| 150 | user-select: none; |
| 151 | } |
| 152 | |
| 153 | /* Individual movie card */ |
| 154 | .carousel-item { |
| 155 | flex: 0 0 250px; /* Fixed width for items, no shrinking/growing by default */ |
| 156 | scroll-snap-align: center; /* Center the item when snapped */ |
| 157 | background-color: #111; |
| 158 | border: 1px solid darkgreen; |
| 159 | border-radius: 12px; |
| 160 | padding: 15px; |
| 161 | color: darkgreen; |
| 162 | box-sizing: border-box; |
| 163 | display: flex; |
| 164 | flex-direction: column; |
| 165 | align-items: center; |
| 166 | transition: transform 0.3s ease; |
| 167 | } |
| 168 | |
| 169 | /* Slight scale on hover */ |
| 170 | .carousel-item:hover { |
| 171 | transform: scale(1.05); |
| 172 | border-color: darkred; |
| 173 | } |
| 174 | |
| 175 | /* Movie image */ |
| 176 | .carousel-item img { |
| 177 | border-radius: 10px; |
| 178 | max-width: 100%; |
| 179 | height: auto; /* Ensures aspect ratio is maintained */ |
| 180 | margin-bottom: 10px; |
| 181 | object-fit: contain; /* Ensures entire image is visible without distortion */ |
| 182 | } |
| 183 | |
| 184 | /* Movie info list */ |
| 185 | .carousel-item ul { |
| 186 | list-style: none; |
| 187 | padding-left: 0; |
| 188 | width: 100%; |
| 189 | margin: 0; |
| 190 | color: darkgreen; |
| 191 | } |
| 192 | |
| 193 | .carousel-item ul li { |
| 194 | margin: 5px 0; |
| 195 | font-size: 0.9rem; |
| 196 | color: darkgreen; |
| 197 | } |
| 198 | |
| 199 | .carousel-item ul li a { |
| 200 | color: darkgreen; |
| 201 | text-decoration: none; |
| 202 | transition: color 0.3s ease; |
| 203 | } |
| 204 | |
| 205 | .carousel-item ul li a:hover { |
| 206 | color: darkred; |
| 207 | } |
| 208 | |
| 209 | /* Delete button styling */ |
| 210 | button, |
| 211 | .back_button a{ |
| 212 | background-color: darkred; |
| 213 | color: darkgreen; |
| 214 | border: none; |
| 215 | border-radius: 8px; |
| 216 | padding: 8px 12px; |
| 217 | cursor: pointer; |
| 218 | font-size: 1rem; |
| 219 | transition: background-color 0.3s ease, color 0.3s ease; |
| 220 | } |
| 221 | |
| 222 | button:hover, |
| 223 | .back_button a:hover { |
| 224 | background-color: darkgreen; |
| 225 | color: darkred; |
| 226 | } |
| 227 | |
| 228 | .actions { |
| 229 | display: flex; |
| 230 | flex-wrap: wrap; |
| 231 | gap: 20px; /* space between forms */ |
| 232 | justify-content: center; |
| 233 | margin-bottom: 20px; |
| 234 | } |
| 235 | |
| 236 | .action-form { |
| 237 | background-color: #1a0000; /* very dark red background */ |
| 238 | padding: 15px; |
| 239 | border-radius: 12px; |
| 240 | display: flex; |
| 241 | flex-direction: column; |
| 242 | align-items: center; |
| 243 | min-width: 220px; |
| 244 | box-sizing: border-box; |
| 245 | } |
| 246 | |
| 247 | .action-form label { |
| 248 | margin-bottom: 8px; |
| 249 | color: darkgreen; |
| 250 | } |
| 251 | |
| 252 | .action-form input[type="text"] { |
| 253 | padding: 8px; |
| 254 | border-radius: 10px; |
| 255 | border: none; |
| 256 | margin-bottom: 12px; |
| 257 | width: 100%; |
| 258 | max-width: 200px; |
| 259 | } |
| 260 | |
| 261 | .action-form button { |
| 262 | background-color: darkred; |
| 263 | color: darkgreen; |
| 264 | border: none; |
| 265 | padding: 10px 16px; |
| 266 | border-radius: 12px; |
| 267 | cursor: pointer; |
| 268 | transition: background-color 0.3s ease; |
| 269 | width: 100%; |
| 270 | max-width: 200px; |
| 271 | } |
| 272 | |
| 273 | .action-form button:hover { |
| 274 | background-color: darkgreen; |
| 275 | color: black; |
| 276 | } |
| 277 | /* Responsive adjustments for smaller screens */ |
| 278 | @media (max-width: 768px) { |
| 279 | .main-content-container { |
| 280 | padding: 20px; |
| 281 | margin: 10px auto; /* Adjusted margin for centering */ |
| 282 | width: calc(100% - 40px); /* Adjust width to account for 20px left/right margin */ |
| 283 | } |
| 284 | .content-title { |
| 285 | font-size: 2rem; |
| 286 | } |
| 287 | .content-paragraph { |
| 288 | font-size: 1rem; |
| 289 | } |
| 290 | .carousel-item { |
| 291 | flex-basis: 80vp; /* Adjusted flex-basis for smaller screens */ |
| 292 | padding: 10px; |
| 293 | } |
| 294 | .css-carousel { |
| 295 | scroll-padding-inline: calc(50% - (80vp / 2)); /* Adjust for smaller item size */ |
| 296 | } |
| 297 | } |
| 298 | |
| 299 | /* Responsive tweaks */ |
| 300 | @media (max-width: 600px) { |
| 301 | .carousel-item { |
| 302 | flex-basis: 180px; /* Adjusted flex-basis */ |
| 303 | padding: 10px; |
| 304 | } |
| 305 | .css-carousel { |
| 306 | scroll-padding-inline: calc(50% - (180px / 2)); /* Adjust for smaller item size */ |
| 307 | } |
| 308 | } |
| 309 | |
| 310 | @media (max-width: 400px) { |
| 311 | .carousel-item { |
| 312 | flex-basis: 50vp; /* Adjusted flex-basis for very small screens */ |
| 313 | } |
| 314 | .css-carousel { |
| 315 | scroll-padding-inline: calc(50% - (60vp/ 2)); /* Adjust for smallest item size */ |
| 316 | } |
| 317 | } |