.row{
   font-weight: bold;
}

.vocabulary-box .audio-icon{
   visibility: visible;
}

.grammar-box-invitation a{
      text-decoration: none;
      color: white;
   }

.grammar-box-invitation button{
      background-color: red;
      width: auto;
      display: block;
      margin: auto;
      padding: auto;
   }

   .grammar-box-invitation button:hover{
      background-color: white;
      border: 2px solid red;
   }

    .grammar-box-invitation a:hover{
      color: red;
   }

   .grammar-box-invitation{
      background-color: rgb(235, 226, 231);
   }



@media only screen and (min-width: 1024px) {

   .text{
      font-size: 3vw;
   }

   .row{
      padding-bottom: 1vw;
   }

   .alphabet{
      width: 36%;
   }

   .letter-alphabet{
      margin-right: 6%;
   }

   .alpabet-instructions{
      font-size: 3vw;

   }
   
     .grammar-box-invitation{
      font-size: 2vw;
   }


}

@media only screen and (min-width: 489px) and (max-width: 1023px) {

   
     .row{
      padding-bottom: 1vw;
     }

     .audio-icon{
      width: 3vw;
      height: 3vw;
     }

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


   .alphabet{
      width: 50%;
   }

   .letter-alphabet{
      margin-right: 5%;
   }
   
    .grammar-box-invitation{
      font-size: 4vw;
   }

}

@media only screen and (max-width: 488px) {
     .audio-icon{
      width: 5vw;
      height: 5vw;
     }

     .row{
      padding-bottom: 2vw;
     }

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

      .alphabet{
         width: 75%;
      }

      .letter-alphabet{
         margin-right: 5%;
      }
      
       .grammar-box-invitation{
      font-size: 6vw;
   }
}