.desktop-icons {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1em;
    align-items: center;
    padding: 8px;
}

#mainIcon {
    padding: 8px;
    align-items: center;
}

.desktop-icons.deactive {
    animation: iconsanimation 700ms ease-in-out forwards
}

.desktop-icons.active {
    background: rgba(10, 19, 47, 0.4);
    border-radius: 12px;
}

.hamberger-icon {
    cursor: pointer;
    fill: rgba(255, 255, 255, 0.6)
}

.desktop-icons .icon {
    cursor: pointer;
    display: grid;
    opacity: 0;
    visibility: hidden;
}

.desktop-icons .icon svg,
.desktop-icons .icon img {
    width: 1.5em;
}

.active>.icon,
.deactive>.icon {
    display: grid;
}

.active svg,
.deactive svg {
    fill: #FFF;
}

.active>.icon:nth-child(1) {
    animation: iconanimation 200ms ease-in-out forwards;

}

.active>.icon:nth-child(2) {
    animation: iconanimation 400ms ease-in-out forwards;

}

.active>.icon:nth-child(3) {
    animation: iconanimation 600ms ease-in-out forwards
}

.active>.icon:nth-child(4) {
    animation: iconanimation 800ms ease-in-out forwards
}

.active>.icon:nth-child(5) {
    animation: iconanimation 1000ms ease-in-out forwards
}

.active>.icon:nth-child(6) {
    animation: iconanimation 1200ms ease-in-out forwards
}

.active>.icon:nth-child(7) {
    animation: iconanimation 1400ms ease-in-out forwards
}

.deactive>.icon:nth-child(1) {
    animation: iconanimation1 700ms ease-in-out forwards;
}

.deactive>.icon:nth-child(2) {
    animation: iconanimation1 600ms ease-in-out forwards;
}

.deactive>.icon:nth-child(3) {
    animation: iconanimation1 500ms ease-in-out forwards
}

.deactive>.icon:nth-child(4) {
    animation: iconanimation1 400ms ease-in-out forwards
}

.deactive>.icon:nth-child(5) {
    animation: iconanimation1 300ms ease-in-out forwards
}

.deactive>.icon:nth-child(6) {
    animation: iconanimation1 200ms ease-in-out forwards
}

.deactive>.icon:nth-child(7) {
    animation: iconanimation1 100ms ease-in-out forwards
}

@keyframes iconanimation {
    0% {
        opacity: 0;
        transform: translateY(-1em) scale(0.4) rotate(-15deg);
        visibility: hidden;
    }

    100% {
        opacity: 1;
        transform: translateY(0em) scale(1) rotate(0deg);
        visibility: visible;
    }
}

@keyframes iconanimation1 {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
        visibility: visible;
    }

    100% {
        opacity: 0;
        transform: translateY(-1em) rotate(-15deg);
        visibility: hidden;
    }
}

@keyframes iconsanimation {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}