/* Styles for the Crystal Collector Game */

body { /* Visual */
  /* background-image: url("robotics.jpg"); */
  background-color: blueviolet;
}

h1 {
  font-family: 'Gill Sans', sans-serif;
  font-size: 40px;
  color: white;
  background: #652793;

  /* Typography */
  text-align: center;
  /* padding: 5px; */
}

#game_instructions {
  font-family: 'Gill Sans','Arial Narrow Bold', sans-serif;
  font-size: 14px;
  border-radius: 40px;
  padding: 35px;
  background: #652793;
  color: white;
  padding: 10px;
  border: 3px;
  border-color: white;
  border-style: ridge;
}


#wrapper {
  /* Box-model */
  width: 750px;

  /* Positioning */
  margin: 30px auto 0;
}

#numberMatchBox {
  float: left;
  margin-top: 25px;
  width: 250px;
  color: rebeccapurple;
  background: white;
  border-radius: 20px;
  border-color: rebeccapurple;
  border-style: ridge;
}

#number_to_match_text {
    float: left;
    width: 170px;
    border-radius: 20px;
    /* margin-top: 10px; */
    padding: 4px;
    padding-left: 25px;
    font-family: sans-serif;
    color: rebeccapurple;
    background: white;
}

#demo {
    float: left;
    width: 40px;
    margin-top: 21px;
    /* margin-left: 10px; */
    padding: 4px;
    padding-left: 0px;
    font-family: sans-serif;
    color: rebeccapurple;
    background: white;
}

#totalScoreBox {
    float: left;
    margin-top: 25px;
    margin-left: 60px;
    width: 250x;
    border-radius: 20px;
    border-color: rebeccapurple;
    border-style: ridge;
    color: rebeccapurple;
    background: white;
}

#total_score_text {
    float: left;
    border-radius: 20px;
    width: 150px;
    /* margin-top: 21px; */
    margin-left: 10px;
    font-family: sans-serif;
    color: rebeccapurple;
    background: white;
    padding: 4px;
    padding-left: 10px;
}

#total_score_number {
  float: left;
  border-radius: 10px;
  width: 40px;
  margin-top: 20px;
 /* margin-left: 5px;*/
  padding: 4px;
  /*padding-left: 10px; */
  font-family: sans-serif;
  color: rebeccapurple;
  background: white;
}

#game_result_box { 
  height: 30px;
  float: left;
  width: 700px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  font-family: sans-serif;
  padding: 3px;
  color: white;
}

button {
  float: left;
  width: 100px;
  margin-top: 35px;
  margin-left: 70px;
  color: rebeccapurple;
  background-color: white;

  /* Box-model */
  height: 50px;
}

#four_gemstones {
  float: left;
}


#topaz {
  float: left;
  margin-right: 10px;
}

#ruby {
  float: left;
  margin-right: 10px;
}

#amethyst {
    float: left;
    margin-right: 10px;
  }

#emerald {
  float: left;
}

#winsBox {
  float: left;
  margin-top: 10px;
  border-radius: 10px;
  height: 50px;
  width: 150px;
  background: white;
  border-color: rebeccapurple;
  border-style: ridge;
}

#wins_text {
  float: left;
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  height: 30px;
  width: 50px;
  Padding: 4px;
  padding-left: 4px;
  font-family: sans-serif;
  color: rebeccapurple;
  background: white;
}

#wins_number {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  border-radius: 10px;
  font-family: sans-serif;
  font-size: 20px;
  color: rebeccapurple;
}

#lossesBox {
  float: left;
  margin-top: 10px;
  margin-left: 35px;
  border-radius: 10px;
  height: 50px;
  width: 150px;
  background: white;
  border-color: rebeccapurple;
  border-style: ridge;
}

#losses_text {
  float: left;
  border-radius: 10px;
  height: 30px;
  width: 60px;
  padding: 4px;
  margin-top: 10px;
  margin-left: 10px;
  font-family: sans-serif;
  font-size: 20px;
  color: rebeccapurple;
  background: white;
  }

  #losses_number {
    float: left;
    width: 30px;
    margin-top: 11px;
    margin-left: 10px;
    padding: 4px;
    padding-left: 10px;
    font-family: sans-serif;
    font-size: 20px;
    color: rebeccapurple;
    background: white;
  }