div.keyboard {
    /* Flex object settings (child of mainFlexContainer) */
    order: 1;
    width: 20%;
    height: fit-content;
    position: sticky;
    top: 8;
    /* Flex container settings (parent of key) */
    display: flex;
    flex-flow: column;
    /* Border settings */
    border-style: solid;
    border-right: none;
    border-width: 6px;
    border-color: #b7bdf8;
    /* background-color: #24273a; */
    border-radius: 16px 0px 0px 16px;
    padding: 8px;
    padding-left: 0px;
    justify-content: space-around;
    text-align: center;
    overflow: hidden;
}

div.keyboard:onclick {
    width: 10px;
}

button.menu {
    visibility: hidden;
}

.key {
    color: #cad3f5;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    border-style: solid;
    border-width: 2px;
    border-radius: 0px 16px 16px 0px;
    border-color: #c6a0f6;
    border-left: none;
    padding: 8px;
    box-shadow: 6px 6px 4px #181926;
}

div.key {
    display: flex;
    flex-flow: column wrap;
    padding: 16px;
    padding-left: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-style:ridge;
    box-shadow: inset 3px 3px 2px #181926;
    background-image: linear-gradient(to right, rgb(36, 39, 58, 0.8), rgb(30, 32, 48, 0.8));
}

a.key {
    text-decoration: none;
    color: #cad3f5;
    background-image: linear-gradient(to right, rgb(36, 39, 58), rgb(30, 32, 48));
    margin-bottom: 8px;
    margin-top: 8px;
    transition: all 0.2s ease;
    overflow: hidden;
}

a.key:hover {
    color: #b7bdf8;
    background-image: linear-gradient(to right, rgb(36, 39, 58, 0.5), rgb(30, 32, 48, 0.3));
    border-color: #b7bdf8;
    box-shadow: inset -6px 6px 4px #181926;
    transition: all 0.2s ease;
}

div.arrows {
    position: absolute;
    margin-top: -3px;
    width: 100%;
    color: rgb(183, 189, 248, 1.0);
    font-size: larger;
    text-align: right;
    text-wrap: nowrap;
    overflow: hidden;
    z-index: -1;
    animation: arrowBounce 1.2s ease infinite;
}

@keyframes arrowBounce {
    0% {
        right: 12%;
    }
    50% {
        right: 8%;
    }
    100% {
        right: 12%;
    }
}