body {
    height: 100dvh;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.apps-view {
    backdrop-filter: blur(20px);
    box-shadow: 0px 0px 5px 2px #0000001d;
    width: 290px;
    height: calc(100% - 30px);
    border-radius: 20px;
    background-color: color-mix(in srgb, var(--body-background-color), #ffffff66);
    font-size: larger;
    margin-right: auto;
    margin-left: auto;

    overflow: auto;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .apps {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: start;
        align-content: start;
        gap: 10px;
        padding: 0px 15px;

        .app {
            text-decoration: none;

            div {
                z-index: 0;
                user-select: none;
                cursor: pointer;
                width: 80px;
                height: 80px;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    margin-top: 5px;
                    width: 50px;
                    height: 50px;
                }

                p {
                    font-family: "Inter", "Noto Sans JP", sans-serif;
                    font-size: small;
                    margin: 0;
                    text-align: center;
                    white-space: nowrap;
                    color: var(--font-color);
                }
            }

            div::before {
                z-index: -1;
                content: '';
                position: absolute;
                top: 0px;
                left: 0px;
                width: 80px;
                height: 80px;
                border-radius: 15px;
                background: transparent;
                transition: background 0.1s ease-in-out;
            }

            div:hover::before {
                background: var(--hover-color);
            }
        }
    }

    .all-app {
        margin-top: 20px;
    }
}