h1 {
    margin: 0;
    padding: 0.2em;
    color: white;
}

.head-title {
    position: absolute;
    top: 100px;
}

.tail {
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    /* Prevent tail from blocking clicks */
    transition: all 0.01s ease-out;
    opacity: 0.8;
    z-index: 100;
}

.head-title span {
    display: inline-block;
    transition: transform 0.01s ease-in-out;
    /* Smooth size change */
}

.head-title span:hover {
    transform: scale(2);
    /* Increase size of hovered letter */
}

.honeycomb-container {
    position: absolute;
    width: 80%;
    height: 50vh;
    overflow: hidden;
}

@media(max-width:786px){
    .honeycomb-container{
        position: absolute;
        width: 100%;
        height: 60vh;
        overflow: hidden;
    }
    .tail{
        display: none;
    }
    h1{
        font-size: 16px;
        line-height: 16px;
    }
    .hexagon:hover {
        transform: scale(1.15);
    }
}

.hexagon {
    position: absolute;
    background: transparent;
    border: 2px solid #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.5;
}

.hexagon:hover {
    transform: scale(2);
    box-shadow: 0 0 15px #fff, 0 0 30px #fff, 0 0 45px #fff;
    z-index: 0;
    opacity: 1;
}