* {
    padding: 0;
    margin: 0;
    /*.parts-of-speech, .button, .label-checkbox, #word, #index, #buttons, #forder, #checkboxes, .box-help*/
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* internet explorer */
    user-select: none;
}

#wrap-canvas {
    z-index: -1;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: min-content;
    height: min-content;
    position: relative;
    transition: .3s;
}

#canvas {
    z-index: -1;
    position: relative;
    border: 1px solid black;
    transition: .3s;
}

input[type=number] {
    position: relative;
    border: 2px solid rgb(65, 0, 178);
    border-radius: 5px;
    text-align: center;
    width: 120px;
    height: 25px;
    margin: 3px;
    transition: .3s;
    caret-color: transparent;
}

#generate-dots {
    width: 120px;
    height: 25px;
    margin: 3px;
    position: relative;
    background-color: white;
    border-radius: 12.5px;
    border: 2px solid rgb(0, 164, 22);
    color: rgb(0, 164, 22);
    transition: .3s;
    cursor: pointer;
}

#generate-dots:active {
    transition: .3s;
    color: white;
    background-color: rgb(0, 174, 23);
}

#generate-dots:hover {
    transition: .3s;
    color: white;
    background-color: rgb(0, 209, 28);
    border: 2px solid rgb(0, 209, 28);
}

input[type=number]::placeholder {
    color: rgb(65, 0, 178);
    transition: .3s;
}

input[type=number]:focus::placeholder {
    color: rgb(132, 0, 255);
    transition: .3s;
}

input[type=number]:focus {
    transition: .3s ease-in;
    border: 10px solid rgb(132, 0, 255);
    border-radius: 30px;
    outline: none;
    width: 130px;
    height: 40px;
}

#inputs {
    position: absolute;
    left: 10px;
    top: 10px;
    transition: .3s;
}

input::-webkit-inner-spin-button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

#values {
    border: 1px solid black;
    padding: 5px;
    display: inline-block;
    position: relative;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.7);
}

.box-help {
    position: absolute;
    border-radius: 5px;
    background-color: #222;
    color: #DDD;
    line-height: 25px;
    padding: 2.5px 5px;
    z-index: -1;
    opacity: 0;
    transition: .3s;
    text-align: center;
    border: 2px solid gray;
}

#say {
    position: absolute;
    left: 50%;
    top: 70%;
    padding-left: 15px;
    padding-right: 15px;
    transform: translateX(-50%);
}