nav.menu {
    display: flex;
    flex-direction: row;

    padding-inline: 40px;
    padding-left: 40px;
    padding-right: 40px;
    
    padding-block: 3px;
    padding-top: 3px;
    padding-bottom: 3px;

    justify-content: space-between;
    position: fixed;
    z-index: 999;
    box-sizing: border-box;
    height: 30px;
    width: 100%;
    background-color: rgba(0.7, 0.7, 0.7, 0.7);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    transition: 500ms;
    top: 0;
    left: 0;

    transform: translateY(-100%);
}

    nav.menu[unwrapped] {
        transform: translateY(0);
    }

    nav.menu a {
        display: contents;
        text-decoration: none;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }

    nav.menu:is(:hover, :focus-within) {
        height: 130px;
    }

    nav.menu:is(:hover, :focus-within) .logoContainer .menuLogo .logo {
                animation: animateRotate 700ms ease-in;
            }

    nav.menu:is(:hover, :focus-within) .logoContainer .letterLogo .letterAnim {
                font-size: 2.1875rem;
                font-weight: 400;
                color: #D168DC;
            }

    nav.menu .logoContainer {
        display: flex;
        height: 100%;
    }

    nav.menu .logoContainer .menuLogo {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            height: 100%;
        }

    nav.menu .logoContainer .menuLogo .logo {
                width: auto;
                height: 100%;
                /* flex: 1; */
                aspect-ratio: 1/1;
                -o-object-fit: contain;
                   object-fit: contain;
            }

    nav.menu .logoContainer .letterLogo {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: auto;
            margin-left: 10px;
            transition: 0.5s;
        }

    nav.menu .logoContainer .letterLogo .letterAnim {
                font-size: 0.9375rem;
                transition: 0.5s;
            }

    nav.menu .logoContainer .scintille {
            position: relative;
            animation-name: scintillement;
            animation-duration: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            opacity: 0;
            text-shadow: #D168DC 1px 0 10px;
        }

    nav.menu .buttonsMenu {
        display: flex;
        gap: 25px;

        padding-inline: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    nav.menu .buttonsMenu a.btn {
            display: flex;
            align-items: center;
            text-decoration: none;
            font-size: 1.25rem;
            height: 100%;
            text-align: center;

            --color: white;
        }

    nav.menu .buttonsMenu a.btn.margin-start {
                margin-left: 50px;
                margin-top: initial;
            }

    nav.menu .buttonsMenu a.btn .textBtn {
                position: relative;
                color: var(--color);
            }

    nav.menu .buttonsMenu a.btn .textBtn:after {
                content: "";
                display: block;
                width: 0%;
                height: 1px;
                background-color: var(--color);
                transition: 0.25s;
            }

    nav.menu[unwrapped] .buttonsMenu a.btn:is(:hover, :focus) .textBtn:after {
                        width: 100%;
                    }

    nav.menu[unwrapped] .buttonsMenu a.btn[selected] {
                    --color: #D168DC;
                }

    nav.menu[unwrapped] .buttonsMenu a.btn[selected] .textBtn:after {
                        width: 100%;
                    }

    nav.menu[unwrapped] .buttonsMenu a.btn[selected] {
                    filter: drop-shadow(0 0 15px #d168dcbd) drop-shadow(0 0 25px #d168dc8f) drop-shadow(0 0 5px #d068dcf6);
}

button.burgerMenu {
    visibility: hidden;

    position: fixed;
    z-index: 999;
    right: 25px;
    top: 25px;
    background-color: transparent;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    cursor: pointer;
    transition: 0.5s;

    --width: 40px;
    --height: 26px;

    width: var(--width);
    height: var(--height);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

button.burgerMenu div.burgerLine {
        width: 100%;
        height: 4px;
        background-color: white;
        border-radius: 50px;
        transition: 0.5s;
    }

button.burgerMenu[opened] div.burgerLine:nth-child(1) {
            transform:  translateY(275%) rotate(45deg);
        }

button.burgerMenu[opened] div.burgerLine:nth-child(2) {
            opacity: 0;
        }

button.burgerMenu[opened] div.burgerLine:nth-child(3) {
            transform: translateY(-275%) rotate(-45deg);
        }

@keyframes animateRotate {
    0% {
        transform: rotate3d(0, 1, 1, 0deg)
    }
    20% {
        transform: rotate3d(0, 1, 1, 72deg);
    }
    40% {
        transform: rotate3d(0, 1, 1, 144deg);
    }
    60% {
        transform: rotate3d(0, 1, 1, 216deg);
    }
    80% {
        transform: rotate3d(0, 1, 1, 288deg);
    }
    100% {
        transform: rotate3d(0, 1, 1, 360deg);
    }
}

@keyframes scintillement {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 87.5rem) {
        body:has(.burgerMenu[opened]) nav.menu {
            /* visibility: visible; */
            display: flex;

            transform: none;
            animation: openMenu 0.5s ease-in-out 0.01s forwards;
        }

            body:has(.burgerMenu[opened]) nav.menu .logoContainer {
                height: initial;
            }
                
                body:has(.burgerMenu[opened]) nav.menu .logoContainer .menuLogo .logo {
                    animation: animateRotate 700ms ease-in 0.35s;
                }
        body:has(.burgerMenu[closed]) nav.menu {
            animation: closeMenu 0.5s ease-in-out forwards;
        }
    
    button.burgerMenu {
        visibility: visible;
    }

    nav.menu, nav.menu:hover {
        /* visibility: hidden; */
        /* display: none; */

        width: 100%;
        height: 100%;

        /* animation: hideMenu 0.01s forwards; */

        /* right: -100%; */
        top: -100%;

        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
            nav.menu .logoContainer .menuLogo .logo, nav.menu:hover .logoContainer .menuLogo .logo {
                animation: none;
            }
    
            nav.menu .logoContainer .letterLogo .letterAnim, nav.menu:hover .logoContainer .letterLogo .letterAnim {
                font-size: 2.1875rem;
                font-weight: 400;
                color: #D168DC;
            }
                nav.menu .logoContainer .menuLogo .logo, nav.menu:hover .logoContainer .menuLogo .logo {
                    height: 140px;
                    width: auto;
                }
    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: wrap;
            align-content: center;

            height: 68%;
            width: 100%;
            gap: 20px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 1.875rem;
            }

                nav.menu .buttonsMenu a.btn.margin-start, nav.menu:hover .buttonsMenu a.btn.margin-start {
                    margin-top: 50px;
                    margin-left: initial;
                }

                nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {

                display: flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                height: auto;
                width: 12rem;
    }
}

@media (max-height: 41.875rem) and (max-width: 87.5rem) {    
            nav.menu .logoContainer .letterLogo .letterAnim, nav.menu:hover .logoContainer .letterLogo .letterAnim {
                font-size: 2rem;
            }
                nav.menu .logoContainer .menuLogo .logo, nav.menu:hover .logoContainer .menuLogo .logo {
                    height: 125px;
                    width: auto;
                }
    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 15px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 1.5625rem;
            }
}

@media (max-height: 56.875rem) and (max-width: 30rem) {    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 12px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 1.375rem;
            }
}

@media (max-height: 21.25rem) and (max-width: 50rem) {    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 10px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 1.25rem;
            }
}

@media (max-height: 41.875rem) and (max-width: 30rem) {    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 10px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 1.25rem;
            }
}

@media (max-height: 41.875rem) and (max-width: 23.75rem) {    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 7px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 1.125rem;
            }
}

@media (max-height: 30rem) and (max-width: 21.75rem) {
            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                width: 9rem;
            }
}


@media (max-height: 21.25rem) and (max-width: 30rem) {    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 7px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 1.125rem;
            }
}

@media (max-height: 30rem) and (max-width: 23.75rem) {    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 5px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 0.9375rem;
            }
}

@media (max-height: 18.125rem) and (max-width: 30rem) {    
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            gap: 5px;
        }

            nav.menu .buttonsMenu a.btn, nav.menu:hover .buttonsMenu a.btn {
                font-size: 0.9375rem;
                width: 9rem;
            }
}

@media (max-height: 20.625rem) and (max-width: 87.5rem) {
        nav.menu .buttonsMenu, nav.menu:hover .buttonsMenu {
            height: 59%;
        }
}

@keyframes openMenu {
    0% {
        /* right: -100%; */
        top: -100%;
    }
    100% {
        /* right: 0; */
        top: 0;
    }
}

@keyframes closeMenu {
    0% {
        /* right: 0; */
        top: 0;
    }
    100% {
        /* right: -100%; */
        top: -100%;
        display: none;
    }
}

@keyframes hideMenu {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}