.control-panel {
    height: 60vh;
    max-width: 100vw;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    padding: 5vh 15vw;

    button {
        
        width: 16vw;
        max-width: 250px;
        height: 16vw;
        max-height: 250px;

        margin: 0px 3vw;

        font-size: 1.8vw;
        font-weight: bold;

        border: none;
        border-radius: 5px;

        cursor: pointer;

        @mixin generateColors($background-color) {
            
            background-color: $background-color;
            border: 1px solid adjust-color($color: $background-color, $blackness: 10%, $alpha: 1.0);
            
            transition: ease-in-out 0.4s;

            & {
                display: inline-block;
                vertical-align: middle;
                -webkit-transform: perspective(1px) translateZ(0);
                transform: perspective(1px) translateZ(0);
                box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                -webkit-transition-duration: 0.3s;
                transition-duration: 0.3s;
                -webkit-transition-property: transform;
                transition-property: transform;
              }
              &:hover, &:focus, &:active {
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
              }

            &:hover {
                
                background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
                transition: ease-in-out 0.4s;

            }
        }

        &.add-words {
            
            $background-color: #77b3d6;

            @include generateColors($background-color);
        }

        &.add-category {

            $background-color: #c469cc;

            @include generateColors($background-color);
        }

        &.delete-category {

            $background-color: #f79143;

            @include generateColors($background-color);
        }

        &.delete-word {

            $background-color: #df6767;

            @include generateColors($background-color);
        }

        &.edit-word {

            $background-color: #7dbb4e;

            @include generateColors($background-color)
        }
    }
}

@media (max-width: 991.98px) {

    .control-panel {

        height: auto;

        flex-direction: column;
        justify-content: space-around;
        align-items: initial;        

        flex-wrap: nowrap;

        button {
            max-width: none;
            max-height: none;
            
            width: 66vw;
            height: 20vh;

            font-size: 3vw;

            margin-bottom: 3vh;
        }
    }
}

@media (max-width: 576px) {

}