/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* style.css - Le chaos des années 2000 */

body {
    background-color: #000000;
    background-image: url('https://anlucas.neocities.org/bg/stars.gif'); /* Fond étoilé animé classique */
    color: #39ff14; /* Vert fluo */
    font-family: "Comic Sans MS", "Chalkboard SE", sans-serif;
    cursor: crosshair; /* Curseur rétro */
    margin: 0;
    padding: 20px;
}

#container {
    width: 900px;
    margin: 0 auto;
    background-color: #ff00ff; /* Rose fluo */
    border: 5px dashed #ffff00; /* Bordure jaune pointillée */
    padding: 10px;
    box-shadow: 10px 10px 0px #00ffff; /* Ombre portée cyan */
}

/* En-tête qui pique les yeux */
header {
    text-align: center;
    background: url('https://anlucas.neocities.org/bg/fire.gif'); /* Effet feu */
    color: #00ffff;
    border: 3px solid #ffffff;
    padding: 20px;
    margin-bottom: 10px;
}

h1 {
    font-size: 3em;
    text-shadow: 3px 3px #ff0000; /* Ombre rouge */
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* Structure à deux colonnes type "vieux blog" */
#main {
    display: flex;
    justify-content: space-between;
}

/* Barre latérale (Menu + Chat) */
aside {
    width: 250px;
    background-color: #000080; /* Bleu marine rétro */
    border: 4px double #00ffff;
    padding: 10px;
    color: #ffffff;
}

aside h2 {
    color: #ff00ff;
    text-align: center;
    border-bottom: 2px solid #ffff00;
}

aside ul {
    list-style-type: square;
    padding-left: 20px;
}

aside a {
    color: #ffff00;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
}

aside a:hover {
    color: #ff0000;
    background-color: #ffff00;
    text-decoration: underline;
}

/* Le fameux chatbox (shoutbox) */
.chatbox {
    background-color: #ffffff;
    color: #000000;
    height: 300px;
    border: inset 3px #888;
    padding: 5px;
    overflow-y: scroll;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
}

.chatbox-input {
    margin-top: 5px;
    width: 100%;
}

/* Zone de contenu principal */
section {
    width: 600px;
    background-color: #000000;
    border: 3px solid #39ff14;
    padding: 15px;
}

.blog-post {
    background-color: #222222;
    border: 1px dotted #ff00ff;
    padding: 10px;
    margin-bottom: 20px;
}

.blog-post h3 {
    color: #ffff00;
    margin-top: 0;
}

.date {
    font-size: 0.8em;
    color: #00ffff;
    font-style: italic;
}

/* Les petits boutons 88x31 en bas */
footer {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #000000;
    border: 2px solid #ff00ff;
}

.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}