/*Import font from google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');

/* Change default margin, padding and border to 0 and none */
* {
  margin: 0;
  padding: 0;
  border: none;
}
  
/* Style body, headers and buttons */
body {
  font-weight: 500;
  color: #000;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  font-family: 'Teko', sans-serif;
}
  
.button-style {
  margin: 15px 15px 15px 0;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  background-color: white;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  user-select:none;
  -webkit-user-select: none;
  touch-action: manipulation;
  position: relative;
}
  
.button-style:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
  background-color: rgba(240, 46, 170, 0.2);
  box-shadow:rgba(255, 255, 255, 0.4) 0px 0px 0px 1px, rgba(255, 255, 255, 0.3) 0px 0px 0px 2px,rgba(255, 255, 255, 0.2) 0px 0px 0px 3px, rgba(255, 255, 255, 0.1) 0px 0px 0px 4px,  rgba(2255, 255, 255, 0.05) 0px 0px 0px 5px;
}

 /*Header*/
header {
  text-align: center;
  padding: 0 10px 10px 10px;
}
  
header li {
  display:inline-block;
  text-decoration: none;
  padding: 5px 10px 7px 10px;
}

/*Footer*/
footer {
  text-align: center;
}

footer li {
  display:inline-block;
  text-decoration: none;
  padding: 10px 20px 0 20px;
  font-size: 200%;
}

footer i {
  color: #000;
}

/*Container carrousel*/
#container {
  background-color: white;
  height: 490px;
  width: 95vw;
  max-width: 650px;
  margin: auto ;
  overflow: hidden;
  animation: shadow;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  border-radius: 15px;
}

@keyframes shadow {
  0%   {box-shadow:rgba(240, 46, 170, 0.2) 0px 0px 0px 6px, rgba(240, 46, 170, 0.1) 0px 0px 0px 12px,rgba(240, 46, 170, 0.05) 0px 0px 0px 18px;}
  12.5%   {box-shadow:rgba(240, 46, 170, 0.3) 0px 0px 0px 6px, rgba(240, 46, 170, 0.2) 0px 0px 0px 12px,rgba(240, 46, 170, 0.1) 0px 0px 0px 18px, rgba(240, 46, 170, 0.05) 0px 0px 0px 24px;}
  25%   {box-shadow:rgba(240, 46, 170, 0.4) 0px 0px 0px 6px, rgba(240, 46, 170, 0.3) 0px 0px 0px 12px,rgba(240, 46, 170, 0.2) 0px 0px 0px 18px, rgba(240, 46, 170, 0.1) 0px 0px 0px 24px,  rgba(240, 46, 170, 0.05) 0px 0px 0px 30px;}
  37.5%  {box-shadow:rgba(240, 46, 170, 0.5) 0px 0px 0px 6px, rgba(240, 46, 170, 0.4) 0px 0px 0px 12px,rgba(240, 46, 170, 0.3) 0px 0px 0px 18px, rgba(240, 46, 170, 0.2) 0px 0px 0px 24px,  rgba(240, 46, 170, 0.1) 0px 0px 0px 30px;}
  50%  {box-shadow:rgba(240, 46, 170, 0.6) 0px 0px 0px 6px, rgba(240, 46, 170, 0.5) 0px 0px 0px 12px,rgba(240, 46, 170, 0.4) 0px 0px 0px 18px, rgba(240, 46, 170, 0.3) 0px 0px 0px 24px,  rgba(240, 46, 170, 0.2) 0px 0px 0px 30px;}
  62.5%  {box-shadow:rgba(240, 46, 170, 0.5) 0px 0px 0px 6px, rgba(240, 46, 170, 0.4) 0px 0px 0px 12px,rgba(240, 46, 170, 0.3) 0px 0px 0px 18px, rgba(240, 46, 170, 0.2) 0px 0px 0px 24px,  rgba(240, 46, 170, 0.1) 0px 0px 0px 30px;}
  75% {box-shadow:rgba(240, 46, 170, 0.4) 0px 0px 0px 6px, rgba(240, 46, 170, 0.3) 0px 0px 0px 12px,rgba(240, 46, 170, 0.2) 0px 0px 0px 18px, rgba(240, 46, 170, 0.1) 0px 0px 0px 24px,  rgba(240, 46, 170, 0.05) 0px 0px 0px 30px;}
  87.5% {box-shadow:rgba(240, 46, 170, 0.3) 0px 0px 0px 6px, rgba(240, 46, 170, 0.2) 0px 0px 0px 12px,rgba(240, 46, 170, 0.1) 0px 0px 0px 18px, rgba(240, 46, 170, 0.05) 0px 0px 0px 24px;}
  100%   {box-shadow:rgba(240, 46, 170, 0.2) 0px 0px 0px 6px, rgba(240, 46, 170, 0.1) 0px 0px 0px 12px,rgba(240, 46, 170, 0.05) 0px 0px 0px 18px;}
}

/* Style the sections slides */
#slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior:smooth;   
}
  
#slides>section,
#slides>div {
  position: relative;
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 95vw;
  max-width: 650px;
  height: 490px;
  border-radius: 10px;
  background-color: rgba(240, 46, 170, 0.4);
}


/*Home section*/
#home-section {
  text-align: center;
}

#home-section > h2 {
  position:absolute;
  width: 40%;
  left:30%;
  top:20%;
  font-size: 60pt;
  animation:welcome-sign;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

@keyframes welcome-sign {
  0%{transform: translateX(-10px)}
  25%{transform: translateX(10px)}
  50%{transform: translateX(-10px)}
  75%{transform: translateX(10px)}
  100%{transform: translateX(-10px)}
}
#home-section > p {
  margin-top:250px;
  font-size: 16pt;
}

#home-section > div {
  margin-top:50px;
  font-size: 40pt;
}

/*Instruccions section */
#instructions-section {
  text-align: center;
}

#instructions-section h2 {
  position: absolute;
  top:20px;
  width:30%;
  left:35%;
}

#instructions-section p {
  width:68%;
  position: absolute;
  top:60px;
  left: 15%;
  padding: 5px;
  font-size: 14pt;
  border:#000 solid 2px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  background-color: rgba(255, 255, 255, 0.5);
}

table {
  width: 70%;
  position: absolute;
  left: 15%;
  padding: 5px;
  bottom:30px;
  font-size: 14pt;
  background-color: rgba(255, 255, 255, 0.5);
  border:#000 solid 2px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.user-style {
  color:#0FA300;
}

.enemy-style {
  color: #730041;
}


/* Game section*/
#game-section {
  text-align: center;
  font-size: 14pt;  
}

#enemy {
  border:#000 2px solid;
  width: 50%;
  position: absolute;
  left: 25%;
  top:20px;
  padding:5px;
  background-color: rgba(255, 255, 255, 0.5); 
}

#result-area {
  width: 50%;
  position: absolute;
  left: 26%;
  top:155px;
}

#result-text {
  font-size: 20pt;
}

#user-area {
  border:#000 2px solid;
  width: 50%;
  position: absolute;
  left: 25%;
  top:225px;
  padding:5px;
  background-color: rgba(255, 255, 255, 0.5); 
}

.animation-looser {
  animation:vibration;
  animation-duration: 1s;
}

@keyframes vibration {
  10%{transform: translateX(2px); box-shadow:rgba(110,4,26, 0.2) 0px 0px 0px 6px, rgba(110,4,26, 0.1) 0px 0px 0px 12px,rgba(110,4,26, 0.05) 0px 0px 0px 18px;}
  20%{transform: translateX(-2px); box-shadow:rgba(110,4,26, 0.3) 0px 0px 0px 6px, rgba(110,4,26, 0.2) 0px 0px 0px 12px,rgba(110,4,26, 0.1) 0px 0px 0px 18px, rgba(110,4,26, 0.05) 0px 0px 0px 24px;}
  30%{transform: translateX(2px); box-shadow:rgba(110,4,26, 0.4) 0px 0px 0px 6px, rgba(110,4,26, 0.3) 0px 0px 0px 12px,rgba(110,4,26, 0.2) 0px 0px 0px 18px, rgba(110,4,26, 0.1) 0px 0px 0px 24px,  rgba(110,4,26, 0.05) 0px 0px 0px 30px;}
  40%{transform: translateX(-2px); box-shadow:rgba(110,4,26, 0.5) 0px 0px 0px 6px, rgba(110,4,26, 0.4) 0px 0px 0px 12px,rgba(110,4,26, 0.3) 0px 0px 0px 18px, rgba(110,4,26, 0.2) 0px 0px 0px 24px,  rgba(110,4,26, 0.1) 0px 0px 0px 30px;}
  50%{transform: translateX(2px); box-shadow:rgba(110,4,26, 0.6) 0px 0px 0px 6px, rgba(110,4,26, 0.5) 0px 0px 0px 12px,rgba(110,4,26, 0.4) 0px 0px 0px 18px, rgba(110,4,26, 0.3) 0px 0px 0px 24px,  rgba(110,4,26, 0.2) 0px 0px 0px 30px;}
  60%{transform: translateX(-2px);box-shadow:rgba(110,4,26, 0.5) 0px 0px 0px 6px, rgba(110,4,26, 0.4) 0px 0px 0px 12px,rgba(110,4,26, 0.3) 0px 0px 0px 18px, rgba(110,4,26, 0.2) 0px 0px 0px 24px,  rgba(110,4,26, 0.1) 0px 0px 0px 30px;}
  70%{transform: translateX(2px);box-shadow:rgba(110,4,26, 0.4) 0px 0px 0px 6px, rgba(110,4,26, 0.3) 0px 0px 0px 12px,rgba(110,4,26, 0.2) 0px 0px 0px 18px, rgba(110,4,26, 0.1) 0px 0px 0px 24px,  rgba(110,4,26, 0.05) 0px 0px 0px 30px;}
  75%{transform: translateX(-2px);box-shadow:rgba(110,4,26, 0.3) 0px 0px 0px 6px, rgba(110,4,26, 0.2) 0px 0px 0px 12px,rgba(110,4,26, 0.1) 0px 0px 0px 18px, rgba(110,4,26, 0.05) 0px 0px 0px 24px;}
  80%{transform: translateX(2px);}
  85%{transform: translateX(-2px);}
  90%{transform: translateX(2px);}
  95%{transform: translateX(-2px);}
  100%{transform: translateX(0px);box-shadow:rgba(110,4,26, 0.2) 0px 0px 0px 6px, rgba(110,4,26, 0.1) 0px 0px 0px 12px,rgba(110,4,26, 0.05) 0px 0px 0px 18px;}
  }

#weapon-area {
  position: absolute;
  width:80%;
  left: 12%;
  top:350px;
}

/* Icons displaying weapon selection*/
.display-weapons {
  font-size: 200%;
  color:#730041;
}

#open-game-rules {
  background-color: #730041;
}

#open-game-rules strong {
 color: #fff;
}

/*Health bar  code:https://css-tricks.com/html5-progress-element/*/
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
  border:#000 2px solid;
}

progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left,rgba(240, 46, 170, 0.5), #0FA300);
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

/*Pop up rules*/
#rules-image {
  width: 65%;
  position: absolute;
  left: 17.5%;
}

#game-rules {
  visibility: hidden;
  position:absolute;
  top: 5%;
  left:10%;
  z-index: 1;
  border-radius: 15px;
  background-color: #555;
  color: #fff;
  text-align: center;
  height: 450px;
  width:80%;
}

#close-game-rules {
  width:40%;
  position: absolute;
  bottom: 10px;
  left: 30%;
}


/*Game outcome pop up*/
#game-result {
  visibility: hidden;
  position:absolute;
  top: 5%;
  left:5%;
  z-index: 1;
  border-radius: 15px;
  background-color: rgba(85, 85, 85, 1);
  color: #fff;
  text-align: center;
  height: 90%;
  width: 90%
}

#result-message {
  position: absolute;
  top:35%;
  width:90%;
  left:5%;
  text-align: center;
  font-size: 40pt;
}

#close-game-result {
  position: absolute;
  width:30%;
  left: 35%;
  bottom: 75px;
  height: 50px;
  font-size: 16pt;
}

.user-winner {
animation: winner 2s;
}

.enemy-winner {
  animation: looser 2s ;
}

@keyframes winner {
  0%   {font-size: 0pt;}
  20%  {background-color: #fff;}
  50%  {font-size: 50pt;}
}

@keyframes looser {
  10%{transform: translateX(100px);}
  20%{transform: translateX(-100px); color: red;}
  30%{transform: translateX(50px);}
  40%{transform: translateX(-50px);}
  50%{transform: translateX(25px);}
  60%{transform: translateX(-25px);}
  70%{transform: translateX(12px);}
  75%{transform: translateX(-12px);}
  80%{transform: translateX(6px);}
  85%{transform: translateX(-6px);}
  90%{transform: translateX(3px);}
  95%{transform: translateX(-3px);}
  100%{transform: translateX(0px);}
  }

.visibility-transition {
  animation: visibility-popup ;
  animation-duration: 2s;
}

@keyframes visibility-popup {
  0%{background-color: rgba(85, 85, 85, 0);}
  100%{background-color:rgba(85, 85, 85, 1);}
}

/*Feedback section*/
#feedback-section {
  font-size: 14pt;
  text-align: center;
}

.input-form {
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  background-color: rgba(255, 255, 255, 0.8);
  border:#000 3pt solid;
  padding: 10px 0 10px 0;
  width:50%;
}

#feedback-section h3 {
  position: absolute;
  width: 30%;
  left: 35%;
  top: 300px;
}

label {
  padding: 10px 0 10px 0;
  font-size: 17pt;
}

/*Media queries*/
@media screen and (max-width: 600px) {
  
.navigtion {
  font-size:12pt;
  margin: 5px 5px 5px 0;
  padding: 2px;
}


header,
header li {
  padding: 0 2px 5px 2px;
}

#instructions-section p,
table, 
.game-button,
#open-game-rules {
  font-size: 12pt;
}

#game-rules {
  left:0;
  width:100%;
}
}


@media screen and (max-width: 400px) {
/*Header*/
h1 {
  font-size: 18pt;
}

#home-section > h2 {
  font-size: 40pt;
}

/*Instructions area*/
#instructions-section p, table {
  width:90%;
  left:5%;
}
/*Game section*/
#enemy,#user-area {
  width: 70%;
  left: 15%;
}

#user-area {
  top:210px;
}

#weapon-area {
  width:100%;
  left:2%;
  top:320px;
}

#result-text {
  font-size: 15pt;
}

.display-weapons, #open-game-rule {
  font-size: 15pt;
}

#result-area {
  width: 80%;
  left: 10%;
  top: 140px;
}

#result-message {
  font-size: 30pt;
}

#game-rules {
  height:350px;
}
}