/* Custom CSS */ body { background-color: #2a3d3f; /* Dark blue-green background for the whole page */ color: white; font-family: Arial, sans-serif; margin: 0; padding: 0; } .post-icons { display: none; } header { background-color: #1f2d2d; /* Darker blue-green for header */ padding: 10px 0; text-align: center; } header h2 { color: #00bfae; font-size: 36px; font-weight: bold; text-transform: uppercase; position: relative; animation: glow 2s infinite; } main { margin-top: 30px; display: flex; justify-content: center; align-items: center; padding: 10px; } .content-box { background-color: #2f4f4f; /* Blue-green shade for content box */ padding: 20px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); max-width: 600px; /* Increased width */ width: 100%; margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.2); /* Light border for definition */ background: linear-gradient(145deg, #2f4f4f, #1f2d2d); /* Subtle gradient effect */ } .section-title { text-align: center; font-size: 15px; font-weight: 600; color: #00bfae; /* Light blue-green color for section title */ margin-bottom: 20px; } .stream-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .stream-box { background-color: #1f2d2d; /* Darker blue-green for stream boxes */ padding: 5px 10px; /* Reduced padding */ display: flex; justify-content: space-between; align-items: center; margin: 1px; /* Reduced margin */ text-align: center; transition: all 0.3s ease-in-out; cursor: pointer; width: 100%; max-width: 600px; /* Reduced max-width for responsiveness */ text-decoration: none; /* Remove underline */ border: 1px solid rgba(255, 255, 255, 0.2); /* Light border for definition */ background: linear-gradient(145deg, #1f2d2d, #2f4f4f); /* Subtle gradient effect */ height: 32px; /* Slightly reduced height */ } .stream-box a { text-decoration: none; /* Remove underline */ color: inherit; /* Inherit the color from parent */ } .stream-box:hover { transform: translateY(-3px); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); } .stream-left { font-size: 16px; font-weight: 600; color: #00bfae; /* Light blue-green for the left side text */ } .stream-right { color: #90ee90; /* Light green for 'Online' status and dot */ font-weight: bold; font-size: 14px; display: flex; align-items: center; } .stream-right svg { margin-left: 5px; /* Space between the text and the icon */ fill: none; /* No fill for the checkmark icon */ stroke: #90ee90; /* Light green color for the checkmark icon */ } footer { background-color: #1f2d2d; /* Darker blue-green footer background */ padding: 20px; text-align: center; color: white; } .logo-space img { width: 100%; /* Make logo responsive */ max-width: 600px; /* Limit logo size */ height: auto; /* Maintain aspect ratio */ } .live-dot { color: #00C957; margin-right: 4px; } /* Media Queries for Mobile Devices */ @media (max-width: 768px) { header h2 { font-size: 28px; } .content-box { padding: 15px; max-width: 100%; } .section-title { font-size: 20px; } .stream-box { max-width: 100%; height: 50px; /* Adjust height for mobile */ } .stream-left { font-size: 14px; } .stream-right { font-size: 12px; } } @media (max-width: 480px) { header h2 { font-size: 24px; } .content-box { padding: 10px; } .section-title { font-size: 10px; } .stream-box { max-width: 100%; height: 50px; } .stream-left { font-size: 12px; } .stream-right { font-size: 10px; } } /* CSS for green color on h1, h2, h3, and strong */ h1, h2, h3, strong { color: #00b3b3; /* Green color */ } strong { color: #00b3b3; /* Green for strong tags */ }