* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fullCycle {
    0% { transform: translateZ(0);}
    45% { transform: translateZ(-30px);}
    75% { transform: translateZ(0);}
    80% { background-color: var(--cube_color1);}
    90% { transform: perspective(900px) rotateX(360deg); }
    90.5% { background-color: white;}
    98% { background-color: var(--cube_color1);}
}
@keyframes rotate1 {
    0% { transform: perspective(900px) rotateX(60deg) rotatez(45deg);}
    100% { transform: perspective(900px) rotateX(60deg) rotatez(405deg);}
}
@keyframes rotate2 {
    0% { transform: perspective(900px) rotateX(60deg) rotatez(45deg) translatez(-72px);}
    100% { transform: perspective(900px) rotateX(60deg) rotatez(405deg) translatez(-72px);}
}
@keyframes rotate3 {
    0% { transform: perspective(900px) rotateX(60deg) rotatez(45deg) translatez(-144px);}
    100% { transform: perspective(900px) rotateX(60deg) rotatez(405deg) translatez(-144px);}
}

:root {
    --background_color1: #a3c4c6;
    --background_color2: #2e4049;
    --cube_color1: #91e6e5;
    --cube_color2: #3c8ea1;
    --cube_color3: #2d5061;
    
}

body {
    width: 100%;
    height: 100vh;
    transform-style: preserve-3d;
    background-image: linear-gradient(to bottom right, var(--background_color1), var(--background_color2));
}

.fancyBorder {
    display: flex;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 280px;
    height: 200px;
    z-index: 999;

    >img {
        scale: .8;
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
        position: absolute;
        right: 5px;
        bottom: 5px;
        z-index: 4;
    }

    >div:first-of-type {
        position: absolute;
        background-color: var(--cube_color1);
        border-radius: 36% 64% 46% 54% / 53% 80% 20% 47%;
        animation: spin 5s linear infinite;
        right: 0;
        bottom: 0;
        z-index: 2;
        scale: .8;
        width: 150px;
        height: 150px;
    }

    >div:nth-of-type(2) {
        position: absolute;
        scale: .8;
        width: 150px;
        height: 150px;
        background-color: var(--cube_color3);
        border-radius: 82% 18% 46% 54% / 53% 49% 51% 47%;
        animation: spin 6s linear infinite;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    >div:nth-of-type(3) {
        position: absolute;
        scale: .8;
        width: 150px;
        height: 150px;
        background-color: var(--cube_color2);
        border-radius: 71% 29% 66% 34% / 53% 43% 57% 47% ;
        animation: spin 7s linear infinite;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    >a {
        >svg {
            color: var(--cube_color1);
            transition: .2s;

            &:hover {
                scale: 1.3;
            }
        }
    }

    >a:nth-of-type(1) {
        position: absolute;
        right: 140px;
        top: 40px;
        transition: .25s;
    }

    >a:nth-of-type(2) {
        position: absolute;
        top: 85px;
        right: 165px;
        transition: .5s;
    }

    >a:nth-of-type(3) {
        position: absolute;
        top: 130px;
        right: 165px;
        transition: 1s;
    }

    >a:nth-of-type(4) {
        position: absolute;
        top: 175px;
        right: 140px;
        transition: 1.8s;

    }

    &:not(:hover) {
        width: 150px;
        height: 160px;

        >a {
            top: 80px;
            right: 85px;
        }
    }
    
    
}


.base {
    position: relative;
    left: 400px;
    top: 50px;
    width: 400px;
    height: 300px;
    &:hover {
        >div{
            >div {
                &::before {
                    height: 70px;

                }

                &::after {
                    width: 70px;

                }

                >div:first-of-type {
                    transform: perspective(900px) translatez(-70px);
                }

                >div:nth-of-type(2) {
                    width: 70px;

                }

                >div:last-of-type {
                    height: 70px;
                }
            }
        }
    }
}
.cube {
    position: absolute;
    left: 90px;
    top: -50px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: 220px;
    height: 220px;
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(60deg) rotatez(45deg);
    animation: rotate1 7s linear infinite;

    &:nth-of-type(2) {
        transform: perspective(900px) rotateX(60deg) rotatez(45deg) translatez(-72px);
        z-index: 2;
        animation: rotate2 7s linear infinite;

    }

    &:nth-of-type(3) {
        transform: perspective(900px) rotateX(60deg) rotatez(45deg) translatez(-144px);
        z-index: 1;
        animation: rotate3 7s linear infinite;

    }

    >div {
        position: relative;
        width: 70px;
        height: 70px;
        background-color: var(--cube_color1);
        transform-style: preserve-3d;
        transition: .4s;

        
        &::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 10px;
            background-color: var(--cube_color2);
            transform: rotatex(90deg);
            transform-origin: bottom;
            transition: .4s;
        }

        &::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 10px;
            height: 100%;
            background-color: var(--cube_color3);
            transform: rotatey(-90deg);
            transform-origin: right;
            transition: .4s;
        }

        >div:first-of-type {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: var(--cube_color1);
            margin: auto;
            transform: perspective(900px) translatez(-10px);
            transition: .4s;

        }

        >div:nth-of-type(2) {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 10px;
            height: 100%;
            background-color: var(--cube_color3);
            transform: rotatey(90deg);
            transform-origin: left;
            transition: .4s;
        }
        >div:last-of-type {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 10px;
            background-color: var(--cube_color2);
            transform: rotatex(-90deg);
            transform-origin: top;
            transition: .4s;
        }
    }
    >div:nth-of-type(1) {
        animation: fullCycle 3.5s ease-in infinite;
    }
    >div:nth-of-type(2) {
        animation: fullCycle 3.5s linear infinite;
    }
    >div:nth-of-type(3) {
        animation: fullCycle 3.5s ease-in infinite;
    }
    >div:nth-of-type(4) {
        animation: fullCycle 3.5s ease-out infinite;
    }
    >div:nth-of-type(5) {
        animation: fullCycle 3.5s linear infinite;
    }
    >div:nth-of-type(6) {
        animation: fullCycle 3.5s ease infinite;
    }
    >div:nth-of-type(7) {
        animation: fullCycle 3.5s ease-out infinite;
    }
    >div:nth-of-type(8) {
        animation: fullCycle 3.5s ease infinite;
    }
    >div:nth-of-type(9) {
        animation: fullCycle 3.5s linear infinite;
    }
}