@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarpanch&display=swap');

:root {
  --navy:#09183C;
  --white:#F2F4F8;
  --purple:#87186E;
  --magenta:#DC07A2;
  --aqua:#68E2A3;
  --yellow:#EEFC05;
  --head:'Orbitron', sans-serif;
  --font:'Sarpanch', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0 auto;
  color: white;
  width: 100%; 
  height: 100%;
}

/* ------ FOOTER & NAVIGATION ------ */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10%; 
  margin: 0 auto; 
  position: fixed;
  left: 0;
  bottom: 0;
}

/* FOOTER TEXT */
.footer-text {
  padding-right: 20px;
  order: 2;
  font-family: var(--head);
  text-transform: uppercase;
  font-size: 1em;
  color: var(--purple); 
  text-shadow: 1px 1px 10px rgba(242, 244, 248, 0.4);
}

/* FOOTER LINK DISPLAY */
.footer-links {
  display: inline-block;
  padding: 0px;
  padding-right: 20px;
}

/* FOOTER LINK STYLYING */
.footer-links a {
  padding: 20px;
  font-size: 30px;
  order: 1;
  cursor: pointer;
  text-decoration: none;
}

.footer-links i {
  padding: 20px;
  font-size: 30px;
  order: 1;
  cursor: pointer;
  text-decoration: none;
}

/* FONT AWESOME ICONS */
.fa {
  text-decoration: none;
}

.fa-volume-off {
  color: var(--yellow); 
}

.fa-volume-off:hover {
  color: var(--purple);
  font-size: 35px;
  text-shadow: 0 0 15px rgba(242, 244, 248, 0.8); 
  -webkit-animation-name: increase;
  animation-name: increase;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.fa-volume-up {
  color: var(--yellow); 
}

.fa-volume-up:hover {
  color: var(--purple);
  font-size: 35px;
  text-shadow: 0 0 15px rgba(242, 244, 248, 0.8); 
  -webkit-animation-name: increase;
  animation-name: increase;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.fa-home {
  color: var(--magenta);
}

.fa-home:hover {
  color: var(--white);
  font-size: 35px;
  text-shadow: 0 0 3px rgba(238, 252, 5, 0.8); 
  -webkit-animation-name: increase;
  animation-name: increase;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.fa-question {
  color: var(--navy);
  text-shadow: 0 0 3px rgba(238, 252, 5, 1);
}

.fa-question:hover {
  color: var(--aqua);
  font-size: 35px;
  text-shadow: 0 0 15px rgba(242, 244, 248, 0.8); 
  -webkit-animation-name: increase;
  animation-name: increase;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.fa-linkedin-square {
  color: var(--white);
}

.fa-linkedin-square:hover {
  color: var(--magenta);
  font-size: 35px;
  text-shadow: 0 0 15px rgba(242, 244, 248, 0.8); 
  -webkit-animation-name: increase;
  animation-name: increase;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.fa-github {
  color: var(--purple);
}

.fa-github:hover {
  color: var(--yellow);
  font-size: 35px;
  text-shadow: 0 0 15px rgba(242, 244, 248, 0.8); 
  -webkit-animation-name: increase;
  animation-name: increase;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.fa-rocket {
  color: var(--aqua);
}

.fa-crosshairs {
  color: #A01306;
}

.fa-heartbeat {
  color: #FC008C;
}

/* END OF GAME ICON POSITION */
.home-icon {
  grid-area: home-icon;
  align-items: center;
  text-align: center;
}

.fa-refresh {
  font-size: 40px;
  color: var(--aqua);
  cursor: pointer;
}

.fa-refresh:hover {
  color: var(--magenta);
  font-size: 50px;
  text-shadow: 0 0 15px rgba(238, 252, 5, 0.8);
  animation: rotate 1s, increase 1s; 
  -webkit-animation: rotate 1s, increase 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* ------ MAIN GAME CONTAINER ------ */
#game-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  width:100%;
  max-width: 90rem;
  padding: 5% 5%;
  margin: 0 auto;
  grid-gap: 10px;
  grid-template-areas:
  "image image image stats"
  "image image image ."
  "text-container text-container button-box button-box";
}

#game-container > * {
  border-radius: 3px;
  padding: 15px;
}

/* IMAGE CONTAINER */
main {
  grid-area: image;
  background-color: var(--navy);
  border: 3px solid var(--aqua);
  box-shadow:inset 0 0 .5rem 0 var(--aqua),0 0 1rem 0 var(--aqua);
}

#images {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* TEXT CONTAINER */
#text-container {
  grid-area: text-container;
  background-color: var(--navy);
  border: 3px solid var(--magenta);
  box-shadow:inset 0 0 .5rem 0 var(--magenta),0 0 1rem 0 var(--magenta);
}

/* TEXT STYLING */
#text {
  font-size: 1em;
  color: var(--white);
  font-family: var(--font);
}

/* BUTTON OPTIONS */
#button-box {
  grid-area: button-box;
  background-color: var(--aqua);
  border: 3px solid var(--purple);
  box-shadow:inset 0 0 .5rem 0 var(--purple),0 0 1rem 0 var(--purple);
}

/* BUTTON STYLING */
.nested {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.nested .btn {
  padding: 20px;
  margin: 0;
}

.btn {
  background-color: var(--white);
  box-shadow:inset 0 0 .5rem 0 var(--aqua),0 0 1rem 0 var(--aqua);
  color: var(--navy);
  font-family: var(--font);
  font-weight: bold;
  
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  transition: background-color 1s ease;
}

.btn:hover, .btn:focus, .btn:active {
  color: var(--yellow);
  background-color: var(--magenta);
  box-shadow: 0 0 10px rgba(208, 7, 162, 0.9);
}

aside {
  grid-area: stats;
  background-color: var(--yellow);
  border: 3px solid var(--white);
  box-shadow:inset 0 0 .5rem 0 var(--white),0 0 1rem 0 var(--white);
}

/* STATS CONTAINER */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);;
  grid-gap: 10px;
  padding: 5px!important;
  justify-self: start;
  align-items: start;
}

.stats div {
  align-items: center;
  text-align: center;
}

.ammo-bar {
  background: #A01306;
  color: #A01306;
}

.fuel-bar {
  background: var(--aqua);
  color: var(--aqua);
}

.health-bar {
  background: #FC008C;
  color: #FC008C;
}

.empty-bars {
  background: #DBDCDF;
  color: #DBDCDF;
}

/* ------ ONLOAD WELCOME ------ */
/* BACKGROUND COLOUR (BODY FADE) */
#modal-welcome {
  background-color: var(--navy);
}

/* WELCOME CONTAINER */
#welcome-container {
  margin: 0 auto;
  padding: 5px;
  background-color: var(--navy);
  border: 2px solid var(--white);
  box-shadow:inset 0 0 .5rem 0 var(--white),0 0 1rem 0 var(--white);
}

/* WELCOME BODY */
#welcome-body {
  margin: 0 auto;
  padding: 25px 25px;
  background-color: var(--white);
  border: 2px solid var(--aqua);
  box-shadow:inset 0 0 .5rem 0 var(--aqua),0 0 1rem 0 var(--aqua);
}

/* WELCOME HEADER */
#welcome-header {
  font-family: var(--head);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: 0.3em;
  color: var(--purple);
}

/* WELCOME TEXT */
#welcome-text {
  font-family: var(--font);
  color: var(--navy);
  text-align: center;
  font-size: 1em;
}

/* WELCOME INPUT CONTAINER */
.input-container {
  display: flex;
  justify-content: center;
  align-self: center;
  max-width: 100%;
}

/* INPUT STYLING */
.input {
  font-family: var(--font);
  font-size: 0.9em;
  text-transform: uppercase;
  background-color: var(--yellow);
  border: none;
  text-align: center; 
  width: 100%;
}

#player-name {
  font-family: var(--font);
  font-size: 0.9em;
  color: #A01306;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 10px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--navy);
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--navy);
}
:-ms-input-placeholder { /* IE 10+ */
  color: var(--navy);
}
:-moz-placeholder { /* Firefox 18- */
  color: var(--navy);
}

/* BUTTON STYLING */
#start-btn {
  background-color: var(--magenta);
  color: var(--yellow);
  font-family: var(--head);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1em;
  border: none;
  width: 150px;
  height: 50px;
  border-radius: 3px;

  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(208, 7, 162, 0);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  transition: background-color 1s ease;
}

#start-btn:hover, #start-btn:focus, #start-btn:active {
  color: var(--white);
  background-color: var(--aqua);
  box-shadow: 0 0 10px rgba(104, 226, 163, 0.9);
}

/* ------ RETURN HOME ------ */
/* BACKGROUND COLOUR (BODY FADE) */
#modal-home {
  background-color: rgba(104, 226, 163, 0.5);
}

/* HOME CONTAINER */
#home-container {
  margin: 0 auto;
  padding: 5px;
  background-color: var(--navy);
  border: 2px solid var(--yellow);
  box-shadow:inset 0 0 .5rem 0 var(--yellow),0 0 1rem 0 var(--yellow);
}

/* HOME BODY */
#home-body {
  margin: 0 auto;
  padding: 15px 15px;
  background-color: var(--purple);
  border: 2px solid var(--white);
  box-shadow:inset 0 0 .5rem 0 var(--white),0 0 1rem 0 var(--white);
}

/* HOME HEADER */
.modal-header {
  padding: 0;
  margin: 0;
  border-bottom: 0 none; 
}

/* HOME 'X' */
.btn-close {
  padding: 5px;
  margin: 0;
  color: var(--white);
}

.btn-close:hover, .btn-close:focus, .btn-close:active  {
  color: var(--yellow);
}

/* HOME HEADER */
#home-header {
  font-family: var(--head);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: 0.3em;
  color: var(--aqua);
}

/* HOME TEXT */
#home-text {
  font-family: var(--font);
  color: var(--white);
  text-align: center;
  font-size: 1em;
}

/* HOME FOOTER */
.modal-footer {
  padding: 0;
  border-top: 0 none;
  display: flex;
  justify-content: center;
}

/* RETURN HOME BUTTON */
#home-btn {
  width: 150px;
  height: 50px;
  background-color: var(--aqua);
  border: none;
  border-radius: 3px;
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--magenta);
  
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(104, 226, 163, 0);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  transition: background-color 1s ease;
}

#home-btn:hover, #home-btn:focus, #home-btn:active {
  color: var(--aqua);
  background-color: var(--magenta);
  box-shadow: 0 0 10px rgba(208, 7, 162, 0.9);
}

/* ------ HOW TO PLAY ------ */
/* BACKGROUND COLOUR (BODY FADE) */
#modal-play {
  background-color: rgba(242, 244, 248, 0.5);
}

/* PLAY CONTAINER */
#play-container {
  margin: 0 auto;
  padding: 5px;
  background-color: var(--navy);
  border: 2px solid var(--yellow);
  box-shadow:inset 0 0 .5rem 0 var(--yellow),0 0 1rem 0 var(--yellow);
}

/* PLAY BODY */
#play-body {
  margin: 0 auto;
  padding: 15px 15px;
  background-color: var(--navy);
  border: 2px solid var(--magenta);
  box-shadow:inset 0 0 .5rem 0 var(--magenta),0 0 1rem 0 var(--magenta);
}

/* PLAY HEADER */
.modal-header .play-header {
  padding: 0;
  margin: 0;
  border-bottom: 0 none; 
}

/* PLAY 'X' */
.play-close {
  padding: 5px;
  margin: 0;
  color: var(--aqua);
}

.play-close:hover, .play-close:focus, .play-close:active  {
  color: var(--magenta);
}

/* PLAY HEADER */
#play-headText {
  font-family: var(--head);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: 0.3em;
  color: var(--white);
}

/* PLAY TEXT */
#play-text {
  font-family: var(--font);
  color: var(--aqua);
  text-align: center;
  font-size: 1em;
}

/* PLAY FOOTER */
.modal-footer .play-footer {
  padding: 0;
  border-top: 0 none;
  display: flex;
  justify-content: center;
}

/* READY BUTTON */
#ready {
  width: 200px;
  height: 60px;
  cursor: pointer;
  background-color: var(--white);
  border: none;
  border-radius: 3px;
  color: var(--purple);
  font-family: var(--head);
  text-transform: uppercase;
  font-size: 1.3em;
  letter-spacing: 0.3em;
  font-weight: 700;
  text-align: center;

  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(242, 244, 248, 0);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  transition: background-color 1s ease;
}

#ready:hover, #ready:focus, #ready:active {
  color: var(--white);
  background-color: var(--purple);
  box-shadow: 0 0 10px rgba(135, 24, 110, 0.9);
}

/* ------ END OF GAME & RETURN HOME END CONTAINER ------ */
.end-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  width: 100%;
  max-width: 90rem;
  padding: 5% 5%;
  margin: 0 auto;
  grid-gap: 10px;
  grid-template-areas: 
  ". home-image ."
  "home-head home-head home-head"
  "home-text home-text home-text"
  ". home-icon .";
}

#home-image {
  grid-area: home-image;
}

.end-head {
  grid-area: home-head;
  text-align: center;
  align-self: center;
  font-size: 1.5em;
  font-family: var(--head);
  text-transform: uppercase;
  font-weight: bold;
  color: var(--yellow);
  letter-spacing: 0.1em;
}

/* END OF GAME TEXT */
.end-text {
  grid-area: home-text;
  text-align: center;
  align-self: center;
  font-size: 1em;
  font-family: var(--head);
  color: var(--white);
  letter-spacing: 0.1em;
}

/* ------ KEYFRAMES ------ */
@keyframes increase {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);;
  }
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }

  to {
      transform: rotate(360deg);
  }
}

/* ------ MEDIA QUERIES ------ */
/* SCREEN WIDTH AT 768PX */
@media (max-width: 768px) {

  html {
    overflow: scroll;
  }

  /* MAIN GAME CONTAINER */
  #game-container {
    grid-template-columns: 2fr 1fr auto ;
    grid-auto-rows: minmax(90px, auto);
    max-width: 95%;
    grid-gap: 7px;
    grid-template-areas:
    "image image stats"
    "image image stats"
    "text-container text-container text-container"
    "button-box button-box button-box";
  }
  
  #content > * {
    padding: 7px;
  }
  
  .stats {
    grid-gap: 7px;
    justify-self: end;
    align-items: end;
  }

  /* END OF GAME */
  .end-container {
    padding: 20px 20px;
  }

  .end-text {
    font-size: 0.9em;
  }

  /* FOOTER & NAVIGATION LINKS */ 
  footer {
    flex-direction: column;
  }
  
  .footer-text {
    text-align: center;
    font-size: 0.7em;
  }
  
  .footer-links {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
  }

  /* ------ END OF GAME & RETURN HOME END CONTAINER ------ */
  .end-container {
    padding: 5% 10px;
  }

  .end-text {
    font-size: 0.8em;
  }
}

/* SCREEN WIDTH AT 640PX */
@media (max-width: 640px) {

  /* ----- ONLOAD WELCOME ----- */
  .modal-content, .welcome {
    margin: 0 auto;
    width: 80%;
  }

  #welcome-container {
    padding: 2px;
  }
  
  #welcome-header {
    font-weight: 600;
    font-size: 1em;
    letter-spacing: 0.1em;
  }
  
  #welcome-text {
    font-size: 0.9em;
    line-height: 1;
  }

  /* ----- RETURN HOME ----- */
  .modal-content, .home {
    margin: 0 auto;
    width: 90%;
  }
  
  #home-container {
    padding: 2px;
  }
     
  #home-header {
    font-weight: 600;
    font-size: 1em;
    letter-spacing: 0.1em;
  }
  
  #home-text {
    font-size: 0.9em;
  }
    
  #home-btn {
    width: 125px;
    height: 40px;
  }
  
  /* ----- PLAY CONTAINER ----- */
  #play-container {
    padding: 2px;
  }
  
  #play-headText {
    font-size: 1em;
  }
  
  #play-text {
    font-size: 0.9em;
  }
  
  #ready {
    width: 130px;
    height: 40px;
    font-size: 1em;
  }

  /* FOOTER & NAVIGATION */
  footer {
    position: relative;
    left: 0;
    bottom: 0;
  }

  /* END OF GAME ICON POSITION */
  .fa-refresh {
    font-size: 30px;
  }

  .fa-refresh:hover {
    font-size: 35px;
  }
}

/* SCREEN WIDTH AT 480PX */
@media (max-width: 480px) {

  /* MAIN GAME CONTAINER */
  #game-container {
    grid-auto-rows: minmax(60px, auto);
  }

  #text {
    font-size: 0.9em;
    line-height: 1.5em;
  }

  /* ONLOAD WELCOME */
  #welcome-header {
    font-weight: bold;
    font-size: 0.9em;
  }

  #input-container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #start-btn {
   margin-top: 5px;
    width: 125px;
    height: 40px;
  }
  
  /* RETURN HOME */
  #home-container {
    padding: 0px;
  }

  #home-body {
    padding: 5px 5px;
  }

  #home-text {
    font-size: 0.8em;
  }

  .modal-footer {
    margin: 0;
    padding: 0;
  }
  
  /* ----- PLAY CONTAINER ----- */
  #play-container {
    padding: 0px;
  }
  
  #play-text {
    font-size: 0.8em;
  }
  
  /* FOOTER & NAVIGATION */ 
  .footer-links a {
    padding: 10px;
    font-size: 25px;
  }
  
  .footer-links i {
    padding: 10px;
    font-size: 25px;
  }
  
  .fa-volume-off:hover {
    font-size: 30px;
  }
  
  .fa-home:hover {
    font-size: 30px;
  }
  
  .fa-envelope-o:hover {
    font-size: 30px;
  }
  
  .fa-question:hover {
    font-size: 30px;
  }
  
  .fa-linkedin-square:hover {
    font-size: 30px;
  }
  
  .fa-github:hover {
    font-size: 30px;
  }
}

/*  ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */
@media (min-width: 280px) and (max-width: 823px) and (orientation: landscape) {

  html {
    overflow: scroll;
  }

  /* MAIN GAME CONTAINER */
  #game-container {
    display: grid;
    grid-template-columns: 1fr 1fr auto ;
    grid-auto-rows: minmax(60px, auto);
    max-width: 90%;
    padding: 5% 5%;
    margin: 0 auto;
    grid-gap: 7px;
    grid-template-areas:
    "image image stats"
    "text-container text-container text-container"
    "button-box button-box button-box";
  }

  #text {
    font-size: 0.9em;
  }

  .stats {
    grid-gap: 7px;
    justify-self: start;
    align-items: start;
  }

  /* HOW TO PLAY */
  #help-text-container {
    width: 90vw;
    height: 100%;
  }

  /* FOOTER */
  footer {
    position: relative;
    left: 0;
    bottom: 0;
  }
}