@import './animation.css';
.open-button-container{
    position: fixed;
    right: 0;
    display: flex;
    justify-content: end;
    filter: drop-shadow( 0 0 10px rgba(0, 0, 0, 0.25));
    z-index: 1;
}

.icon-menu{
    width: 3rem;
    margin: 40px;
    cursor: pointer;
}

.circular-menu.show .menu-background {
    opacity: 1;
    z-index: 3;
}

.menu-background {
    position: fixed;
    background-color: #1f4167dd;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    opacity: 0;
    z-index: -1;
}

.menu {
    position: relative;
    width: 413px;
    height: 413px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.close-container {
    display: flex;
    place-content: center;
    width: 112px;
    height: 112px;
    background-color: #101c2b95;
    transform: translateY(-4px);
    border-radius: 50%;
    transition: transform 0.2s;
}

.close-icon {
    width: 40px;
}

.item {
    position: absolute;
    bottom: 0;
    transform-origin: center -45%;
    transition: transform 0.2s;
}

.icon {
    position: absolute;
    width: 56px;
    top: 33%;
    left: 38%;
    filter: invert();
    transition: transform 0.2s;
}

.item p{
    position: absolute;
    width: 60px;
    top: 25%;
    left: 37%;
    color: #fff;
    padding-top: 25%;
    text-decoration: none;
    transition: transform 0.2s;
}

.item-content {
    width: 100%;
    transition: transform 0.2s;
}

.item:hover .icon {
    top: 35%;
    filter: brightness(0) saturate(100%) invert(53%) sepia(89%) saturate(2923%) hue-rotate(158deg) brightness(101%) contrast(103%);
}

.item:hover p {
    display: none;
}

.item:hover .icon-container {
    transform: translateY(4%);
    filter: brightness(0.5);
}

.close-container:hover .close-icon {
    filter: brightness(0) saturate(100%) invert(53%) sepia(89%) saturate(2923%) hue-rotate(158deg) brightness(101%) contrast(103%);
}

.close-container:hover {
    background-color: #0b1c2fa4;
    transform: scale(1.1) translateY(-4px);
}

.item[data-tooltip]:hover::after {
    opacity: 1;
}

.item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    width: 200px;
    text-align: center;
    white-space: wrap;
    color: #fff;
    font-size: 48px;
    transform-origin: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.item[data-tooltip]:nth-child(6)::after {
    left: 4%;
    bottom: -44%;
}

.item[data-tooltip]:nth-child(2)::after {
    transform: rotateZ(-72deg) translate(-135%, -153%);
    -moz-transform: rotateZ(-72deg) translate(-33%, 14%);
}

.item[data-tooltip]:nth-child(3)::after {
    transform: rotateZ(-144deg);
    left: 43%;
    top: 140%;
}

.item[data-tooltip]:nth-child(4)::after {
    transform: rotateZ(144deg);
    top: 135%;
    left: -27%;
}

.item[data-tooltip]:nth-child(5)::after {
    transform: rotateZ(72deg);
    left: 20%;
    bottom: -96%;
}

.item:nth-child(1) { transform: rotate(0deg); }
.item:nth-child(2) { transform: rotate(72deg); }
.item:nth-child(3) { transform: rotate(144deg); }
.item:nth-child(4) { transform: rotate(216deg); }
.item:nth-child(5) { transform: rotate(288deg); }

.item:nth-child(1) .icon { transform: rotate(0deg) translateY(-14px); }
.item:nth-child(2) .icon { transform: rotate(-72deg) translateY(-18px); }
.item:nth-child(3) .icon { transform: rotate(-144deg) translateY(-14px); }
.item:nth-child(4) .icon { transform: rotate(-216deg) translateY(-14px); }
.item:nth-child(5) .icon { transform: rotate(-288deg) translateY(-14px); }
.item:nth-child(6) .icon { transform: translateY(-14px); }

.item:nth-child(1) p { transform: rotate(0deg); }
.item:nth-child(2) p { transform: rotate(287deg) translateX(13px); }
.item:nth-child(3) p { transform: rotate(215deg); }
.item:nth-child(4) p { transform: rotate(145deg); }
.item:nth-child(5) p { transform: rotate(72deg); }

.item:nth-child(1):hover .icon { transform: rotate(0deg) translateY(-4px) scale(1.2); }
.item:nth-child(2):hover .icon { transform: rotate(-72deg) translateY(-8px) scale(1.2); }
.item:nth-child(3):hover .icon { transform: rotate(-144deg) translateY(-4px) scale(1.2); }
.item:nth-child(4):hover .icon { transform: rotate(-216deg) translateY(-4px) scale(1.2); }
.item:nth-child(5):hover .icon { transform: rotate(-288deg) translateY(-4px) scale(1.2); }
.item:nth-child(6):hover .icon { transform: translateY(-4px); }

@media (max-width: 800px) {
    .icon-menu{
        margin: 25px;
    }

    .menu {
        transform: scale(0.8)
    }

    .item[data-tooltip]::after{
        font-size: 36px;
    }

    .item[data-tooltip]:nth-child(1)::after{
        bottom: -41%;
        left: 7%;
    }

    .item[data-tooltip]:nth-child(5)::after {
        bottom: -75%;
    }
}

@media (max-width: 440px) {
    .icon-menu{
        margin: 15px;
        width: 2.5rem;
    }

    .menu {
        transform: scale(0.6)
    }

    .item-content .icon-container{
        width: 100%;
    }

    .item[data-tooltip]::after {
        font-size: 48px;
        font-weight: bold;
        opacity: 0;
        left: 0 !important;
        top: 0 !important;
    }

    .item[data-tooltip]:focus::after {
        opacity: 1;
    }

    .item[data-tooltip]:nth-child(2)::after {
        transform: rotateZ(-72deg) translate(60%, -25rem);
    }

    .item[data-tooltip]:nth-child(3)::after {
        transform: rotateZ(-144deg) translate(20%, -17rem);
    }

    .item[data-tooltip]:nth-child(4)::after {
        transform: rotateZ(144deg) translate(-36%, -18rem);
    }

    .item[data-tooltip]:nth-child(5)::after {
        transform: rotateZ(72deg) translate(-36%, -25.5rem);
        bottom: 14vh;
    }

    .item[data-tooltip]:nth-child(6)::after {
        transform: translate(1vh, -28rem);
        bottom: 14vh;
    }
}