:root {
  --mainColor: #000000;
  --accentColor: #0f0474;
}

body {
  background-color: #ac5296;
  color: #ffffff;
  font-family: cursive, fantasy;
}

.header {
  width: 100%;
  height: 200px;
}

.navbar {
  display: flex;
  margin: 10px;
  flex-flow: row wrap;
  justify-content: space-around;
}

#content {
  height: 500px;
  width: 100%;
  z-index: 2;
}

.item {
  display: grid;
  grid-template-columns: 0.1fr 1fr;
  grid-template-rows: 0.25fr 1fr 0.25fr;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  padding: 25px;
}

.itemImage {
  grid-area: 1 / 1 / 4 / 2;
  height: 50px;
  width: 50px;
  border: 3px solid var(--accentColor);
}

.itemTitle {
  grid-area: 1 / 2 / 2 / 3;
  border-bottom: 2px solid var(--accentColor);
  color: var(--accentColor);
}

.itemSummary {
  grid-area: 2 / 2 / 3 / 3;
}

.itemDate {
  grid-area: 3 / 2 / 4 / 3;
  color: var(--accentColor);
  border-top: 2px solid var(--accentColor);
}

/*
.section {
  background-color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 2px 0px 2px 2px #0905fc;
  margin: 25px;
}

.items {
  display: flex;
  margin: 10px;
  flex-flow: column wrap;
  justify-content: space-around;
}

.item {
  background-color: #ffffff;
  flex: 1 0 auto;
  padding: 10px;
}
*/

.moonContainer {
  position: absolute;
  z-index: 2;
  background: #000000;
  width: 1000px;
  height: 200px;
}

.vMoon {
  position: absolute;
  z-index: 2;
  height: 50px;
  width: 50px;
  background-color: #ffffff;
  border-radius: 200px;
  /*
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  
  animation: right-moon 30s;
  */
  box-shadow: inset -1px 0px 3px 1px #000000;
  /*animation: moon-shadow 10s infinite;*/
}

/*H W B S*/
@keyframes moon-shadow {
  0% {
    box-shadow: inset -1px 0px 3px 1px #000000;
  }
  100% {
    box-shadow: inset -100px 0px 3px 1px #000000;
  }
}

.dMoon {
  position: absolute;
  z-index: 3;
  height: 50px;
  width: 25px;
  left: 30px;
  background-color: #000000;
  /*
  border-radius: 200px;
  */

  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  box-shadow: inset -1px 0px 0px 1px #000000;

  animation: moon-phases 10s infinite;
}

@keyframes moon-phases {
  0% {
    width: 25px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
  100% {
    width: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}