@font-face {
  font-family: cheltenham; 
  src: url(Cheltenham\ Condensed\ Bold.ttf);
}

#intro {
  font-family: cheltenham;
  color: aliceblue;
  transform: translate(-750px, 270px);
  height: 300px;
  white-space: nowrap;
  width: 20px;
}

body {
    background-image: url(photos/stars2.png);
}

.container {
  display: flex;
  /*background-color: gray;*/
  flex-wrap: wrap;
  min-height: 900px;
} 

#Mercury, #venus, #earth, #Mars, #Jupiter, #Saturn, #Uranus, #Neptune {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  color: white;
  width: 150px;
  height: 300px;
  margin: 1px;
}

#Mercury {
  transform: translate(20px, 20px);
}

#venus {
  transform: translate(-120px, 240px);
}

#earth {
  transform: translate(-180px, 450px);
}

#Mars {
  transform: translate(-130px, 600px);
}

#Jupiter {
  transform: translate(-40px, 630px);
}

#Saturn {
  transform: translate(50px, 540px);
}

#Uranus {
  transform: translate(100px, 420px);
}

#Neptune {
  transform: translate(25px, 210px);
}

.the_real_container {
  max-width: 2000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* Need to fix the alignment on certain screens.
I feel like it's probably the result of the absolute positioning.
...but i need that? */