@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* For smart phones */
@media screen and (max-width: 600px) {
  .doNotShowInMobile {
    display: none !important;
  }
  .dropdown {
    padding: 0;
    margin: 0;
  }
  /* ------- */
  .navbar {
    flex-direction: column;
    position: relative;
  }

  .menu {
    display: none;
    flex-direction: column;
    background-color: #333;
    width: 100%;
  }

  .menu.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    padding: 0;
    margin: 0;
  }

  .dropdown-content {
    position: static;
    display: none;
    background-color: #222;
  }

  .dropdown.active .dropdown-content {
    display: flex;
    flex-direction: column;
    /* padding: 0px; */
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: rgb(189, 182, 182);
  }

  ol {
    padding-right: 0.5rem;
  }

  /* DROP DOWN BUTTON*/
  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
  }

  .navbar {
    overflow: hidden;
    background-color: #333;
  }

  .navbar a {
    float: left;
    font-size: 12px;
    /*16px*/
    color: rgb(50, 230, 14);
    /*white*/
    text-align: center;
    /* padding: 4px 6px; */
    text-decoration: none;
  }

  /*COLUMS AND ROWS*/
  .row::after {
    display: grid;
    grid-template-areas:
      "top"
      "middle"
      "bottom";
    /* content: "";
      display: table;
      clear: both; */
  }
  /* Set additional styling options for the columns */
  .column {
    /* float: left; */
    width: 100%;
    margin: 0.1rem;
    padding: 0.1rem;
  }

  /* Set width length for the left, right and middle columns */
  .left {
    /* width: 0%; */
    grid-area: top;
  }

  .middle {
    /* width: 60%; */
    grid-area: middle;
    background-color: lightblue;
  }

  .right {
    /* width: 0%; */
    grid-area: bottom;
  }

  /* MineSweeper */
  #digOrFlag {
    display: inline-block;
    padding: 0rem 1rem 0rem 1rem;
    color: black;
    background-color: lightsalmon;
    font-size: large;
  }

  /* google it*/
  .g_it:hover {
    color: red;
    text-decoration: none;
    font-weight: bolder;
  }
}