{% extends "base.html" %}

{% block title %}CSS Overlay Help - {{ super() }}{% endblock %}

{% block content %}
<div class="card">
    <h2>Custom Overlay CSS Guide</h2>
    <p>This guide will help you create your own custom CSS for the chat overlay. Your CSS is applied on top of a base stylesheet, so you only need to override the styles you want to change.</p>
</div>

<div class="card">
    <h3>HTML Structure</h3>
    <p>Your CSS will be applied to a simple HTML structure. Here are the key classes you can target:</p>
    <ul>
        <li><code>.chat-container</code>: The main container holding all messages.</li>
        <li><code>.chat-message</code>: The container for a single message, including the username and text.</li>
        <li><code>.username</code>: The part of the message that shows the chatter's name.</li>
        <li><code>.message-text</code>: The actual content of the chat message.</li>
    </ul>
    <p>The <code>body</code> of the overlay is transparent by default, so you only need to style the message elements.</p>
</div>

<div class="card">
    <h3>Example: "Bubbly" Theme</h3>
    <p>Here is a simple example to get you started. This creates chat bubbles with a gradient background.</p>
    <pre><code>body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 18px;
    text-shadow: 1px 1px 2px #333;
}

.chat-message {
    background: linear-gradient(135deg, #7f5af0, #a970ff);
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 10px;
    display: inline-block;
}

.username {
    font-weight: bold;
    color: #e0e0e0;
}</code></pre>
</div>
{% endblock %}