.moonPhase, .moonPhase *, .moonPhase :before, .moonPhase :after {
  box-sizing: border-box;
}

.moonPhase {
  margin: 0 auto 20px;
  width: 100%;
  max-width: 500px;
}

.moonPhase-head {
  margin: 0 0 10px;
  font-family: "Roboto Condensed", Sans-serif;
  font-size: 1.375rem;
  font-weight: 900;
  text-align: center;
  color: #669;
}

.moonPhase-image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #000;
}
.moonPhase-image img {
  display: block;
  margin: 0 auto;
}

.moonPhase-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 0.938rem;
}
.moonPhase-item__name {
  padding: 5px 10px;
  width: calc(100% - 170px);
  font-weight: 600;
  background-color: #ddd;
}
.moonPhase-item__value {
  padding: 5px 10px;
  width: 170px;
}

@media (max-width: 400px) {
  .moonPhase-item {
    flex-direction: column;
  }
  .moonPhase-item__name {
    width: 100%;
  }
  .moonPhase-item__value {
    width: 100%;
  }
}

/*# sourceMappingURL=app.css.map */