#toolapp > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html {
  --height-width1: 500px;
  --height-width2: 600px;
  --height-width2h: 600px;
}
#glovescarousel {
  border-radius: 3%;
  box-shadow: 5px 5px 36px -12px black;
}
#toolapp {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  place-items: center;
}
.gridview {
  display: grid;
  column-count: 2;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
}
.gridview img,
.gridview .cnv {
  /* height: 360px !important;
  width: 360px !important; */
}
#toolapp .cnv:nth-child(1) img,
#toolapp .cnv:nth-child(2) img,
#toolapp .cnv:nth-child(4) img,
#toolapp .cnv:nth-child(3) img {
  height: var(--height-width2h);
  width: var(--height-width2);
}
#toolapp .cnv:nth-child(1),
#toolapp .cnv:nth-child(2),
#toolapp .cnv:nth-child(3),
#toolapp .cnv:nth-child(4) {
  height: var(--height-width2h);
  width: var(--height-width2);
}
#toolapp .cnv {
  height: var(--height-width2h);
  width: var(--height-width2);
}
canvas.cnv {
  border-radius: 3%;
  
}
.cnv .view {
  position: relative;
  height: inherit;
  width: inherit;
}
.cnv .view .gloveslice {
  position: absolute;
}
option,
select {
  text-transform: capitalize;
}
.views {
  padding: 0.2em;
  background: #708287;
}
#toolapp > #colors {
  display: grid;
  column-count: 2;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  place-content: center;
}
#toolapp > #colors > hr,
#webster {
  grid-column: 1/4;
}
#toolapp > #base {
  display: grid;
  grid-template-columns: repeat(1, 22em);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
aside {
  width: 40%;
}
#toolapp aside#colors .dropdown-menu.show {
  display: grid;
  column-count: 3;
  grid-template-columns: repeat(3, 8em);
  text-align: center;
  gap: 0.4em;
}
#toolapp aside#colors .dropdown-menu.show .dropdown-item:hover {
  background: grey !important;
}

/* check if .gloveslice has image with id that starts with text 'laces' */
.gloveslice img [id^="laces"] {
  display: none;
}
@media only screen and (max-width: 1000px) {
  #toolapp {
    display: flex;
    flex-direction: column;
    gap: 1em;
    --height-width1: 340px;
    --height-width2: 370px;
  }
  aside {
    width: unset;
  }
  #glovescarousel {
    height: unset;
  }
  #colors {
    width: 80%;
  }
}
@media only screen and (max-width: 600px) {
  #toolapp aside#colors .dropdown-menu.show {
    grid-template-columns: repeat(3, 5em);
  }
  #toolapp aside#colors {
    grid-template-columns: repeat(2, 10em);
  }
}

@media only screen and (max-width: 600px) {
  ul.dropdown-menu {
    height: 250px;
    overflow: scroll;
  }
}
@media only screen and (max-width: 600px) {
  ul.dropdown-menu {
    height: 250px;
    overflow: scroll;
  }
}