.hex-shadow
{
    filter: drop-shadow(0px 0px 7px #FF5500);
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    transition: transform 1.3s;
    width: 20%;
}

.hex-shadow.active
{
    transform: translate(-17%, -50%) scale(2.75) !important;
    animation: furnace-pulse 10s infinite;
}

#hex-1
{
    transform: translate(-34%, -50%) rotate(270deg) translate(var(--radius)) rotate(-270deg);
}

#hex-2
{
    transform: translate(-34%, -50%) rotate(240deg) translate(var(--radius)) rotate(-240deg);
}

#hex-3
{
    transform: translate(-34%, -50%) rotate(210deg) translate(var(--radius)) rotate(-210deg);
}

#hex-4
{
    transform: translate(-34%, -50%) rotate(180deg) translate(var(--radius)) rotate(-180deg);
}

#hex-5
{
    transform: translate(-34%, -50%) rotate(150deg) translate(var(--radius)) rotate(-150deg);
}

#hex-6
{
    transform: translate(-34%, -50%) rotate(120deg) translate(var(--radius)) rotate(-120deg);
}

#hex-7
{
    transform: translate(-34%, -50%) rotate(90deg) translate(var(--radius)) rotate(-90deg);
}

#hex-8
{
    transform: translate(-34%, -50%) rotate(60deg) translate(var(--radius)) rotate(-60deg);
}

#hex-9
{
    transform: translate(-34%, -50%) rotate(30deg) translate(var(--radius)) rotate(-30deg);
}

#hex-10
{
    transform: translate(-34%, -50%) rotate(0deg) translate(var(--radius)) rotate(0deg);
}

#hex-11
{
    transform: translate(-34%, -50%) rotate(330deg) translate(var(--radius)) rotate(-330deg);
}

#hex-12
{
    transform: translate(-34%, -50%) rotate(300deg) translate(var(--radius)) rotate(-300deg);
}

.hex
{
    width: 80%;
    aspect-ratio: 1 / 1.1547;
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* Hexagon shape */
    clip-path: polygon(
        50% 0%, 
        100% 25%, 
        100% 75%, 
        50% 100%, 
        0% 75%, 
        0% 25%
    );

    -webkit-user-select:none;
    user-select:none;
}

#html
{
    background: #e54c21;
}

#css
{
    background: #214ce5;
}

#bootstrap
{
    background-color: #820afa;
}

#js
{
    background: #f7e018;
}

#ts
{
    background: #2d79c7;
}

#php
{
    background:#787cb4;
}

#mysql
{
    background: #0B1F2A;
}

#cpp
{
    background: #00589d;
}

#cs
{
    background: #360092;
}

#dotnet-core
{
    background: #6c409d;
}

#python
{
    background: #232323;
}

#git
{
    background: #ffffff;
}

.hex img
{
    width: 80%;
    height: 80%;
    object-fit: contain;
}