*{
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-family: 'Roboto' !important;
}
:root{
    --background: #231f20;
    --wrong: #bb4430;
    --good: #7ebdc2;
    --inputs: #efe6dd;
    --label: #f3dfa2;
}
.input_text_box, .box_word_appears{
    width: 30rem;
    height: 4rem;
    border-radius: 5px;
}
input:focus{
    outline: none;
    
}
.input_text_box:active{
    border-style: none !important;
}

.box_word_appears{
    background-color: var(--label);
    height: auto;
}
.boxs{
    opacity: 0;
    transition: opacity 0.5s  ease;
}
.boxs.appears{
    opacity: 1;
}
.word_appears{
    font-weight: bold;
    font-size: 2rem;
    padding: 10px;

}
input{
    font-weight: bolder;
    transition: transform 0.2s ease
}
.sampleSentence, .sampleSentenceSpa{ 
    min-height: 15rem;
    min-width: 15rem;
    max-width: 25rem;
    max-height: 25rem;
    border-radius: 10px;
    padding-top: .3rem;
    
}
.sampleSentence{
    background-color: var(--label);
    padding: 1px 2rem;
}
.sampleSentenceSpa{
    background-color: var(--inputs);
    padding: 1px 2rem;
}
.textsentence{
    padding: 1.4rem !important;
    font-size: 1.4rem;
    font-weight: medium;
}
::placeholder{
    color: gray;
    font-size: 1.4rem;
    text-align: center;
    padding: 3;
}

.vibrar_mal{
    border: 4px var(--wrong) solid ;
    animation: vibrar 0.2s ease infinite alternate; 
}
.vibrar_bien{
    border: 4px var(--good) solid;
    animation: vibrar 0.2s ease infinite alternate; 
}
@keyframes vibrar  {
    0% {
        transform: translateX(-3px);
    }
    25%{
        transform: translateX(1px);
    }
    50%{
        transform: translateX(0px);
    }
    100% {
        transform: translateX(3px); 
    }
}