body {
  background: linear-gradient(135deg, #6e45e2, #88d3ce);
 background-attachment: fixed;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
  color: white;
  font-family: Arial;

}

body {
            margin: 0;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6e45e2, #88d3ce);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .container {
            display: grid;
            grid-template-areas:
                "header header"
                "content menu"
                "footer footer";
            grid-template-columns: 3fr 1fr;
            gap: 5px;
            background-color: #360d69;
            padding: 5px;
            width: 80%;
            max-width: 900px;
            margin: 0 auto; /* This centers the container */
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .header {
            grid-area: header;
            background-color: #5c2a9d;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            font-size: 1.5rem;
        }

        .content {
            grid-area: content;
            background-color: #b367e6;
            padding: 20px;
            min-height: 200px;
            border-radius: 5px;
            color: #fff;
        }

        .menu {
            grid-area: menu;
            background-color: #e28ee2;
            padding: 20px;
            border-radius: 5px;
            color: #fff;
        }

        .footer {
            grid-area: footer;
            background-color: #5c2a9d;
            color: white;
            padding: 15px;
            text-align: center;
            border-radius: 5px;
        }

        h1 {
            margin-top: 0;
            color: #fff;
            text-align: center;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        p {
            line-height: 1.6;
        }

        .code-example {
            background-color: #2d0a52;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            color: #b5b5b5;
            font-family: monospace;
            white-space: pre-wrap;
        }