.offcanvas-bottom-primary-container {
    display: flex;
    align-items: center;
    height: 100%;
    margin: auto;
}

.offcanvas-bottom-secondary-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    overflow: auto;
    margin: 10px auto;
}

.offcanvas-bottom-button {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: clamp(64px, calc(var(--index) * 8), 165px);
    height: clamp(64px, calc(var(--index) * 8), 165px);
    margin: 10px;
    background-color: rgb(240, 241, 244);
    border-radius: 10px;
    border: 1px solid rgba(26, 29, 32, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    transition: all .1s linear;
    cursor: pointer;
}

.offcanvas-bottom-button:hover {
    box-shadow: 0 0 5px rgb(0,0,0,.4);
}

.offcanvas-bottom-button-child {
    display: block;
    flex-wrap: wrap;
    transition: all .1s linear;
}

.offcanvas-bottom-button:active .offcanvas-bottom-button-child {
    transform: scale(0.99);
}

.offcanvas-bottom-button-child-image {
    width: clamp(16px, calc(var(--index) * 4), 64px);
    height: auto;
    filter: drop-shadow(1px 1px 1px rgb(0, 0, 0));
    transition: all .1s linear;
}

.offcanvas-bottom-button-child-text {
    margin-top: clamp(10px, calc(var(--index) * .05), 30px);
    font-size: clamp(10px, calc(var(--index) * .9), 14px);
    transition: all .1s linear;
}

.offcanvas-bottom-button:active {
    box-shadow: 0 0 0 0 rgb(181, 181, 181);
}