body {
  margin: 0;
  height: 100vh;
  /* hides overflow from animations and such that would extend the page */
  overflow-y: hidden;
  overflow-x: hidden;
  /* white and pink striped background for a boutique aesthetic */
  background: repeating-linear-gradient(
    90deg,
    #fff4f9,
    #fff4f9 30px,
    #ffffff 30px,
    #ffffff 49px
  );
  display: grid;
  grid-template-columns: 4fr 3fr 4fr;
}

/* Text assigned Noto Serif */
h1,
h2,
button {
  font-family: "Noto Serif", serif;
}

h2 {
  margin: 20px 0 10px 0;
  font-size: 5rem;
  font-weight: 400;
  text-decoration: underline 3px;
}

aside {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

/* bodice menu assigned custom images for background to have the scalloped edges. Give it a cute yet classy touch. */
#bodicemenu {
  background-image: url(webassets/bodicemenu@3x.png);
  background-size: cover;
  background-position: right;
  grid-column: 1 / span 1;
}

#skirtmenu {
  background-image: url(webassets/skirtsmenu@3x.png);
  background-size: cover;
  background-position: left;
  grid-column: 3 / span 1;
}

#bodicebox,
#skirtbox {
  display: grid;
  /* Items go down the columns */
  grid-template-columns: 1fr 1fr;
  width: 70%;
  column-gap: 50px;
}

/* Was struggling previously with my first skirt and bodice drawings because they all had varying sizes which made it difficult as I didn't know how to adjust each individual size and height when placing. */
#bodicebox img,
#skirtbox img {
  width: 110%;
  height: auto;
  margin-bottom: 20px;
  cursor: pointer;
  z-index: 2;
}

/* space out skirts evenly since they aren't as tall compared to bodices */
#skirtbox {
  row-gap: 40px;
}

section {
  grid-column: 2 / span 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
/* Button given a border to make it look stylish. */
#finbtn {
  font-size: 1.5rem;
  text-decoration: underline;
  padding: 0px 20px;
  cursor: pointer;
  background-color: black;
  color: white;
  border-radius: 10px;
  border: 2px solid white;
  outline: 3px solid black;
  position: absolute;
  left: 810px;
  bottom: 20px;
}

/* Button scaled down when hovering to give effect of real button being pressed */
button:hover {
  transform: scale(0.9);
}

#bodice_droparea {
  /* background-color: blue; Used this to help me position the box over the mannequin. Had to be specific with positioning so the clothes could be placed exactly ontop of the mannequin how I want it to.*/
  position: relative;
  height: 180px;
  width: 162px;
  bottom: 632px;
  left: 10.5px;
  z-index: 2;
}

/* Placed images take the entire box area */
#bodice_droparea img,
#skirt_droparea img {
  width: 100%;
  height: 100%;
}

#skirt_droparea {
  /* background-color: purple; */
  position: relative;
  height: 170px;
  width: 203px;
  bottom: 702px;
  left: -9.8px;
  z-index: 1;
}

/* animations for ending the game */

/* moving items to the side*/
.moveAside {
  animation: moveAside 1s ease-out forwards;
}

@keyframes moveAside {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(530px);
  }
}

/* making items clear */
.clearOpacity {
  animation: turnClear 1s ease-out forwards;
}

@keyframes turnClear {
  from {
    opacity: auto;
  }
  to {
    opacity: 0%;
  }
}

/* Giving the extended menu created in javascript its color and size. */
#extendedmenu {
  position: absolute;
  left: 0;
  background-color: #fff4f9;
  height: 100vh;
  width: 50vw;
}

/* menu extension moving as the other items move to the side */
.menuExtension {
  animation: menuExtend 1s ease-out forwards;
}

@keyframes menuExtend {
  from {
    transform: translateX(-700);
  }
  to {
    transform: translateX(580px);
  }
}

/* For added text in javascript. Made it somewhat big to take more space in the extended menu. */
#comingsoon {
  font-weight: 400;
  position: absolute;
  left: 200px;
  bottom: 310px;
  font-size: 5rem;
  width: 600px;
  color: black;
  text-align: center;
}

/* Button styling */
#makeanother {
  font-size: 2rem;
  text-decoration: underline;
  padding: 0px 20px;
  cursor: pointer;
  background-color: black;
  color: white;
  border-radius: 10px;
  border: 2px solid white;
  outline: 3px solid black;
  position: absolute;
  left: 380px;
  bottom: 300px;
}

/* To make items appear  */
.showOpacity {
  animation: show 1s ease-out 600ms forwards;
}

@keyframes show {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}