.build-component {
  height: 65%;
  display: flex;
  position: relative;
  margin: auto;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 5rem;
  border: .1rem solid rgb(212, 212, 212);
  background-color: rgba(255, 255, 255, 0.5);
}

.build-deck-name {
  margin-bottom: 5%;
}

.build-card-selector {
  display: inline-flex;
  width: 45%;
  min-width: 16rem;
  max-width: 25rem;
  height: 18%;
  justify-content: space-evenly;
  align-items: center;
}

.field-text {
  width: 100%;
  min-width: 35rem;
  height: 30%;
  max-height: 8rem;
  text-align: center;
}


.bttn--select-left {
  width: 3rem;
  height: 3rem;
  clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
  -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  -webkit-background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  cursor: pointer;
  /* margin-right: 1%; */
}
.bttn--select-left:hover {
  transition: all .4s;
  background-image: linear-gradient(120deg, #c3e76f 0%, #83c98d 100%);
}

.bttn--select-right {
  width: 3rem;
  height: 3rem;
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  -webkit-background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  cursor: pointer;
  /* margin-left: 1%; */
}
.bttn--select-right:hover {
  transition: all .4s;
  background-image: linear-gradient(120deg, #c3e76f 0%, #83c98d 100%);
  -webkit-background-image: linear-gradient(120deg, #c3e76f 0%, #83c98d 100%);
}


.build-card-fields {
  /* height: 100%;
  width: 50%;
  min-width: 5rem;
  max-width: 30rem;
  max-height: 25rem;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap; */
}

.field {
  width: 100%;
  font-size: 100%;
  height: 12vw;
  max-height: 3rem;
  min-width: 5rem;
  z-index: -1;
  color: rgb(134, 36, 32);
  text-align: center;

}

.deck-modifier {
  align-items: center;
  width: 100%;
  min-width: 5rem;
  max-width: 60rem;
  display: inline-flex;
  justify-content: space-evenly;
  color: rgb(0, 0, 0);
}

.bttn--remove-card {
  height: 4rem;
  width: 4rem;
  clip-path: polygon(0 33%, 100% 33%, 100% 66%, 0 66%);
  -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 66%, 0 66%);
  background-image: linear-gradient(120deg, #d13a3a 0%, #e71919 100%);
  -webkit-background-image: linear-gradient(120deg, #d13a3a 0%, #e71919 100%);
  margin-right: 2rem;
  cursor: pointer;
  box-shadow: 0 1.2rem 1.2rem rgb(0, 0, 0);

}
.bttn--remove-card:hover {
  transition: all .4s;
  background-image: linear-gradient(120deg, #c23737 0%, #cc1616 100%);
}
.bttn--add-card {
  height: 4rem;
  width: 4rem;
  clip-path: polygon(66% 0, 33% 0, 33% 33%, 0 33%, 0 66%, 33% 66%, 33% 100%, 66% 100%, 66% 66%, 100% 66%, 100% 33%, 66% 33%);
  -webkit-clip-path: polygon(66% 0, 33% 0, 33% 33%, 0 33%, 0 66%, 33% 66%, 33% 100%, 66% 100%, 66% 66%, 100% 66%, 100% 33%, 66% 33%);
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  -webkit-background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  margin-left: 2rem;
  cursor: pointer;
}

.bttn--add-card:hover {
  background-image: linear-gradient(120deg, #c3e76f 0%, #83c98d 100%);
}

.bttn--play {
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  -webkit-background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  min-width: 5rem;
  min-height: 5rem;
  position: relative;
  cursor: pointer;
  align-self: flex-end;
  top: 2rem;
  right: 6rem;
}

@media only screen and (max-width: 600px) {
  .build-component {
    padding-top: 10rem;
  }
}