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

  .pages {
    align-items: right;
    font-size: 20px;
  }
  
  .pagesHeader {
    display: none;
  }

  .categoriesHeader {
    display: inline;
    font-size: 13px;
    font-weight: 700;
  }
  
  .categoryButton {
    width: 100%;
    min-width: 180px;
  }

  .pageButton {
    min-width: 180px;
    float: left;
  }


  .boardButton {
    width: 100%;
  }

  .categories {
    margin-top: 20px;
  }

  .languages {
    display: flex;
    flex-direction: column;
  }

  .language {
    margin-top: 10px;
  }

  .languageDropdown {
    margin-top: 10px;
  }

  .languageDropdownTitle {
    font-size: 13px;
    font-weight: 700;
  }

/* ----------------------------------------------
  Square, square letter and square number CSS
  Different sizes depending on the number of squares in the grid
 * ---------------------------------------------- */

  .square {
    height: 40px;
    width: 40px;
  }

  .square_letter {
    font-size: 32px;
    top: -8px;
    left: -1px;
  }

  .square_clueNo {
    position: relative;
    opacity: 0.9;
    font-size: 20px;
    text-align: left;
    left: 3px;
    top: -9px;
    height: 10px;
  }
  
 
  /* Dictionary page filter buttons */ 
  .dicfilterbutton  {
    width: 180px;
  }

  /* ----------------------------------------------
    Clues CSS
  * ---------------------------------------------- */

  .cluelistfordirection {
    min-width: 180px;
    font-size: 22px;
  }

  .cluesheaderline1 {
    width: 100%;
    border-color: paleVioletRed;
  }

  .cluesheaderline2 {
    width: 100%;
    border-color: lightGrey;
  }

  /* ----------------------------------------------
    End of - Clues CSS
  * ---------------------------------------------- */

  .feedbackTextArea  {
    height: 10em;
    width: 100%;
  }

}

