body {
  background-color: aquamarine;
  padding: 10%;
  padding-top: 2%;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
}
header {
  background-color: aqua;
  width: 80%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  text-align: center;
  border: 2px solid cadetblue;
}
main {
  background-color: cadetblue;
  width: 80%;
  min-height: 400px;
  justify-self: center;
  font-size: 30px;
  padding: 5%;
  color: white;
  display: grid;
  grid-template-columns: 1fr;
}
.btns {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
ul {
  transition: transform 0.5s;
}
button {
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: aquamarine;
  color: black;
  cursor: pointer;
  height: fit-content;
}
.buttons {
  height: fit-content;
  padding: 10px;
}
button:hover {
  background-color: cadetblue;
  color: white;
  transform: scale(1.5);
}
.adjacentBtns {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.initial--hidden {
  display: none;
}
.hidden {
  display: none;
}
/* the below element will be inserted using inserAdjacentHTML method*/
#adjacentHtml {
  justify-self: center;
  justify-content: center;
  border: 1px solid black;
  margin: 10px;
  background-color: rgb(52, 133, 14);
  color: aliceblue;
  padding: 10px;
}

.create--hidden {
  display: none;
}