html {
  height: 100%;
}

body {
  background: url("../img/riskboard.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 100%;
}

h1 {
  font-family: 'Kumar One', cursive;
  font-size: 100px;
  text-align: center;
  line-height: 1.5;
}

h3 {
  text-align: center;
  font-size: 30px;
}

h4 {
  font-size: 30px;
}

li.defenders:hover {
  text-shadow: 3px 3px 10px #bfbfbf;
  cursor: pointer;
}

#activePlayer li.p1:hover {
  text-shadow: 3px 3px 10px #bfbfbf;
  cursor: pointer;
}

#activePlayer li.p2:hover {
  text-shadow: 3px 3px 10px #bfbfbf;
  cursor: pointer;
}

#activePlayer li.p3:hover {
  text-shadow: 3px 3px 10px #bfbfbf;
  cursor: pointer;
}

#activePlayer li.p4:hover {
  text-shadow: 3px 3px 10px #bfbfbf;
  cursor: pointer;
}

#activePlayer li.p5:hover {
  text-shadow: 3px 3px 10px #bfbfbf;
  cursor: pointer;
}

#dice button {
  background-color: darkred;
}

 #activePlayer, #otherPlayer {
  display: none;
  font-family: 'Baloo Paaji', cursive;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  padding: 15px;
  margin-left: 15px;
  box-shadow: 3px 3px 10px grey;
  box-sizing: border-box;
}
#otherPlayer li:hover {
  text-shadow: none;
  cursor: none;
}

#activePlayer p, #otherPlayer p {
  font-size: 20px;
}

#dice {
  text-align: center;
  margin-top: 20px;
}

#battle {
  padding: 30px;
  font-size: 50px;
  border-radius: 50%;
  display: none;
  box-sizing: border-box;
}

#winner {
  font-size: 25px;
}

#battle:active,
#battle:focus,
#battle.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

#teams {
  font-family: 'Baloo Paaji', cursive;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  padding: 15px;
  box-shadow: 3px 3px 10px grey;
  box-sizing: border-box;
  cursor: pointer;
}

#teams .p1 {
  display: none;
}

#teams .p2 {
  display: none;
}

#teams .p3 {
  display: none;
}

#teams .p4 {
  display: none;
}

#teams .p5 {
  display: none;
}

#teams-intro {
  font-family: 'Baloo Paaji', cursive;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  padding: 15px;
  box-shadow: 3px 3px 10px grey;
  box-sizing: border-box;
  cursor: pointer;
}

#teams h4:hover {
  text-shadow: 2px 2px 5px grey;
}

#letsPlay {
  margin-left: 35%;
}

#letsPlay:hover {
  background-color: white;
  color: black;
}

#finale {
  display: none;
  background-color: black;
}

#finale img {
  margin-left: 100px;
}

.container {
  display: none;
}

 .intro #teams-intro{
  text-align: left;
  width: 300px;
}

.intro label {
  font-family: 'Baloo Paaji', cursive;
  cursor: pointer;
  font-size: 30px;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
}

.box {
  margin-top:10px;
  padding: 10px;
  font-family: 'Baloo Paaji', cursive;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  box-shadow: 3px 3px 10px grey;
  box-sizing: border-box;
}

.box li:hover {
  text-shadow: 3px 3px 10px #bfbfbf;
  cursor: pointer;

}

.red {
  width: 70px;
  height: 70px;
  background-color: #b30000;
  margin-right: 20px;
  margin-top: 20px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-size: 45px;
  display: none;
  float: left;
}

.red:first-child {
  margin-left: 40px;
}

.black:first-child {
  margin-left: 40px;
}

.black {
  width: 70px;
  height: 70px;
  background-color: #333333;
  margin-right: 20px;
  margin-top: 20px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-size: 45px;
  display: none;
  float: left;
}

.p1 {
  color: goldenrod;
}

.p2 {
  color: darkgreen;
}

.p3 {
  color: darkblue;
}

.p4 {
  color: darkred;
}

.p5 {
  color: black;
}

.jumbotron {
  background-color: black;
  color: white;
}

/*Adding bootstrap container properties and media queries to intro*/
.intro {
  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px; }

.intro:before, .intro:after {
    content: " ";
    display: table; }
.intro:after {
    clear: both; }
@media (min-width: 768px) {
    .intro {
      width: 732px; } }
@media (min-width: 992px) {
    .intro {
      width: 952px; } }

@media (max-width: 990px){
  .intro #teams-intro{
   margin-left: 35%; } }

@media (max-width: 600px){
   .intro #teams-intro{
    margin-left: 20%; } }

@media (max-width: 400px){
    .intro #teams-intro{
     margin-left: 10%; } }