@import url('https://fonts.googleapis.com/css?family=Nova+Mono');
body{
  font-family: 'Nova Mono', monospace;
  background-image:url(images/background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  padding:0;
  margin: 0;
  height: 100vh;
}
table{
  margin: auto;
  transform: skew(-30deg, 0deg) ;
  -webkit-transform: skew(-30deg, 0deg) ;
  -moz-transform: skew(-30deg, 0deg) ;
  -o-transform: skew(-30deg, 0deg) ;
  -ms-transform: skew(-30deg, 0deg) ;
}
td{
  display:inline-block;
  position:relative;
  opacity: 1;
  margin: 5px;
  padding: 0.8vw;
  border:3px #dd986b solid;
  border-radius:5%;
  background-color: rgba(68, 39, 20, 0.7);
  font-weight:900;
  font-size: 0.9em;
  color:whitesmoke;
  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
}
.inactive{
  animation: fade-out 1s ease-in-out;
  animation-fill-mode: forwards; 
  -webkit-animation-fill-mode: forwards;
}
.active{
  animation: fade-in 1s ease-in-out;
  animation-fill-mode: forwards; 
  -webkit-animation-fill-mode: forwards;
}
#mars{
  border-radius:50%;
  border: 1px #eb2323 solid;
  background-color: #442714;
  margin: 10% auto;
  width: 40vw;
  height: 50vh;
  background: url(images/seamless_mars.svg) 0 0 repeat;
  background-size: 50vw;
  animation: rotate 30s linear infinite;
  transition: transform 200ms linear;
  transform-style: preserve-3d;
  transform: rotate(5deg);
  box-shadow:         0px 0px 74px 0px rgba(222,36,36,1),
                      inset -40px -65px 74px 54px rgba(90, 18, 18, 0.75);
  -webkit-box-shadow: 0px 0px 74px 0px rgba(222,36,36,1),
                      inset -40px -65px 74px 54px rgba(90, 18, 18, 0.75);
  -moz-box-shadow:    0px 0px 74px 0px rgba(222,36,36,1),
                      inset -40px -65px 74px 54px rgba(90, 18, 18, 0.75);                     
}
#mars:hover{
  content:'';
  box-shadow:         0px 0px 174px 0px rgb(251, 61, 61),
                      inset -40px -65px 74px 54px rgba(90, 18, 18, 0.75);
  -webkit-box-shadow: 0px 0px 174px 0px rgba(251, 61, 61),
                      inset -40px -65px 74px 54px rgba(90, 18, 18, 0.75);
  -moz-box-shadow:    0px 0px 174px 0px rgba(251, 61, 61),
                      inset -40px -65px 74px 54px rgba(90, 18, 18, 0.75);  
  transition: all 0.3s ease 0s; 
}
#marsLanding{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #442714;
  width: 100vw;
  height: 100vh;
  background: url(images/Landon_basin2.jpg) 0 0 no-repeat;
  transform-style: preserve-3d;
  animation: zoom 1.5s ease-in-out;
  box-shadow:         inset 0px -65px 100px 50px rgba(90, 18, 18, 0.75);
  -webkit-box-shadow: inset 0px -65px 100px 50px rgba(90, 18, 18, 0.75);
  -moz-box-shadow:    inset 0px -65px 100px 50px rgba(90, 18, 18, 0.75);
}
#happy{
  position:absolute;
  z-index:10;
  height:40vh;
  width:20vw;
  top: 15vh;
  left: 60vw;
}
.missionButton{
  display: none;
  border:none;
  font-family: 'Nova Mono', monospace;
  font-size: 1.3vw;
  background: rgb(165, 9, 9);
  color: white;
  border-radius: 50%;
  position: absolute;

  width: 10vw;
  height: 10vw;
  box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5); 
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
}
#actionButton{
  z-index:20;
  right: 5%;
  bottom: 10%;
}
#runButton{
  z-index:19;
  left: 8%;
  top:8%;
}
.missionButton:hover{
  background-color: rgb(255, 157, 0);
  color:black;
  transition: all 1s;
}
.missionButton:focus { 
  outline-style: none; 
}
.rock, .roverPresent{
  position:absolute;
  z-index:9;
  animation: fluidDrop ease-out 3s;
}
.failedAttempt{
  position:absolute;
  z-index:10;
}
.rock, .failedAttempt{
  width:75%;
  transform: skew(30deg, 0deg) translate(-80%, -50%);
  -webkit-transform: skew(30deg, 0deg) translate(-80%, -50%);
  -moz-transform: skew(30deg, 0deg) translate(-80%, -50%);
}
.roverPresent{
  width:150%;
  transform: skew(30deg, 0deg) translate(-60%, -60%);
  -webkit-transform: skew(30deg, 0deg) translate(-60%, -60%);
  -moz-transform: skew(30deg, 0deg) translate(-60%, -60%);
}
@keyframes rotate {
  0% {background-position: 0 0;}
  100% {background-position: 50vw 0;}
}

@keyframes zoom {
  0% { 
    border-radius: 50%; 
    transform: scale(0.5);
}
  100%{ 
    border-radius:0%;
    transform: scale(1);
     }
}
@keyframes fade-out{
  0%{
    opacity: 1}
 99%{opacity: 0}
 100%{visibility:hidden}
}
@keyframes fade-in{
  0%{
  }
  1%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes fluidDrop {
  from {
    animation-fill-mode: forwards; 
      opacity:0;
      transform: skew(30deg, 0deg) translate(-80%, -1050%);
  }
  to {
    animation-fill-mode: forwards; 
    opacity:1;
    ransform: skew(30deg, 0deg) translate(-80%, -50%);
  }
}