Hangman-game-with-React/public/sass/control-panel/_action-form.scss

.action-form {
    //height: 40vh;

    box-sizing: border-box;
    padding: 0px 16.5vw;

    display: flex;
    justify-content: center;

    form {

        height: 100%;
        max-width: 742px;

        flex-grow: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        //margin-top: 2.5vh;
        padding-top: 3vh;

        //border-top: 1px solid rgb(163, 163, 163);

        select {
            height: 4vh;
            outline: none;
        }

        textarea {
            resize: none;
            outline: none;

            font-family: Arial, Helvetica, sans-serif;
        }

        input[type="submit"] {

            $background-color: #2f71d5; 

            font-size: 12pt;

            margin-top: 1vh;
            height: 5vh;

            background-color: $background-color;
            color: #fff;

            border: none;
            border: 1px solid adjust-color($color: $background-color, $saturation: 30%, $lightness: 15%, $alpha: 1.0);

            &:hover {
                background-color: adjust-color($color: $background-color, $saturation: 10%, $lightness: 5%, $alpha: 1.0);

            }
        }

        input[type="text"] {

            height: 5vh;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.2vw;

            outline: none;
            border: none;
            border-bottom: 1px solid rgb(162, 162, 162);
        }
        
    }

    &.add-word {

        form {
            
            select {
                margin-bottom: 0.5vh;
            }

            textarea {

                margin-top: 2vh;
            }
        }
    }

    &.add-category {

        form {

            input[type="text"] {

                margin-bottom: 1vh;
            }
        }
    }

    &.delete-word {

        form {

            select {

                margin-bottom: 0.5vh;
            }
        }
    }

    &.edit-word {

        form {

            select {

                margin-bottom: 0.5vh;
            }
        }
    }

}

@media (max-width: 991.98px) {

    .action-form {

        form {
            
            input[type="submit"] {
                font-size: 2.4vw;

            }
        }
    }
}

@media (max-width: 576px) {

    .action-form {

        padding-left: 0;
        padding-right: 0;

        form {

            select {

                border: none;
                border-bottom: 1px solid rgb(162, 162, 162);
                background-color: #fff;
            }
            
            input[type="submit"] {
                font-size: 12pt;

            }

            input[type="text"] {
                font-size: 12pt;

            }
        }
    }
}