body {
        margin: 0;
        font-family: 'Roboto', sans-serif;
        background: linear-gradient(135deg, #0D1117, #1E1E1E);
        color: #C9D1D9;
        overflow-x: hidden;
    }
    header, section, footer {
        padding: 60px 20px;
        text-align: center;
    }
    h1, h2, h3 {
        color: #56B4EF;
        margin-bottom: 20px;
    }
    p {
        line-height: 1.6;
        margin-bottom: 20px;
    }
    a {
        color: #F58518;
        text-decoration: none;
        position: relative;
    }
    a:hover::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 2px;
        background: #F58518;
        animation: glow 1s infinite alternate;
    }
    pre {
        background: #1E1E1E;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
        text-align: left;
    }
    code {
        color: #F58518;
    }
    .parallax {
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }
    .particles {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    @keyframes glow {
        from { background: #F58518; }
        to { background: #56B4EF; }
    }
    @media (max-width: 480px) {
        header, section, footer {
            padding: 40px 10px;
        }
        h1 { font-size: 24px; }
    }
    @media (min-width: 481px) and (max-width: 768px) {
        h1 { font-size: 32px; }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
        h1 { font-size: 40px; }
    }
    @media (min-width: 1025px) {
        h1 { font-size: 48px; }
    }