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

body {
    min-height: 100vh;
    background: linear-gradient(#051f30, #000000);
    font-family: 'Calibri', sans-serif;
}

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

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

.menu:hover {
    width: 260px;
}

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

.menu-content li:hover {
    background: #74b9ff;
}

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

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

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

.material-symbols-outlined {
    padding: 10px;
    font-size: 25px;
    margin-right: 10px;
    border-radius: 50%;
    background: #0c0c0c;
}