body {
    background-color: #000;
    color: #e11d48;
    font-family: 'Georgia', serif;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.container, .glitch-wrapper {
    padding: 2em;
}

.logo {
    max-width: 300px;
    margin-bottom: 1em;
}

h1 {
    font-size: 3em;
    letter-spacing: 0.1em;
}

.tagline {
    font-style: italic;
    margin-bottom: 2em;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    margin: 1em 0;
}

nav a {
    color: #e11d48;
    text-decoration: none;
    font-size: 1.5em;
}

.newsletter {
    margin-top: 4em;
}

input, textarea {
    background: #111;
    border: 1px solid #e11d48;
    color: #e11d48;
    padding: 0.75em;
    width: 80%;
    margin: 0.5em auto;
    display: block;
    font-family: inherit;
}

button {
    background: #e11d48;
    border: none;
    padding: 1em 2em;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    margin-top: 1em;
}

.glitch {
    position: relative;
    color: #e11d48;
    text-shadow: 2px 0 #111, -2px 0 #111;
    animation: glitch 2s infinite;
}

.glitch-on {
    animation: glitch 0.5s infinite;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

textarea {
    width: 80%;
    height: 150px;
    margin: 1em auto;
    display: block;
}

#confession-log {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #e11d48;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.confession {
    background-color: #111;
    margin: 1em 0;
    padding: 1em;
    border-left: 3px solid #e11d48;
    text-align: left;
}


body {
    background-color: #000;
    background-image: url('haunted_background.png');
    background-size: cover;
    background-attachment: fixed;
    color: #e11d48;
    font-family: 'Georgia', serif;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    backdrop-filter: blur(2px);
}

.container {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 3em;
    border: 1px solid #2a0000;
    margin: 2em auto;
    max-width: 900px;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.2);
    animation: flicker 8s infinite alternate;
}

.logo {
    max-width: 300px;
    filter: grayscale(100%) contrast(1.5) drop-shadow(0 0 8px #e11d48);
    animation: pulseLogo 6s infinite;
}

h1, h2 {
    font-size: 3em;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px #111, -1px -1px #300;
    animation: floatText 10s ease-in-out infinite alternate;
}

.tagline, p {
    font-style: italic;
    color: #ddd;
    text-shadow: 0 0 5px #330000;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav li {
    margin: 1em;
    transform: rotate(-1deg);
    animation: twitch 6s infinite ease-in-out;
}

nav a {
    color: #ff357f;
    text-decoration: none;
    font-size: 1.2em;
    border-bottom: 1px dashed #ff357f;
}

input, textarea {
    background: #1a0000;
    border: 1px solid #ff357f;
    color: #fff;
    padding: 0.75em;
    width: 80%;
    margin: 0.5em auto;
    display: block;
    font-family: 'Courier New', monospace;
    border-radius: 2px;
}

button {
    background: linear-gradient(45deg, #ff357f, #e11d48);
    border: none;
    padding: 1em 2em;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 10px #e11d48;
}

.confession {
    background-color: #1a0000;
    border-left: 3px solid #ff357f;
    text-align: left;
    font-family: 'Courier New', monospace;
    color: #fdd;
    box-shadow: inset 0 0 10px #2a0000;
}

/* Animations */
@keyframes glitch {
    0% { transform: translate(0,0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(-1px, -1px); }
    60% { transform: translate(1px, 1px); }
    80% { transform: translate(1px, -1px); }
    100% { transform: translate(0,0); }
}

@keyframes flicker {
    0% { opacity: 0.97; }
    5% { opacity: 0.9; }
    10% { opacity: 1; }
    15% { opacity: 0.95; }
    20% { opacity: 1; }
    25% { opacity: 0.92; }
    100% { opacity: 1; }
}

@keyframes floatText {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes pulseLogo {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); filter: drop-shadow(0 0 20px #ff357f); }
    100% { transform: scale(1); }
}

@keyframes twitch {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
}

.ghost {
    position: fixed;
    top: 20%;
    left: -200px;
    width: 120px;
    opacity: 0.1;
    animation: driftGhost 60s linear infinite;
    pointer-events: none;
}

@keyframes driftGhost {
    0% { left: -200px; top: 20%; opacity: 0.05; }
    50% { left: 110%; top: 25%; opacity: 0.12; }
    100% { left: -200px; top: 20%; opacity: 0.05; }
}


/* Glitch text clone overlays */
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    color: #f0f;
    background: transparent;
    clip: rect(0, 0, 0, 0);
}

.glitch::before {
    animation: glitchTop 2s infinite linear alternate-reverse;
    color: #0ff;
}

.glitch::after {
    animation: glitchBottom 1.5s infinite linear alternate-reverse;
    color: #f0f;
}

@keyframes glitchTop {
    0% { clip: rect(0, 9999px, 0, 0); transform: translate(0, 0); }
    10% { clip: rect(0, 9999px, 25px, 0); transform: translate(-2px, -2px); }
    20% { clip: rect(0, 9999px, 50px, 0); transform: translate(2px, 2px); }
    30% { clip: rect(0, 9999px, 75px, 0); transform: translate(-1px, 1px); }
    100% { clip: rect(0, 9999px, 100px, 0); transform: translate(0, 0); }
}

@keyframes glitchBottom {
    0% { clip: rect(0, 9999px, 0, 0); transform: translate(0, 0); }
    10% { clip: rect(100px, 9999px, 130px, 0); transform: translate(1px, -1px); }
    20% { clip: rect(130px, 9999px, 160px, 0); transform: translate(-2px, 2px); }
    30% { clip: rect(160px, 9999px, 190px, 0); transform: translate(2px, -1px); }
    100% { clip: rect(200px, 9999px, 220px, 0); transform: translate(0, 0); }
}

/* Glitchy container chaos */
.container {
    animation: flicker 3s infinite, shake 0.5s infinite alternate;
}

@keyframes shake {
    0% { transform: translate(0px, 0px); }
    100% { transform: translate(2px, -2px); }
}