body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

/* Storm container (covers background only) */
.storm-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind content */
    background: linear-gradient(to bottom, #000, #1a1a2a);
}

/* Rain effect (diagonal lines) */
.rain {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20"><line x1="5" y1="0" x2="3" y2="10" stroke="rgba(150, 200, 255, 0.3)" stroke-width="1"/></svg>');
    animation: rain 0.7s linear infinite;
}

@keyframes rain {
    from { background-position: 0 0; }
    to { background-position: -10px 20px; }
}

/* Lightning flashes (random, behind content) */
.lightning {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    animation: lightning 15s linear infinite;
}

@keyframes lightning {
    0%, 85% { opacity: 0; } /* Long pause */
    86% { opacity: 0.8; }   /* Flash 1 */
    87% { opacity: 0; }
    88% { opacity: 0.6; }   /* Flash 2 */
    89% { opacity: 0; }
    90% { opacity: 0.3; }   /* Flash 3 */
    91% { opacity: 0; }
    100% { opacity: 0; }
}

/* Content (stays above storm) */
.content {
	font-family: "Brush Script MT", sans-seif;
	font-size: 30px;
    position: relative;
    z-index: 10;
    color: white;
    text-align: left;
    padding: 8vh 2rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}