body, html {
    cursor: url('../img/c1.png'),auto;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* @keyframes body,html{
    0%{cursor:url('../img/c1.png'),auto};
    100%{cursor:}
} */


#grid-container {
    width: 100%;
    height: 100%;
    z-index: 8;
    position: absolute;

}
#link{
    cursor: url('../img/c1.png'),auto;
}

.hex {
    stroke: #ccc;
    fill: none;
    transition: stroke 0.2s;
}

.hex.highlight {
    stroke: rgb(0, 0, 0);
}
.mainlogo {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Ensure it is positioned absolutely */
    /* transform: translate(-50%, -50%); Adjust position to the center */
    z-index: 9; /* Ensure it is above the grid-container */
}
/* .mainlogo.phone{
    width:50%;
    height: auto;
} */

#mainlogo{
    position: relative;
    width: 50vw;
}
#mainlogo.phone{
    position: relative;
    width: 60vw;
}

#mainlogo.phone.mouseon{
    animation: mp 0.5s forwards;
    cursor: pointer;
}
#mainlogo.phone.mouseleave{
    animation: mpl 0.5s forwards;
    cursor: pointer;
}

@keyframes mp {
    0%{width: 60vw;}
    100%{width: 70vw;}
}
@keyframes mpl{
    0%{width: 70vw;}
    100%{width: 60vw;}
}
#mainlogo.phone{
    position: relative;
    width: 60vw;
}
#mainlogo.mouseon{
    animation: mainlogo 0.5s forwards;
    cursor: pointer;
}
#mainlogo.mouseleave{
    animation: mainlogol 0.5s forwards;
}

@keyframes mainlogo{
    0%{width: 50vw;}
    100%{width: 60vw;}
}
@keyframes mainlogol{
    0%{width: 60vw;}
    100%{width: 50vw;}
}