body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .chart {
            position: absolute;
            top:150px;
            width: 600px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hub {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: #3498db;
            border-radius: 50%;
            text-align: center;
            line-height: 150px;
            color: white;
            font-size: 24px;
            font-weight: bold;
            z-index: 2;
        }

        .skill {
            position: absolute;
            width: 120px;
            height: 60px;
            color: white;
            text-align: center;
            line-height: 60px;
            border-radius: 30px;
            transform: translate(-50%, -50%);
            z-index: 1;
            font-size: 16px;
            font-weight: bold;
        }

        .skill:nth-child(1) { background-color: #e74c3c; transform: translate(-50%, -50%) rotate(0deg) translateY(-250px); }
        .skill:nth-child(2) { background-color: #f39c12; transform: translate(-50%, -50%) rotate(30deg) translateY(-250px); }
        .skill:nth-child(3) { background-color: #2ecc71; transform: translate(-50%, -50%) rotate(60deg) translateY(-250px); }
        .skill:nth-child(4) { background-color: #1abc9c; transform: translate(-50%, -50%) rotate(90deg) translateY(-250px); }
        .skill:nth-child(5) { background-color: #3498db; transform: translate(-50%, -50%) rotate(120deg) translateY(-250px); }
        .skill:nth-child(6) { background-color: #9b59b6; transform: translate(-50%, -50%) rotate(150deg) translateY(-250px); }
        .skill:nth-child(7) { background-color: #34495e; transform: translate(-50%, -50%) rotate(180deg) translateY(-250px); }
        .skill:nth-child(8) { background-color: #16a085; transform: translate(-50%, -50%) rotate(210deg) translateY(-250px); }
        .skill:nth-child(9) { background-color: #27ae60; transform: translate(-50%, -50%) rotate(240deg) translateY(-250px); }
        .skill:nth-child(10) { background-color: #2980b9; transform: translate(-50%, -50%) rotate(270deg) translateY(-250px); }
        .skill:nth-child(11) { background-color: #8e44ad; transform: translate(-50%, -50%) rotate(300deg) translateY(-250px); }
        .skill:nth-child(12) { background-color: #2c3e50; transform: translate(-50%, -50%) rotate(330deg) translateY(-250px); }