body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    color: #f4f4f4;
    background-color: #2d2d2d;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03), transparent 70%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02), transparent 70%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.01), transparent 5px);
    background-blend-mode: overlay;
    background-size: cover;
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.01), transparent 2px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.scrollable-content {
    max-width: 600px;
    margin: auto;
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.overlay {
    padding: 20px;
}

@media (max-width: 600px) {
    .overlay {
        padding: 10px;
    }
}