.grammar-box{
    margin-bottom: 10%;
}

#trackAudio{
    display: none;
}


.main-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.underlined{
    text-decoration: underline;
}


/* .center{
    justify-items: center;
} */



button{
    width: 150px;
    height: 35px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 6vw;
}



.letter-alphabet{
    font-weight: bold;
}

.letter-alphabet:hover{
    background-color: rgba(17, 99, 81, 0.596);
}

.exercise-title{
    align-self: flex-start;
    margin-left: 1%;
    font-weight: bold;
}

.ramka{
    border: 5px solid red;
    margin: 2vw;
    padding: 2vw;
}


.main-title{
    font-weight: bold;
    text-align: center;
}

.item{
    margin-top: 2%;
}

.title{
    font-weight: bold;
    text-align: center;
}

.tooltip-container{
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    text-align: start;
}

.tooltip-text{
    visibility: hidden;
    width: 40vw;
    background-color: black;
    color: #fff;
    font-size: 2vw;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;   
}

.tooltip-text-2{
    font-size: 1.5vw;
    width: 20vw;
    background-color: rgb(143, 250, 100);
    color: #131212;
    border: 1px solid #23232e;
    top: 50%;
    left: -130%; /* Ajuste conforme necessário */
    margin-left: -50px; /* Ajuste conforme necessário */
    transform: translateY(-50%);
}

.tooltip-container:hover .tooltip-text{  
    visibility: visible;    
}

.term-example{
    color: blue;
}

.audio-term-example{
    color: blue;
}

.btn-group button{
    background-color: rgb(41, 34, 34);
    margin-bottom: 4vw;
    width: 110px;
    height: 35px;
}

footer{
    background: #23232e;
    color: white;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
}

table{
    border: 2px solid black;
    background-color: white;
    color: black;
}

table{
    border-collapse: collapse;
    border: 3px solid black;
}

table tr th{
    font-weight: bold;
    color: black;
    background-color: rgb(211, 211, 158);
    border: 1px solid black;
    border-collapse: separate;
    padding-left: 1vw;
    padding-right: 1vw;
    height: 4vw;
}

table tr td{
    color: black;
    background-color: white;
    border: 1px solid black;
    border-collapse: separate;
    padding-left: 1vw;
    padding-right: 1vw;
}

.destaque{
    font-weight: bold;
}

.destaque-table{
    color: red;
}


.ending-red{
    color: rgb(146, 36, 8);
    font-weight: bold;
}

.vocabulary-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10%;
    width: 100%;
    padding: 1vw;
}

.vocabulary-main-word{
    font-weight: bold;
    font-size: 2vw;
}

.exercise-img{
    width: 100%;
    margin-left: 10vw;
}

.exercise-img .vocabulary-img{
    margin-bottom: 10vw;
}


.center{
    display: flex;
    justify-content: center;
}

.reference{
    font-style: italic;
    font-weight: bold;
}

.text{
    background-color: beige;
    margin: 2%;
    padding: 2%;
    border: 1px solid rgb(100, 97, 97);
}

.text-title{
    font-weight: bold;
    text-align: center;
}

.text input{
    display: none;
}

.text select{
    display: none;
}

.explanation{
    color: red;
    display: none;
    
}


.text-img{
    width: 100%;
    height: 100%;
}

.explanation-for-teacher{
    color: rgb(28, 41, 143);
    margin-left: 2%;
    margin-bottom: 2%;
}

.textarea-teacher{
    width: 85vw;
}

.audio-icon:hover{
    background-color: rgb(247, 66, 66);
}

.child_answer{
    color: rgb(150, 1, 1);
}


 .option{
        font-weight: bold;
        text-decoration: underline;
    }

    .cotidiano .title{
        font-style: italic;
        font-weight: bold;
        text-align: center;

    }


    .card{
    margin-bottom: 20%;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.card-inner{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;

}

.card img{
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}


.mirror{
    transform: rotateY(180deg);
}

.mems{
    border: 5px solid green;
    padding: 2%;
    font-weight: bold;
    background-color: white;
    margin-bottom: 5%;
}

@media only screen and (min-width: 1024px) {
    .diamond{
        width: 4vw;
        height: 4vw;
        border-radius: 50%;
        border: 1px solid black;
        background-color: #fff;
    }
    
    .grammar-box{
        width:90%;
        padding: 2vw;
        font-size: 2vw;
        margin-bottom: 5vw;
    }

    .text{
        font-size: 2vw; 
    }


   .textarea-teacher{
      font-size: 2vw;
   }
    

    .explanation{
        font-size: 1.2vw;
    }

    .explanation-for-teacher{
        font-size: 1.5vw;
    }


    .exercise-body-4-columns{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 5vw;
        font-size: 2vw;
        
    }

    .exercise-body-2-columns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 80%;
        column-gap: 10%;
        font-size: 2vw;
    }

    .exercise-body-2-columns textarea{
       width: 80%;
       font-size: 1.5vw;
    }

    .exercise-body-4-columns{
        width: 90%;
    }

    .vocabulary-exercise{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 5%;
        width: 90%;
        left: 0;
    }

    .pencil{
        width: 5vw;
        height: 5vw;
    }

    .vocabulary-img{
        width: 15vw;
        height: 15vw;
    }

    .vocabulary-box select{
        font-size: 1.5vw;
        width: 10vw;
    }

    .vocabulary-selection-justify{
        font-size: 1.5vw;
    }

    .exercise-img .vocabulary-img{
        margin-bottom: 3vw;
    }

    .vocabulary-main-word{
        font-size: 1.3vw;
    }
    
    .letter-alphabet{
        font-size: 4vw;
    }


    .main-title{
        font-size: 6vw;
        margin-top: 14vw;
    }

    .exercise-title{
        font-size: 4vw;
    }

    .title{
        font-size: 4vw;
    }

    input{
        font-size: 1.5vw;
        width: 13vw;
    }

    textarea{
        font-size: 1.5vw;
    }

    .audio-icon{
        width: 2vw;
        height: 2vw;
        border: 1px solid black;
    }

    .exercise-audio{
        width: 2vw;
        height: 2vw;
        border: 1px solid black;
    }

    .grammar-vocabulary-audio{
        width: 2vw;
        height: 2vw;
        border: 1px solid black;
    }

    .audio-term-example{
        font-size: 1vw;
        padding-left: 2.5vw;
    }

    .audio-term{
        font-size: 1vw;
        padding-left: 2.5vw;
    }

    .term-example{
        font-size: 1vw;
    }

    .term{
        font-size: 1vw;
    }

    footer{
        font-size: 2vw;
    }

    .arrow{
        width: 8vw;
        height: 4vw;
    }

    .seta{
        width: 4vw;
        height: 4vw;
    }

    .info{
        width: 3.7vw;
        height: 3vw;
    }

    .child_answer{
       font-size: 1.8vw;
    }

    .option{
        font-size: 2vw;
        margin-top: 5%;
        margin-bottom: 2%;
    }

    .culture{
        width: 5%;
    }

    .mems{
        font-size: 2vw;
        font-weight: bold;
        display: grid;
        grid-template-columns: 60% 40%;
        width: 70%;
    }

    .mems .grammar-section-1{
        padding-right: 10%;
    }

    .text .tooltip-text{
        width: 14vw;
    }
}

@media only screen and (min-width: 489px) and (max-width: 1023px){
    footer{
        margin-top: 100%;
    }
    

    .textarea-teacher{
        font-size: 4vw;
       }

    .text{
        font-size: 4vw; 
    }

      textarea{
        font-size: 3.5vw;
        width: 100%;
    }

     .diamond{
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        border: 1px solid black;
        background-color: #fff;
    }


    .explanation{
        font-size: 2.5vw;
    }

    .grammar-box{
        width: 90%;
        box-shadow: 1.5vw 1.5vw 1.5vw;
        padding: 2vw;
        font-size: 4vw;
    } 

    .explanation-for-teacher{
        font-size: 3vw;
    }

    .item{
        margin-top: 6%;
    }

    .exercise-body-4-columns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 10vw;
        font-size: 4vw;
        margin-left: 2vw;
    }

    .exercise-body-2-columns{
        width: 80%;
        font-size: 4vw;
    }

    .exercise-body-2-columns textarea{
       width: 80%;
       font-size: 4vw;
    }

    .vocabulary-exercise{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 10%;
        width: 80%;
        left: 0;
    }

    .culture{
        width: 10%;
    }

    .vocabulary-box:hover{
        box-shadow: 2vw 2vw 2vw rgb(1, 0, 32);
     }

    .exercise-title{
        font-size: 6vw;
    }

    .vocabulary-img{
        width: 30vw;
        height: 30vw;
    }

    .vocabulary-box select{
        font-size: 4vw;
        width: 20vw;
    }

    .vocabulary-selection-justify{
        font-size: 3vw;
    }

    .vocabulary-main-word{
        font-size: 2.5vw;
    }

    .exercise-img{
        margin-left: 10vw;
    }

    .title{
        font-size: 6vw;
    }

    .letter-alphabet{
        font-size: 6vw;
    }

    .main-title{
        font-size: 10vw;
        margin-top: 14vw;
        margin-bottom: 5%;
    }

    input{
        /* width: 70%; */
        font-size: 3vw;
    }

    .audio-icon{
        width: 4vw;
        height: 4vw;
        border: 1px solid black;
    }

    .exercise-audio{
        width: 4vw;
        height: 4vw;
        border: 1px solid black;
    }

    .grammar-vocabulary-audio{
        width: 4vw;
        height: 4vw;
        border: 1px solid black;
    }


    .tooltip-text{
        width: 65vw;
        font-size: 4vw;
        padding: 5px 0; 
    }

    .tooltip-text-2{
        font-size: 4vw;
        width: 30vw;
        background-color: rgb(143, 250, 100);
        color: #131212;
        border: 1px solid #23232e;
        top: 50%;
        left: -130%; /* Ajuste conforme necessário */
        margin-left: -50px; /* Ajuste conforme necessário */
        transform: translateY(-50%);   
    }
   

    .audio-term-example{
        font-size: 2vw;
    }

    .audio-term{
        font-size: 2vw;
    }

    .term-example{
        font-size: 2vw;
    }

    .term{
        font-size: 2vw;
    }

    .audio-term-example{
        font-size: 2vw;
        padding-left: 5vw;
    }

    .audio-term{
        font-size: 2vw;
        padding-left: 5vw;
    }

    footer{
        font-size: 4vw;
    }

    .arrow{
        width: 11vw;
        height: 6vw;
    }

    .info{
        width: 5vw;
        height: 4vw;
    }

    .seta{
        width: 8vw;
        height: 8vw;
    }

    .text input{
        width: 25vw;
        font-size: 3vw;
    } 

    .text .tooltip-text{
        width: 23vw;
    }

    .vocabulary-box select{
        font-size: 3vw;
    }

    .vocabulary-box input{
        width: 100%;
    }

    .vocabulary-box{
        width: 90%;
    }

    .option{
        font-size: 4vw;
        margin-top: 5%;
        margin-bottom: 2%;
    }

    .mems{
        font-size: 4vw;
        font-weight: bold;
        margin: 2%;
    }

    .mems .grammar-section-2{
        padding-top: 5%;
        display: block;
        justify-content: center;
    }
}

    
@media only screen and (max-width: 488px) {
    footer{
        margin-top: 100%;
    }


    .textarea-teacher{
        font-size: 7vw;
       }

    .main-body{
        margin-top: 12vw;
        width: 100%;
    }

    .diamond{
        width: 16vw;
        height: 16vw;
        border-radius: 50%;
        border: 1px solid black;
        background-color: #fff;
    }

    .grammar-box{
        margin: 2%;
        padding: 2%;
        box-shadow: none;
        font-size: 6vw;
        margin-bottom: 15vw;
    } 

    .text{
        font-size: 6vw; 
    }

    textarea{
        width: 100%;
    }

    .explanation{
        font-size: 4vw;
    }

    .explanation-for-teacher{
        font-size: 5vw;
    }

    .culture{
        width: 10%;
    }

    .letter-alphabet{
        font-size: 9vw;
    }

   /* .vocabulary-box textarea{
        width: 100%;
   }

   .vocabulary-box{
        width: 100%;
        font-size: 3vw;
   } */

    .main-title{
        font-size: 15vw;
        margin-top: 15%;
        margin-bottom: 10%;
    }

    .exercise-title{
        font-size: 12vw;
    }

    .title{
        font-size: 6vw;
    }

    .exercise-body-4-columns{
        font-size: 6vw;
        padding-left: 2vw;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        justify-items: center;
    }

    .exercise-body-2-columns{
        width: 90%;
        font-size: 6vw;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        justify-items: center;
    }

    .exercise-body-2-columns textarea{
       width: 80%;
       font-size: 6vw;
    }

    .vocabulary-img{
        width: 60vw;
        height: 60vw;
    }

    .vocabulary-selection-justify{
        font-size: 6vw;
    }

    .vocabulary-box{
       width: 90%;
       margin-left: auto;
       margin-right: auto;
     }

    .vocabulary-box:hover{
        box-shadow: 5vw 5vw 5vw;
     }

    input{
        width: 70%;
        font-size: 5vw;
    }

    .vocabulary-box select{
        font-size: 5vw;
    }

    .vocabulary-box input{
        font-size: 6vw;
        width: 60vw;
    }


    .vocabulary-box textarea{
        font-size: 6vw;
        width: 60vw;
    }
    .vocabulary-main-word{
        font-size: 5vw;
    }

    .audio-icon{
        width: 7vw;
        height: 7vw;
        border: 1px solid black;
    }

    .exercise-audio{
        width: 7vw;
        height: 7vw;
        border: 1px solid black;
    }

    .grammar-vocabulary-audio{
        width: 7vw;
        height: 7vw;
        border: 1px solid black;
    }


    .tooltip-text{
        width: 80vw;
        font-size: 6vw;
        padding: 5px 0;     
    }

    .term-example{
        font-size: 3.5vw;
    }

    .term{
        font-size: 3.5vw;
    }

    .audio-term-example{
        font-size: 3.5vw;
        padding-left: 10vw;
    }

    .audio-term{
        font-size: 3.5vw;
        padding-left: 10vw;
    }

    footer{
        font-size: 4.5vw;
    }

    .arrow{
        width: 16vw;
        height: 8vw;
    }

    
    .info{
        width: 10vw;
        height: 8vw;
    }

    .text input{
        width: 45vw;
        font-size: 6;

    }

      .text .tooltip-text{
        width: 40vw;
    }

    .left{
        justify-items: left;
    }


    .option{
        font-size: 7vw;
        margin-top: 10%;
        margin-bottom: 4%;
    }

    .mems{
        font-size: 6vw;
        font-weight: bold;
        margin: 2%;
    }
    
    .mems .grammar-section-2{
        padding-top: 5%;
        display: block;
        justify-content: center;
    }

}