*{
  box-sizing: border-box;
  font-family: 'Karla', sans-serif;
 
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}


@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-7000px);
  }
}

/* Increase button looks */
  .btn{
    background-color: rgba(97, 141, 27, 0.322); 
  }

  @keyframes bounce {
    from { transform: translate3d(0, -50px, 0);     }
    to   { transform: translate3d(0, 0px, 0); }
  }

  /* This CSS styles the ufo icon in the navbar */
  .nav-ufo {
    position: absolute;
    bottom: 5px;
    left: 200px;
    width: 35px;
    color: white;
    animation: bounce 1.5s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5,0.05,1,.5);
    animation-iteration-count: infinite;
  }
  div .navbar{
    background-color: black !important; 
    border-bottom-style: double; 
    border-bottom-color: purple; 
  }
  /* The wrapper contains all of the page's content besides the footer, which is pushed to the bottom of the page */
  .wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 130px;
    overflow: auto;
  }
  
  /* The code styles the text at the bottom of the footer */
  .footer > .bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    border-top-style: double; 
    border-top-color: purple; 
    font-size: 2rem;
  }
   */
  .navbar {
    padding: 5px;
    margin: 0;


  }
  
div .panel{
  border-style: double; 
  border-color: purple; 
}

div .panel-heading{
  background-color: black !important; 
  border-bottom-style: double !important; 
  border-bottom-color: purple !important; 
}
div .panel-body{
  background-color: black !important; 
}

ul #filters{
  background-color: black !important; 
}
  
  /* Adding styles to the aside and filter form */
  .ufo-form {
    margin-top: 50px;


  }
  
  .filters .panel-body {
    padding: 0;
  }
  
  .filters {
    margin-top: 10px;
  }
  
  select {
    display: block;
    width: 100%;
    padding: 8px;
	color: purple;
	outline: none;
  }
  
  #table-area th {
    text-align: center;
  }
  
  #table-area th:first-child,
  #table-area th:nth-child(2),
  #table-area th:nth-child(6) {
    min-width: 70px;
  }
  
  .loader {
    margin-top: 50px;
  }
  
  .margin-top-50 {
    margin-top: 50px;
  }
  
  /* The styles for the parallax */
  .hero {
    position: relative;
    height: 550px;
    padding: 20px;
    margin: 0;
    background: black;
    background-image: url("../images/nasa.jpg");
    background-attachment: fixed;
    background-position: bottom center;
    background-size: cover;

  }
  
  .hero h1 {
    margin-top: 200px;
    font-size: 0.1rem;
    animation: title 1.2s forwards linear;
  }
  
  .hero p {
    font-size: 2rem;
    opacity: 0;
    animation: subtitle 1.2s forwards linear;
    animation-delay: 1.2s;
  }
  
  /* input placeholder color changes */
  .form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: purple;
  }
  
  .form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: purple;
  }
  
  .form-control:-ms-input-placeholder {
    /* IE 10+ */
    ccolor: purple;
  }
  
  .form-control:-moz-placeholder {
    /* Firefox 18- */
    color: purple;
  }
  

  table{
    border-style: double; 
    border-color: purple; 
  }
  /* media queries which will only be activated at specific screen sizes */
  @media (max-width: 800px) {
    #table-area td {
      font-size: 1em;
    }
  }

  
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: purple; 
}
  
  @media (max-width: 500px) {
    #table-area thead {
      display: none;
    }
  
    #table-area tr td:first-child {
      font-size: 1.8em;
      font-weight: bold;
      background: purple;
    }
  
    #table-area tr td:last-child {
      margin-bottom: 20px;
    }
  
    #table-area tr td:last-child::after {
      display: block;
      width: 100%;
      height: 1px;
      margin-top: 20px;
      content: " ";
	  background: purple;
      
    }
  
    #table-area td {
      font-size: 1.25em;
    }
  
    #table-area tbody td {
      display: block;
      text-align: center;
    }
  

    #table-area tbody td::before {
      display: block;
      font-size: 1.4em;
      font-weight: bold;
      text-align: center;
      content: attr(data-th);

    }
  
    .hero h1 {
      animation: smaller-title 2.2s forwards linear;
    }
  }
  
  /* keyframe animations which will be used to animate the title */
  @keyframes title {
    from {
      opacity: 0;
    }
  
    to {
      font-size: 7.5rem;
      opacity: 1;
    }
  }
  
  @keyframes smaller-title {
    from {
      opacity: 0;
    }
  
    to {
      font-size: 5.5rem;
      opacity: 1;
    }
  }
  
  @keyframes subtitle {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }