* {
    box-sizing: border-box;
}

body {
    background-color: #ebecf0;
}

.nav {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav .item {
    position: absolute;
    width: 55px;
    padding: 18px;
    font-size: 18px;
    border-radius: 50%;
    background-color: #ebecf0;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    transition: all 400ms ease-in-out;
}

.nav .item.open_nav {
    font-size: 22px;
    width: 68px;
    padding: 22PX 0;
    box-shadow: -5px -5px 10px #fff, 5px 5px 10px #babebc;
}

.open .item {
    box-shadow: -5px -5px 10px #fff, 5px 5px 10px #babebc;
}

.open .item.open_nav {
    transform: rotate(42deg);
    box-shadow: inset 7px 2px 10px #babebc, inset -5px -5px 12px #fff;
}

.open .item:nth-child(1){
    transform: translate(-72px, -44px);
}

.open .item:nth-child(2){
    transform: translate(0px, -85px);
}

.open .item:nth-child(3){
    transform: translate(72px, -44px);
    transition-delay: 200ms;
}

.open .item:active {
    box-shadow: inset 1px 1px 2px #babebc, inset -1px -1px 2px #fff;
}

.home {
    color: #2D48FF;
}

.image {
    color: #FF2C71;
}

.config {
    color: #2AB660;
}