body, html {
  height: 100%;
  margin:0;
  font-size:16px;
  font-family: 'Syne Mono', monospace;
  /* font-family: 'EB Garamond', serif; */
  font-weight: 400;
  line-height:1.8em;
  color:white;
  background-color: #121212;;
}

.banner {
    background-image: url('./images/earth_gold.jpg');
    background-size:     100%;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center center;
    height:0;
    width:100%;
    padding-bottom: 51.4%;
    display: flex;
    justify-content: center;
    border-bottom: 5px solid #000;
}

.banner1 {
  display: flex;
  justify-content: center;
  border-bottom: 5px solid #96763c;
}

.banner > img{
  width:100%;
}

.particles-js {
    height:200px;
    background-color: black;
}

.large_text{
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
  color: white;
}

.border {
  display: flex;
  justify-content: center;
  text-align:center;
  background-color:#000;
  color:#fff;
  padding:20px;
  opacity: 0.6;
  border-color:#96763c;
  border-style:solid;
  border-width:1px;

}

.content-wrapper {
  padding:2em;
}.content{
  background-color:#000;
  padding:1em;
  margin-bottom:5em;
  border-bottom: 1px solid #5d4a26;
  border-top: 3px solid #5d4a26;
  opacity:0.9;

  background-attachment:fixed;
  background-position: center center center;
}
.history{
  background-image:url('./images/satellite.jpg');

}
.mission{
  background-image:url('./images/mars.jpg');
  display: flex;
  justify-content:right;
  justify-items:right;

}
.content-box{
  width:60%;
  text-align:left;
  background-color:black;
  border: 1px solid #121212;
  opacity:0.7;
  padding:10px;
  font-family: 'Syne Mono', monospace;
}

.employee-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:1em;
}

.employee {
  min-height:80px;
  background-color: #000;
  padding:1em;
  border: 1px dotted #5d4a26;
  text-align:center;
  background-image:url('./images/hills.jpg');
  background-attachment:fixed;
  background-position: center center center;
}
.employee:hover {
  border: 1px solid #5d4a26;
}


.image-cropper {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
}
.image-cropper>img{
  width:100%;
}
.image-wrapper{
  display: flex;
  justify-content:center;
}

h2{
  color: #cac8c5;
}
h3 {
  color: #afadaa;
}

.countdown-wrapper{
  width:300px;
  height:300px;
  border-radius:50%;
  overflow:hidden;
  background:black;
  background-image:url('./images/gradient.jpg');
  background-size:contain;
  opacity:0.8;
  margin:2em;
  align-self:bottom;
  display: flex;
  flex-direction:row;
  align-items:center;
  justify-content: center;
}
.countdown{
  display:grid;
}
.countdown>div{
  padding:5px;
  border-bottom: 1px dotted #000;
  text-align:center;
  font-size:2.3em;
  font-family: 'Syne Mono', monospace;
  vertical-align: middle;
}
.countdown>div:hover{
  border-bottom: 1px solid white;
}

.launchbox{
  margin-bottom:-70px;
  position:relative;
  z-index:100;
  width: 50%;
  opacity:0.6;
  background-color:black;
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
  color: white;
  padding:1em;
  border: 1px solid #96763c;
}