@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

body {
    font-family:  'Montserrat', sans-serif;
    padding: 20px;
    color: white;
    background-color: #051937;
  }
  
  p {
    font: 22pt sans-serif;
    margin: 20px 20px 0px 20px;
  }
  
  h1 {
    text-align: center; 
    font-size: 40px;
  }

  button{
    text-decoration: none;
    
  }

  .end-btn{
    font-size: 18px;
  }
  
  #main {
    margin: 0 auto;
    max-width: 80rem;
    text-align: center; 
  }
  @media only screen and (min-width: 600px) {
    #main {
      text-align: left;
    }
  }
  
  .modal-body{
    colour: black;
  }
  /*Styling for puzzle*/
  #puzzle {
    display: inline-block;
    border: 1px solid black;
    padding: 3vw;
  }
  
  #puzzle > div { /* rows */
    width: 100%;
    margin: 0 auto;
  }
  
  /* style for each square in the puzzle */
  .puzzleSquare {
    height: 7vw;
    width: 7vw;
    text-transform: uppercase;
    background-color: white;
    border: 0;
    font: 5vw sans-serif;
  }
  @media only screen and (min-width: 600px) {
    #puzzle {
      float: left;
      padding: 1rem;
    }
    .puzzleSquare {
      height: 3.5rem;
      width: 3.5rem;
      font: 2.5rem sans-serif;
    }
  }
  
  button::-moz-focus-inner {
    border: 0;
  }
  
  /* indicates when a square has been selected */
  #puzzle .selected {
    background-color: orange;
  }
  
  /* indicates that the square is part of a word that has been found */ 
  #puzzle .found {
    background-color: blue;
    color: white;
  }
  
  #puzzle .solved {
    background-color: purple;
    color: white;
  }
  
  /* indicates that all words have been found */
  #puzzle .complete {
    background-color: green;
  }
  
  /**
  * Styles for the word list
  */
  #words {
    display: inline-block;
    max-width: 30rem;
    padding: 1em;
    list-style-type: none;
    text-align: left;
  }
  @media only screen and (min-width: 600px) {
    #words {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
      column-gap: 20px;
    }
  }
  
  #words li {
    padding: 3px 0;
    font: 1em sans-serif;
  }
  
  /* indicates that the word has been found */
  .wordFound {
    text-decoration: line-through;
    color: gray;
  }
  
  /**
  * Styles for the controls
  */
  #controls {
    display: inline-block;
    max-width: 30rem;
    padding: 1em;
    border: none;
    text-align: left;
  }
  label {
    white-space: nowrap;
    margin-top: 1em;
  }
  input {
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 1em;
  }

  input[type="number"] {
    width: 2rem;
  }
  select {
    max-width: 10rem;
  }
  #create-grid, #solve {
    display: block;
    margin-top: 1rem;
  }
  #secret-word {
    text-transform: uppercase;
  }
  
  #result-message {
    font-size: 1.2em;
  }

  .modal-btn {
    background-color: #051937 ;
    border-color: white;
  }

  h5, .modal-body {
    color: #051937;
  }