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

.underlined{
    text-decoration: underline;
}

.instructions{
    background-color: rgb(216, 230, 140);
    padding: 2%;
    margin: 2%;
    border: 2px solid black;
}

button{
    width: 150px;
    height: 35px;
    background-color: rgb(3, 78, 78);
    color: white;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 6vw;
    /* margin-top: 2vw; */
}

button:hover{
    background-color: rgb(2, 158, 158);
}

.bottom-sound:hover{
    background-color: rgb(247, 211, 164);
}

.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%;
    color:  rgb(2, 66, 21);
    font-weight: bold;
}

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

.main-title{
    font-weight: bold;
    color: rgb(3, 84, 150);
    text-align: center;
}

.item{
    margin-top: 2%;
}

.title{
    color:  rgb(61, 67, 68);
    font-weight: bold;
    text-align: center;
}

.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%;
    position: absolute;
}

table{
    border: 2px solid black;
    background-color: white;
    color: black;
    border-collapse: collapse;
    margin-bottom: 2vw;
}

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{
    color: rgb(107, 67, 3);
    font-weight: bold;
}

.destaque-table{
    color: red;
}

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

.center{
    justify-items: center;
}

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

.underline{
    text-decoration: underline;
}
.color_acus{
    background-color: rgb(167, 226, 226);
}

.color_gen{
    background-color: rgb(157, 165, 197);
}

.sound:hover{
    background-color: grey;
}

.border-bottom{
    border-bottom: 4px solid black;
}

@media only screen and (min-width: 1024px) {
  
    .instructions{
        width:90%;
        margin: 2vw;
        font-size: 2vw;
        /* margin-bottom: 15vw; */
        justify-items: center;
    }
    .instructions_other{
        justify-items: left;

    }

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

    .title{
        font-size: 4vw;
    }

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

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

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

    
    .scroll{
        overflow-x: scroll;
        max-width: 800%;
    }

    .sound{
        width: 2vw;
        height: 2vw;
    }
}

@media only screen and (min-width: 489px) and (max-width: 1023px) {
    .culture{
        width: 6vw;
        height: 6vw;
    }

    .text{
        font-size: 4vw; 
    }

     .main-body{
        width: 100%;
        height: auto;
    }

    .instructions{
        width:90%;
        margin: 4vw;
        font-size: 4vw;
        margin-bottom: 2vw;
        justify-items: center;
    }

    .instructions_other{
        justify-items: left;
    }

    .item{
        margin-top: 6%;
    }

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

    footer{
        font-size: 4vw;
    }

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

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

    table{
        border: 2px solid black;
        background-color: white;
        color: black;
        border-collapse: collapse;
        margin-bottom: 4vw;
    }

    .scroll{
        overflow-x: scroll;
        max-width: 10000%;
        min-height: 50%;
      }

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

}
    
@media only screen and (max-width: 488px) {
   
    .main-body{
        margin-top: 12vw;
        width: 100%;
        height: auto;
    }

    .instructions{
        width:90%;
        margin: 2vw;
        font-size: 6vw;
        margin-bottom: 5vw;
        justify-items: center;
    }

    .instructions_other{
        justify-items: left;
    }

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

    .title{
        font-size: 6vw;
    }

    footer{
        font-size: 4.5vw;
    }

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

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

    table{
        border: 2px solid black;
        background-color: white;
        color: black;
        border-collapse: collapse;
        margin-bottom: 6vw;
    }

    /* .scroll{
        overflow-x: scroll;
        max-width: 3000%;
      } */

    .scroll{
        overflow-x: scroll;
        min-height: auto;
    }

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

}