:root {

            --primary-blue: #2563eb;

            --dark-slate: #1e293b;

            --light-bg: #f8fafc;

            --accent: #00ff99;

        }


        body {

            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

            background-color: var(--light-bg);

            color: var(--dark-slate);

            line-height: 1.6;

            margin: 0;

            padding: 40px 20px;

        }


        .container {

            max-width: 800px;

            margin: 0 auto;

            background: white;

            padding: 40px;

            border-radius: 12px;

            box-shadow: 0 10px 25px rgba(0,0,0,0.05);

        }


        header {

            text-align: center;

            margin-bottom: 40px;

            border-bottom: 2px solid var(--light-bg);

            padding-bottom: 20px;

        }


        h1 {

            font-size: 2.2rem;

            color: var(--dark-slate);

            margin: 0;

        }


        .contents-list {

            list-style: none;

            padding: 0;

        }


        .content-item {

            margin-bottom: 15px;

        }


        .content-link {

            display: flex;

            align-items: center;

            text-decoration: none;

            color: var(--dark-slate);

            background: var(--light-bg);

            padding: 20px;

            border-radius: 8px;

            transition: all 0.3s ease;

            border: 1px solid transparent;

        }


        .content-link:hover {

            background: white;

            border-color: var(--primary-blue);

            transform: translateX(10px);

            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);

        }


        .page-number {

            background: var(--primary-blue);

            color: white;

            width: 35px;

            height: 35px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            margin-right: 20px;

            font-weight: bold;

            font-size: 0.9rem;

        }


        .page-info h3 {

            margin: 0;

            font-size: 1.2rem;

            color: var(--primary-blue);

        }


        .page-info p {

            margin: 5px 0 0 0;

            font-size: 0.9rem;

            color: #64748b;

        }


        footer {

            margin-top: 40px;

            text-align: center;

            font-size: 0.8rem;

            color: #94a3b8;

        }