body {
    background-color: #D3D3D3;
}

/* Navbar Styles*/
.navbar-allWrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.navbar {
    width: 600px;
    height: 50px;
    border-radius: 999px;
    background-color: white;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* Box shadow stuff */
    /* box-shadow: 0px 6px 10px 0.1px; */
    box-shadow: 0px 21px 81px -9px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 21px 81px -9px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 21px 81px -9px rgba(0,0,0,0.75);
}

.navbar-item {
    border: 1px solid black;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    transition: .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Background blur effect stuff */
    background: rgba(192, 192, 192, 0.46);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.3px);
    -webkit-backdrop-filter: blur(4.3px);
    border: 1px solid rgba(192, 192, 192, 0.3);
}

.navbar-item:hover{
    width: 70px;
    height: 70px;
    font-size: 20px;
    cursor: pointer;
}

.navbar-item:hover + *,
.navbar-item:has(+ .navbar-item:hover){
    width: 60px;
    height: 60px;
    font-size: 18px;
}

.navbar-item:active {
    width: 65px;
    height: 65px;
    opacity: 0.8;
}