/**************
|  style.css  |
**************/

html {
  background-color: black;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  color: lawngreen;
  padding: 0;
  margin: 0;
}

h4 {
  font-size: 26px;
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 5px black;
}

.planets {
  width: 99.9%;
  height: 99.5vh;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  justify-content: space-evenly;
  /* border: solid 1px red; */
}

.planet {
  width: 22.5%;
  min-height: 30vh;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* border: solid 1px gold; */
}

.p1 {
  background-image: url(images/mercury.png);
}

.p2 {
  background-image: url(images/venus.png);
}

.p3 {
  background-image: url(images/earth.png);
}

.p4 {
  background-image: url(images/mars.png);
}

.p5 {
  background-image: url(images/jupiter.png);
}

.p6 {
  background-image: url(images/saturn.png);
}

.p7 {
  background-image: url(images/uranus.png);
}

.p8 {
  background-image: url(images/neptune.png);
}