div, ul, li, header, body, img {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  font: inherit;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

body {
  background: #c6e86e;
}

.bingo {
  width: 470px;
  margin: 0 auto;
  padding-bottom: 20px;
}

img {
  width: 100%;
  border-radius: 20px;
}


/* Page Title */
.title {
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  color: #ffffff;
  margin: 20px 0;
  font-family: 'Gravitas One', cursive;
  text-shadow: 2px 2px #87b738;
}


/* Message Box */
.message-box {
  width: 400px;
  justify-content: center;
  display: flex;
  margin: 0 auto;
  margin-bottom: 12px;
  color: #dd6d45;
}



/* Board */
ul {
  display: flex;
  flex-wrap: wrap;
}

/* Board Items*/
li {
  list-style: none;
  padding: 5px;
  width: 80px;
  margin: 2px;
  cursor: pointer;
}

li:hover {
  width: 90px;
  padding: 0px;
}

li.noclick, li.token {
  width: 80px;
  padding: 5px;
  opacity: .5;
  cursor: default;
}



/* Start Modal */
.directions {
  color: #ffffff;
  text-align: center;
  margin: 10px;
  font-size: 27px;
}

.audio-reminder {
  text-align: center;
  color: white;
}

.start {
  padding: 10px;
  width: 50px;
  background: #f1af1c;
  color: white;
  cursor: pointer;
  text-align: center;
  border-radius: 7px;
  font-size: 18px;
  margin: 20px auto;
}

.start:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
}


/* Nav Buttons */
.nav {
  display: flex;
  justify-content: center;
  margin: 15px;
}

.nav div {
  margin: 0 10px;
}

.github {
  background-image: url(https://res.cloudinary.com/dhorsi7vf/image/upload/v1473952746/github-green_qisanj.png);
  width: 50px;
  height: 50px;
  background-size: cover;
  opacity: .5;
}

.github:hover {
  background-image: url(https://res.cloudinary.com/dhorsi7vf/image/upload/v1473949473/github-white_h6hqc1.png);
  opacity: .9;
}

.www {
  background-image: url(https://res.cloudinary.com/dhorsi7vf/image/upload/v1473954464/wwwGreen_xvnr16.png);
  width: 50px;
  height: 50px;
  background-size: cover;
  opacity: .5;
}

.www:hover {
  background-image: url(https://res.cloudinary.com/dhorsi7vf/image/upload/v1473954464/wwwWhite_npub75.png);
  opacity: .9;
}



/* Copyright */
.copyright {
  text-align: center;
  font-size: 12px;
  color: #86a92d;
  margin-top: 20px;
}



/* Button Box */
.button-box {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: 10px;
}

.button-box div:hover {
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}

.pass, .restart, .replay {
  padding: 10px 20px;
  border-radius: 10px;
  color: white;
  margin: 15px;
  cursor: pointer;
}

.replay {
  background: #86b538;
}

.pass {
  background: #086d94;
}

.restart {
  background: #d06640;
}



/* Congrats Modal */
.modal {
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4);
  z-index: 1000;
  left:0;
  top:0;
  flex-direction: column;
}

.congrats {
  font-size: 40px;
  font-weight: 500;
  color: white;
  text-align: center;
}