@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
h3{
font-family: 'Press Start 2P', cursive;
color:white;
}

.header{
  position:relative;
}

.speaker{
  background-image: url(assets/images/speaker2.png);
  background-size:contain;
  position:absolute;
  top:50px;
  width: 100px;;
  height:80px;
  right:100px;

  opacity:50%;
}
.speaker2{
   background-image: url(assets/images/speaker1.png);
  background-size:contain;
  position:absolute;
  top:50px;
  width: 100px;;
  height:80px;
  right:100px;
  opacity:100%;
}

#accuracy{
  color:white;
}

.perfect{
  text-shadow:2px 2px red;
  font-weight:1000;
  font-size:1.25rem;
}
.container{
  width:90%;
  max-width:1200px;
  margin:0 0 0 8%;
  position:relative;
}
.row{
  width:100%;
  display:flex;
  justify-content: center;
  margin-bottom:.5rem;
}
.row2{
  width:90%;
  display:flex;
  justify-content: center;
  margin-bottom:.5rem;
  padding: 0% 3% 3% 5%;
}
.col-1{
  width:8%;
}
.col-2{
  width:16%;
}
.col-3{
  width:24%;
}
.col-4{
  width:32%;
}
.col-5{
  width:40%;
}
.col-6{
  width:48%;
}
.col-7{
  width:56%;
}
.col-8{
  width:64%;
}
.col-9{
  width:72%;
}
.col-10{
  width:80%;
}
.col-11{
  width:88%;
}
.col-12{
  width:96%;
}
header{
  width:100%;
  text-align:center;
}
#logo{
  width:35%;
}
aside{
  align-items:center;

}
.title{
  font-size:2.5rem;
}
main{
  justify-content:center;
  align-items:center;
}
body{
  background-image:url("assets/images/orangeBackground.png");
  background-size:contain;
  position:relative;
}
#allCards{
  display:flex;
  justify-content:space-evenly;
  flex-wrap:wrap;
}
.statsBoxes{
  background-image:url(assets/images/statsBoxBackground.png);
  background-size: cover;
  width:200px;
  height:100px;
  display:flex;
  text-align:center;
  margin-bottom:3px;
}
.cardsRow{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
}
.card{
  height:200px;
  flex-basis:200px;
  margin-bottom:5px;
  margin-right:5px;
  position:relative;
}
h3{
  font-size:18px;
  margin:auto;
}
.footerContent{
  color:white;
  font-family: 'Press Start 2P', cursive;
  margin:30px 15px 15px;
  font-size:12px
}
.card-front, .card-back{
  height:100%;
  width:100%;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  position:absolute;
}
.card-front{
  background-color:rgba(245,263,141,.5);
}
.cactusPrimeContainer{
  width:200px;
  height:200px;
  position:relative;
  margin-top:0px;
}
.cactusPrime{
  background-image: url(assets/images/cactusIdle.gif);
  height:100%;
  width:100%;
  background-size:cover;
  background-position:center;
}
.cactusPanic{
  background-image: url(assets/images/cactusPanic.gif);
  height:100%;
  width:100%;
  background-size:cover;
  background-position:center;
}

.cactusHurt{
  background-image: url(assets/images/cactusHurt.png);
  height:100%;
  width:100%;
  background-size:cover;
  background-position:center;
  animation: hurt 1.5s;
  animation-iteration-count: infinte;
}
@keyframes hurt{
  0%   {transform:translate(0px,0px);}
  10%  {transform:translate(-10px,-10px);}
  15%  {transform:translate(-10px,-10px);}
  16%  {transform:translate(-15px,0px);}
  20%  {transform:translate(-15px,0px);}
  25%  {transform:translate(-20px,-5px);}
  30%  {transform:translate(-20px,-5px);}
  435%  {transform:translate(-22px,0px);}
  40%  {transform:translate(-22px,0px);}
  75%  {transform:translate(-22px,0px);}
  100% {transform:translate(-22px,0px);}
}
.card-back {
  background-image: url(assets/images/cardBack.png);
  background-color:#FFC217;
  background-size:cover;
  border:10px solid darkorange;
  border-style:inset;
  width:90%;
  height:90%;
}
.card-back:hover{
  background-image:none;
  background-color:#C59201;
  background-size:contain;
  border:10px solid orange;
  border-style:inset;
  width:90%;
  height:90%;
}

.cactusSway {
  background-image: url(assets/images/cactusSway.gif);
  background-size:contain;
  border:10px solid orange;
  border-style:inset;
  width:90%;
  height:90%;
}
.cactusDab {
  background-image: url(assets/images/cactusDab.gif);
  background-size:contain;
  border:10px solid orange;
  border-style:inset;
  width:90%;
  height:90%;
}
.cactusDisco {
  background-image: url(assets/images/cactusDisco.gif);
  background-size:contain;
  border:10px solid orange;
  border-style:inset;
  width:90%;
  height:90%;
}
#gameCards{
  margin-left:5%;
}
.cactusJiggle {
  background-image: url(assets/images/cactusJiggle.gif);
  background-size:contain;
  border:10px solid orange;
  border-style:inset;
  width:90%;
  height:90%;
}
.cactusHop {
  background-image: url(assets/images/cactusHop.gif);
  background-size:contain;
  border:10px solid orange;
  border-style:inset;
  width:90%;
  height:90%;
}
.cactusFloss {
  background-image: url(assets/images/cactusFloss.gif);
  background-size:contain;
  border:10px solid orange;
  border-style:inset;
  width:90%;
  height:90%;
}
.hidden{
  display:none;
}
#congratsModal{
  background-color:rgba(0,0,0,.5);
  width:100%;
  height:100%;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align:center;
}
#congratsModal > img{
  width:35%;
}
.congratsHeader{
  font-family: 'Press Start 2P', cursive;
  color:white;
  font-size:4rem;
  text-shadow:5px 5px crimson;
}
.congratsParagraph{
  color:white;
}
#perfectScore{
  background-color:rgba(0,0,0,.5);
  width:100%;
  height:100%;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align:center;
  z-index:20;
}
#gameOverModal{
  background-color:rgba(0,0,0,.5);
  width:100%;
  height:100%;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align:center;
}
.gameOverScreen{
  font-family:'Press Start 2P', cursive;
  background-color:orange;
  border:10px solid orange;
  border-style:inset;
  top:50%;
  left:42%;
  width:50%;
  transform: translate(-50%,-50%);
  text-align:center;
  padding:35px;
}
.perfectScoreScreen{
  font-family:'Press Start 2P', cursive;
  background-color:orange;
  border:10px solid orange;
  border-style:inset;
  top:50%;
  left:42%;
  width:75%;
  transform: translate(-50%,-50%);
  text-align:center;
  padding:35px;
}
.gameOverHeader{
  color:white;
  text-shadow:5px 5px red;
  font-size:4rem;
}
.gameOver{
  color:white;
  font-size:1rem;
}
#resetButton{
  font-family:'Press Start 2P', cursive;
  font-size:1rem;
  padding:15px 30px;
  border:10px solid red;
  border-style:inset;
  color:white;
  background-color:red;
  margin-top:25px
}
#resetButton:hover{
  border:10px solid red;
  border-style:inset;
  background-color:darkred;
}
#tryAgain{
  font-family:'Press Start 2P', cursive;
  font-size:1rem;
  padding:15px 30px;
  border:10px solid red;
  border-style:inset;
  color:white;
  background-color:red;
  margin-top:25px
}
#tryAgain:hover{
  font-family:'Press Start 2P', cursive;
  font-size:1rem;
  padding:15px 30px;
  border:10px solid red;
  border-style:inset;
  background-color:darkred;
}
#playAgain2{
  font-family:'Press Start 2P', cursive;
  font-size:1rem;
  padding:15px 30px;
  border:10px solid red;
  border-style:inset;
  color:white;
  background-color:red;
  margin-top:25px
}
#playAgain2:hover{
  font-family:'Press Start 2P', cursive;
  font-size:1rem;
  padding:15px 30px;
  border:10px solid red;
  border-style:inset;
  background-color:darkred;
}
.gameOverScreen > img{
width:35%;
}
.perfectScoreCactus{
  width:50%;
  animation: dance 2.5s;
  animation-iteration-count: infinite;
}
@keyframes dance{
  0%{transform:translate(0px,0px)}
  25%{transform:translate(-200px,0px)}
  75%{transform:translate(200px,0px)}
  100%{transform:translate(0,0px)}
}