html {
  background-image: url(blueBG.png);
  background-repeat: repeat-x;
}

img {
  max-width: 100%;
  min-width: 50%
}

#mainDiv {

  width: 100%;
margin:0 auto;



}

#flexContainer{

  display: flex;

  margin:0 auto;
  width:600px;
}

#result{
  margin:0 auto;
  color: white;
  background-image: url("../img/scoreBoxBG.png");
  background-repeat: no-repeat;
  background-position: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 30px;
  text-align: center;
  width: 650px;


}

#rules {
  margin:0 auto;
  font-family: 'Permanent Marker', cursive;
  margin-bottom: 15px;
  width: 450px;
  border-style: solid;
  border-color: silver;
  padding: 10px;
}


 p {
   color: white;
   font-family: sans-serif;


 }

 h2 {
   color: white;
   font-family: 'Permanent Marker', cursive;
   text-align: inherit;
 }

 #gameHomeScreen{
   padding-top: 35px;
   margin:0 auto;
   width:700px;

 }

#gameTitle {
  padding-top: 35px;
  margin:0 auto;
  width:500px;

}

#topDivider {

  margin:0 auto;
  width:700px;

}

#dividerPick {
padding-top: 20px;
  margin:0 auto;
  width:500px;

}

button {
  background-color: transparent;
  margin:0 auto;
  border-style: hidden;


}
button:hover {

   transition-duration: 1s;
   transform: scale(1.1);

}
button:active {

   transform: scale(.9);

}

.buttons {
  display: flex;
	width: 500px;
	height: 200px;
  margin:0 auto;

}


#scoreWrapper{
  display: flex;
  font-family: 'Permanent Marker';
  font-size: 25px;
  width: 600px;

  margin:0 auto;


align-content:flex-start;

}


#winsPlayer {


    color:white;
    margin:0 auto;




}


#winsCPU {


    color:white;
    margin:0 auto;



}


.surf{

  background-image: url("../img/surf.png");
  background-size: 150px;
  background-position: center center;
  background-repeat: no-repeat;
}

.fire{

  background-image: url("../img/fire.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
}

.wood{

  background-image: url("../img/wood.png");
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
}

.flexContainer{
display: flex;
flex-direction: row;
justify-content:space-around;


}

.scoreBox {

  width:60%;
  padding-left: 60px;
  padding-top: 50px;
  align-self: center;
}


#scoreBox {

  color:white
  padding-top: 50px;
  align-self: center;
}


.scoreBox2 {


  padding-left: 60px;
  padding-top: 50px;
  align-self: center;
}

.play{

  margin:0 auto;
  width:350px;
}


.back{
  margin:0 auto;
  width:250px;

}




.playButton {
  display: flex;
  flex-direction: row;
  justify-content:space-around;
}

.status {
  width:75px;
  padding-left: 80px;
  padding-top: 220px;
  align-self: center;
}

#status {
  width:75px;
  padding-left: 80px;
  padding-top: 220px;
  align-self: center;
}

@keyframes fadeOutAnimation {

  100% {opacity: 0;}
  0% {opacity: 1;}


}

#playerBox {



  width: 300px;
  height:400px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(playerBox.png);
  background-size:contain;


  }

  #playerBox img{

    animation: fadeOutAnimation ease 2.5s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
   max-width: 200px;
   margin-top: 140px;
   margin-left: 50px;

  }

  #cpuBox img{
    animation: fadeOutAnimation ease 2.5s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
   max-width: 200px;
   margin-top: 140px;
   margin-left: 50px;

  }

#homeNav {
  margin:0 auto;
  width:250px;

}



#cpuBox {

  width: 300px;
  height:400px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(cpuBox.png);
  background-size:contain;
}