body {
  width: 100%;
  height: 100vh;
  background-color: lightblue;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.instructions {
  background-color: rgba(0, 0, 0, .5);
  color: rgba(255, 255, 255, .9);
  font-size: 1.2em;
  width: 100%;
  padding: 10px 5px;
  display: none; 
  margin: 0 auto;
  min-height: 100%;
  
  position: absolute;
  left: 0;
  top: 0;  
  
  z-index: 1000;
}

#topLine {
  margin: 0;
}

.instructions h1 {
  margin: 0;
}

.instructions p {
  margin: 0;
}

.instructions h2 {
  margin: 0;
  color: red;
}

#winner {
  background-color: rgba(0, 0, 0, .1);
  color: rgba(255, 255, 255, .8);
  font-size: 2em;
  width: 100%;
  padding: 0;
  margin-top: 25%;

  display: none;
  
  position: absolute;
  left: 0;
  top: 0; 
}

#howto {
  font-size: 3em;
  width: 138%;
  padding: 0;
  margin-top: 8%;
  max-width: 790px;
  min-height: 750px;
  
  position: relative;
  left: 0;
  top: 0; 
}

#howtoplay {
  background-color: rgba(0, 0, 0, .8);
  color: rgba(255, 255, 255, .9);
  border: 5px solid white;
  padding: 8%;
  width: 80%;
  min-width: 230px;
  margin-bottom: 8%;
  position: relative;
}

#skip {
  background-color: rgba(0, 0, 0, .8);
  color: rgba(255, 255, 255, .9);
  border: 5px solid white;
  padding: 8%;
  width: 80%;
  min-width: 200px;
}

#table {
  width: 95%;  
  height: 100%;
  padding: 1% 0;
  margin: 0px auto;  
  text-align: center;
  box-shadow: 0px 0px 0px lightblue;
  background: linear-gradient(lightblue, lightblue);
}

#board {
   width: 50%;
   max-width: 330px;
   height: 92%;
   padding: 0;
   margin: 0 auto;
   border: 1px solid black;
   background-color: maroon;
   box-shadow: 10px 10px 5px #444;
}

#answer {
  margin: 5px 2% 5px 5%;
  width: 66%;
  height: 9%;
  border: 1px solid grey;
  box-shadow: 5px 1px 5px #444;
  background: linear-gradient(#c30, maroon);
  display: inline-block;
  float: left;
}

#button {
  margin: 5px 5% 0 0;
  width: 18%;
  height: 9%;
  border: 1px solid grey;
  box-shadow: 5px 1px 5px #444;
  background: linear-gradient(#c30, white);
  display: inline-block;
  float: right;
  visibility: hidden;
}

#button p {
  margin: 0;
  font-size: 1.6em;
}

#guessBoard {
  margin: 5px auto;
  width: 100%;
  height: 86%;
  background-color: ;
}

.guess {
  margin: 0px auto ;  
  padding: 0;
  width: 90%;
  height: 9.9%;
  border: 2px solid grey; 
  border-bottom: none;
  overflow: hidden;  
}

#bottom-guess {
  border-bottom: 2px solid grey;
}

.peg, .allow {
  margin:  0 1.1%;
  padding: 0;
  background-color: #c30;
  border-radius: 100%;
  border: 1px solid white;
  height: 91%;  
  width: 16%; 
  float: left;
  box-shadow:4px 4px 2px 8px #900 inset;
}

.allow:hover {
  border-color: black;
}

.grade {  
  height: 88%;
  width: 20%;
  margin: 1.1% 1.1% 1.1% 0;
  padding: 0;  
  float: right;
  overflow: hidden;
}

.pegGrade{
  margin: 0;
  padding: 0;
  background-color: #c30;
  width: 45%;
  height: 45%;
  border: 1px solid maroon;
  float: left;
  border-radius: 100%;
  box-shadow:2px 2px 1px 6px #900 inset;
}

#colors {
  margin: 0% auto;
  padding: 0;
  width: 100%;
  height: 68px;  
}

#red {}
#blue {}
#green {}
#yellow {}
#black {}
#white {}

.selected {
 width: 15.3%;
 height: 65%; 
 background-color: inherit;
 border-radius: 100%;
 border: 1px solid black;
 padding: 0;
 margin: 1px;
 float: left;
}

.selected:hover {
 border: 1px solid white; 
}

#redPeg {background-color: orange;}
#bluePeg {background-color: blue;}
#greenPeg {background-color: green;}
#yellowPeg {background-color: yellow;}
#blackPeg {background-color: black;}
#whitePeg {background-color: white;}

.inner {
  width: 75%;
  height: 75%;
  padding: 0;
  margin: 10%;
  border-radius: 100%;
  border: 1px solid white;
}

#takeThat {
  margin-top: 5px;
  width: 300px;
  height: 30px;
  color: white;
  font-size: 1.4em;
  text-shadow: 1px 1px grey;
  background-color: rgba(33, 33, 33, .2);
  display: inline-block;
  visibility: hidden;
}

#takeThat2 {
  margin: -5% 0% 0 0;
  width: 20%;
  height: 9%;
  color: white;
  font-size: 1.4em;
  text-shadow: 1px 1px grey;
  background-color: rgba(33, 33, 33, .2);
}

@media screen and (min-width: 300px) {
  #table {
    width: 95%;  
    height: 100%;
    padding-top: 1% 0;
    margin: 0px auto;  
    text-align: center;
    box-shadow: 10px 10px 5px #777;
    background: linear-gradient(yellow, purple);
  }
}

@media screen and (max-width: 570px) {
  .instructions h1 {
    font-size: 1.5em;
    margin: 0;
  }

  .instructions p {
    font-size: 1em;
    margin: 0;
  }
}



@media screen and (max-width: 440px) {
  .instructions h1 {
    font-size: 1.35em;
  }

  .instructions p {
    font-size: .83em;
  }
}