/*body {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    min-height: 100vh;*/
/*    margin:100px;*/
/*    background-color: #f0f0f0;*/
/*}*/

.hex-container {
    position: relative;
    width: 490px; /* Adjust as needed */
    height: 400px; /* Adjust as needed */
    margin: 10px; /* Adjust as needed */
    /*margin-top:200px;*/
    /*margin-left:200px;*/
    /*border:2px solid red;*/
}

.hex {
    position: absolute;
    top:32%;
    left:37%;
    width: 120px; /* Adjust as needed */
    height: 138px; /* Adjust as needed */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* Adjust as needed */
    color: #fff;
}

/*.hex span {*/
/*    transform: rotate(-60deg); !* Adjust the rotation value *!*/
/*}*/

.hex.center {
    top: 50%;
    left: 49.5%;
    width: 120px;
    height: 138px;
    transform: translate(-51%, -53%);
    background-color: darkslateblue; /* Adjust as needed */
}

.hex.arm-1 {
    transform: rotate(60deg) translate(115%, 0); /* Adjust the translate value */
    background-color: #e7773c; /* Adjust as needed */
}

.hex.arm-2 {
    transform: rotate(120deg) translate(115%, 0); /* Adjust the translate value */
    background-color: #3498db; /* Adjust as needed */
}

.hex.arm-3 {
    transform: rotate(180deg) translate(115%, 0); /* Adjust the translate value */
    background-color: crimson; /* Adjust as needed */
}

.hex.arm-4 {
    transform: rotate(240deg) translate(115%, 0); /* Adjust the translate value */
    background-color: mediumseagreen; /* Adjust as needed */
}

.hex.arm-5 {
    transform: rotate(300deg) translate(115%, 0); /* Adjust the translate value */
    background-color: blueviolet; /* Adjust as needed */
}

.hex.arm-6 {
    transform: rotate(360deg) translate(115%, 0); /* Adjust the translate value */
    background-color: #e74c3c; /* Adjust as needed */
}

.arm-text {
    transform: rotate(60deg); /* Adjust the rotation value */
}

.arm-text-center {
    transform: rotate(360deg); /* No rotation for the center text */
}

.arm-text-1 {
    transform: rotate(300deg); /* Adjust the rotation value for text 1 */
}
.arm-text-2 {
    transform: rotate(240deg); /* Adjust the rotation value for text 1 */
}
.arm-text-3 {
    transform: rotate(180deg); /* Adjust the rotation value for text 1 */
}
.arm-text-4 {
    transform: rotate(120deg); /* Adjust the rotation value for text 1 */
}
.arm-text-5 {
    transform: rotate(60deg); /* Adjust the rotation value for text 1 */
}
.arm-text-6 {
    transform: rotate(0deg); /* Adjust the rotation value for text 1 */
}