/* This is the styling for the game display */
.game-display {
    width: 90%;
    height: 50vh;
  }

/* Boxes within display */

.random-number-box {
    background-color: orange;
    border: 3px solid purple;
  }
  
  .win-box {
    background-color: #ffc0cb;
    border: 3px solid purple;
  }
  
  .score-box {
    background-color: teal;
    border: 3px solid purple;
  }
  
  .gem-box {
    background-color: #d3d3d3;
    border: 3px solid purple;
  }
  
  /* Styling for Gem Images */
  .gems {
    border: 5px solid purple;
    max-width: 100%;
    height: auto;
  }
  
  /* Title of game styling and number/score sizing */
  #title-wrapper {
    padding-top: 2em;
  }
  #random-number,
  #score {
    font-size: 8em;
  }
  
 /* Button styling */
  #directions-button,
  #play-again,
  #modal-button {
    padding: 1em;
    background: red;
    background: -webkit-linear-gradient(left, teal, blue, violet, purple, orange);
    background: -o-linear-gradient(right, teal, blue, violet, purple, orange);
    background: -moz-linear-gradient(right, teal, blue, violet, purple, orange);
    background: linear-gradient(to right, teal, blue, violet, purple, orange);
    margin: 1em;
  }
  
  .button-row {
    background-color: purple;
  }
  
  /* The gems that are collected styling */
  .blank-gem {
    max-width: 100%;
    height: auto;
  }

  .hide {
   display: none;
  }
  
 /* Media queries for better responsiveness */
  
  @media only screen and max-width 800px {
    #random-number,
    #score {
      font-size: 6em;
    }
  
    .score-box,
    .random-number-box {
      min-height: 8em;
    }
  }
  
  @media only screen and max-width 600px {
    #random-number,
    #score {
      font-size: 4em;
    }
  
    .game-display {
      width: 100%;
      height: 60vh;
    }
  }