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

body {
    min-height: 100vh;
    background: linear-gradient(#051f30, #000000);
}

.menu::-webkit-scrollbar {
    display: none;
}

.menu {
    position: fixed;
    top: 0;
    right: 0;
    /* Change from left to right */
    width: 85px;
    height: 100%;
    transition: .3s;
    scrollbar-width: none;
    overflow: hidden scroll;
    background: #ffffff12;
    -ms-overflow-style: none;
    padding: 20px 0 20px 20px;
    /* Adjust padding */
    backdrop-filter: blur(5px);
    box-shadow: -8px 0px 9px 0px #00000014;
    /* Adjust shadow direction */
}

.menu:hover {
    width: 260px;
}

.menu:hover li span:nth-child(2) {
    display: block;
}

.menu-content li {
    list-style: none;
    border-radius: 0px 50px 50px 0;
    transition: .3s;
    margin-bottom: 20px;
    padding-left: 20px;
}

.menu-content li:hover {
    background: #0c0c0c;
}

.menu-content li span:nth-child(2) {
    display: none;
}

a {
    text-decoration: none;
    color: rgb(213, 213, 213);
    display: flex;
    align-items: center;
    font-family: 'calibri';
}

.material-symbols-outlined {
    padding: 10px;
    font-size: 25px;
    margin-right: 20px;
    /* Further increase margin-right for more space */
    border-radius: 50%;
    background: #0c0c0c;
}