body {
    align-items: center;
    background-color: #ffded5;
    display: flex;
    height: 100vh;
    justify-content: center;
    overflow: hidden;
}

.phone {
    background-color: #ffffff;
    border: 5px solid black;
    border-radius: 25px;
    box-shadow: 0 0.9px 2.2px rgba(0, 0, 0, 0.039),
        0 2.2px 5.3px rgba(0, 0, 0, 0.048), 0 4.1px 10px rgba(0, 0, 0, 0.052),
        0 7.4px 17.9px rgba(0, 0, 0, 0.057), 0 13.8px 33.4px rgba(0, 0, 0, 0.067),
        0 33px 80px rgba(0, 0, 0, 0.11);
    height: 400px;
    overflow: hidden;
    position: relative;
    width: 220px;
}

.image {
    position: absolute;
}

.menu {
    align-items: center;
    background-color: #303235;
    clip-path: polygon(81.05% 9.1%, 92% 9.1%, 92% 10.1%, 81.05% 10.1%);
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    font-size: 28px;
    height: 100%;
    position: absolute;
    top: 0;
    transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.active .menu {
    background-color: #e07a8d;
    clip-path: polygon(101% -1%, 101% 101%, -1% 101%, -1% -1%);
}

.options {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    transform: scale(0.8);
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.option {
    cursor: pointer;
    margin: 8px 0;
}

.option.selected {
    color: #a02f56;
}

.active .options {
    transform: scale(1);
}

.x {
    pointer-events: none;
    position: absolute;
    top: 0;
}

.top-bars {
    stroke: #303235;
    transition: stroke 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.active .top-bars {
    stroke: #f2f2f2;
}

.bar {
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bar1 {
    transform-origin: 190px 20.5px;
}

.bar2 {
    transform-origin: 190px 28.5px;
}

.active .bar1 {
    transform: translateY(8.6px) rotate(45deg);
}

.active .bar2 {
    transform: rotate(-45deg);
}

.menu-click-area {
    cursor: pointer;
    height: 40px;
    opacity: 0.3;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
}