body{
    background-color: rgb(211, 243, 232);
}

.grammar-box {
    background-color: rgba(51, 192, 110, 0.603);
}

button{
    background-color: rgb(3, 78, 78);
}

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

.exercise-title{
    color:  rgb(2, 66, 21);
}

.main-title{
    color: rgb(3, 78, 78);
}

.title{
    color:  rgb(2, 66, 21);
}

.destaque{
    color: rgb(107, 67, 3);
}

.vocabulary-box{
    background-color: rgba(81, 180, 119, 0.5);
}

.vocabulary-box:hover{
    background-color: rgba(3, 173, 40, 0.5);
    box-shadow: rgb(0, 32, 7);
}

.reference{
    color: rgb(71, 66, 60);
}

.alphabet{
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    row-gap: 2vw;
    text-align: center;
}

.alphabet-row{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.alpabet-instructions{
    color: rgb(209, 0, 0);
    font-weight: bold;
    text-align: center;
}

@media only screen and (min-width: 1024px){
    .grammar-box {
        box-shadow: 1.5vw 1.5vw 1.5vw rgb(1, 66, 17);     
    }

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

    .text-words .grammar-section{
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .text-words{
        width: 90%;
        display: grid;
        grid-template-columns: 50% 50%;
    }
}


@media only screen and (min-width: 489px) and (max-width: 1023px){
  .alpabet-instructions{
    font-size: 200%;
  }

  .grammar-box {
        box-shadow: 1.5vw 1.5vw 1.5vw rgb(1, 66, 17);     
    }

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

    .text-words{
        width: 90%;
        display: grid;
        grid-template-columns: 50% 50%;
    }
}


@media only screen and (max-width: 490px){
      .grammar-box {
        border: 2px solid rgb(1, 66, 17);     
        box-shadow: none;    
    }
    
    .vocabulary-box:hover{
        box-shadow: 2vw 2vw 2vw;
    }

    .text-words{
        width: 90%;
        display: grid;
        grid-template-columns: 50% 50%;
    }
}