* {

    box-sizing: border-box;

    padding: 0px;

    margin: 0px;

}



:root {

    --hex-width: 140px;

    --hex-height: 140px;

}



body, html {

    height: 100vh;

    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;

}





#hexa-content {

    padding: 80px;

    display: flex;

    gap: 40px;

    justify-content: center;

    flex-direction: row;

}



.hexa-container {

    flex: 1;

}



#hexa-problem-container {

    margin-left: 40px;

}

#hexa-problem-container .hexa-row {

    justify-content: flex-start;

}

#hexa-problem-container .hexa-row:first-child {

    margin-top: 0px;

}

#hexa-problem-container .hexa-row:nth-child(even) {

    margin-left: calc(var(--hex-width) / 2);

}





#hexa-solution-container {

    margin-right: 40px;

}

#hexa-solution-container .hexa-row {

    justify-content: flex-end;

}

#hexa-solution-container .hexa-row:first-child {

    margin-top: 0px;

}

#hexa-solution-container .hexa-row:nth-child(even) {

    margin-right: calc(var(--hex-width) / 2);

}



.hexa-row {

    display: flex;

    margin-top: -32px;

    gap: 2px;

}



.hexa {

    background-size: contain;

    background-position: center;

    width: var(--hex-width);

    height: var(--hex-height);

    flex-shrink: 0;

    position: relative;

    transition: all 0.3s ease-in-out;

    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* Hexagon shape */

    overflow: hidden; /* Releváns, ha nem akarjuk, hogy a blur kifolyjon a hexagon peremén kívül */

    backdrop-filter: blur(10px);

}

.hexa.problem {

    background-image: url(./hexa-problem.png);

}

.hexa.solution {

    background-image: url(./hexa-solution.png);

}

.hexa.problem:hover, .hexa.problem.selected {

    cursor: pointer;

    background-image: url(hexa-problem-hover.png);

    color: white !important;

}

.hexa.solution:hover, .hexa.solution.selected {

    cursor: pointer;

    background-image: url(hexa-solution-hover.png);

    color: white !important;

}

.selected {

    position: absolute;

    left: 45%;

    top: 30%;

    z-index: 10;

    animation: floating-hexa-fade 0.3s ease-in-out;

}



.hexa.floating {

    animation: floating-hexa-fade 0.3s ease-in-out;

    z-index: 10;

}



.problem-color {

    color: #E9B534;

}



.solution-color {

    color: #12AF6B;

}



.hexa-element-title {

    position: absolute;

    font-size: 14px;

    z-index: 1;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    font-weight: 500;

    font-size: 12px;

    color: #4a4a4a;

}



/* --- Dialog section --- */



.hexa-dialog {

    display: none;

    position: absolute;

    z-index: 500;

    max-width: 35%;

}



.hexa-dialog-content {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 20px;

    margin-left: 30px;

    margin-right: 30px;

    padding: 20px;

    backdrop-filter: blur(10px);

    background-color: rgba(255, 255, 255, 0);

    animation: floating-hexa-fade 0.3s ease-in-out;

}



.hexa-dialog-content-border-problem::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 10px;

    padding: 2px;

    background: linear-gradient(45deg, #FDE482, #E9B534);

    mask:

        linear-gradient(#000 0 0) content-box,

        linear-gradient(#000 0 0);

    mask-composite: exclude;

}



.hexa-dialog-content-border-solution::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 10px;

    padding: 2px;

    background: linear-gradient(45deg, #A7CC9F, #74DBEA);

    mask:

        linear-gradient(#000 0 0) content-box,

        linear-gradient(#000 0 0);

    mask-composite: exclude;

}



.hexa-dialog .hexa-close-dialog-btn {

    position: absolute;

    top: -46px;

    padding: 12px 32px;

    border: solid 2px #343A38;

    background: #ffffff00;

    color: #343A38;

    cursor: pointer;

    border-radius: 10px;

    animation: floating-hexa-fade 0.3s ease-in-out;

    text-transform: uppercase;

    letter-spacing: .3em;

    font-weight: 600;

}

    .hexa-dialog .hexa-close-dialog-btn:hover {

        color: white;

        background-color: #343A38;

        cursor: pointer;

    }



.dialog-type-text {

    text-transform: uppercase;

    letter-spacing: .3em;

    font-size: 10px;

}



.dialog-title {

    font-weight: 600;

    font-size: 22px;

}



.hexa-dialog-description {

    font-weight: 400;

    line-height: 1.6;

    letter-spacing: 0.5px;

}

    .dialog-description {

        color: #343A38 !important;    

    }



/* ------------- */



@keyframes floating-hexa-fade {

    from {

        opacity: 0%;

        transform: scale(0);

    }

    to {

        opacity: 1;

        transfom: scale(1)

    };

}



@media (max-width: 800px){

    :root {

        --hex-width: 100px;

        --hex-height: 100px;

    }



    .hexa-content {

        display: flex;

        flex-direction: column;

        justify-content: center;

        padding: 0px

    }



    #hexa-problem-container .hexa-row, #hexa-solution-container .hexa-row {

        justify-content: center;

    }

    

    #hexa-problem-container .hexa-row:nth-child(even) {

        margin-right: calc(var(--hex-width) / 2);

    }



    #hexa-solution-container .hexa-row:nth-child(even){

        margin-left: calc(var(--hex-width) / 2);

    }



    #hexa-problem-container, #hexa-solution-container {

        margin-left: 0px;

        margin-right: 0px;

    }



    .hexa-row {

        display: flex;

        margin-top: -20px;

    }

}