html {
  height: fit-content;
}
body {
  margin: 0;
  padding: 0;
}

/* ceramic stems image */
.stems-container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.ceramic-table-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
#ceramic-table {
  width: 100%;
  box-shadow: var(--ndac-box-shadow);
}

/* object style */
.object-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.object {
  width: 7%;
  height: 16%;
  position: absolute;
  cursor:
    url(../assets/icons/mallet_1-resized.ico),
    url(../assets/icons/mallet_1-resized.cur),
    url(../assets/icons/mallet_1-resized.png), pointer;
  z-index: 1;
  transform: rotate(-10deg);
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.15);
  border-radius: 50% 50% 25% 25%;
  transition: all 0.2s;
}
.object:hover {
  background-color: rgba(0, 183, 255, 0.1);
  box-shadow: 0 0 20px 30px rgba(0, 183, 255, 0.1);
}
#object1 {
  top: 10%;
  left: 17.5%;
  height: 23%;
  transform: rotate(-18deg);
}
#object2 {
  top: 10.5%;
  left: 29.5%;
  height: 22%;
}
#object3 {
  top: 10%;
  left: 41%;
  width: 10%;
  height: 29%;
  transform: rotate(-12deg);
}
#object4 {
  top: 22%;
  left: 53%;
  width: 12%;
  height: 31%;
  transform: rotate(-2deg);
  border-radius: 50% 50% 50% 20%;
}
#object5 {
  top: 38%;
  left: 59%;
  width: 13%;
  height: 35%;
  transform: rotate(15deg);
}

@media only screen and (max-width: 700px) {
  .developing-instruments-flex-layout {
    display: flex;
    flex-flow: column nowrap;
    width: 98%;
  }
  .dti-section,
  .big-dti-image,
  .stems-container {
    width: 100%;
    height: 100%;
  }
  .descriptive-text p {
    font-size: 15px;
  }
  .descriptive-text h2 {
    font-size: 18px;
  }
  .stems-container .descriptive-text {
    width: 100%;
  }
  .dti-section,
  .descriptive-text,
  .object-wrapper {
    width: 100%;
  }
  .ceramic-table-container,
  .ceramic-table-container img {
    width: 100%;
    min-width: auto;
  }
  #ceramic-table {
    width: 100%;
    box-shadow: var(--ndac-box-shadow);
  }
  /* object style */
  .object-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .object {
    width: 12%;
    height: 16%;
  }
  #object1 {
    top: 15%;
    left: 1%;
    height: 25%;
    transform: rotate(-18deg);
  }
  #object2 {
    top: 15%;
    left: 23%;
    height: 25%;
  }
  #object3 {
    top: 13%;
    left: 44%;
    width: 18%;
    height: 36%;
    transform: rotate(-12deg);
  }
  #object4 {
    top: 28%;
    left: 68%;
    width: 18%;
    height: 38%;
    transform: rotate(-2deg);
    border-radius: 50% 50% 50% 20%;
  }
  #object5 {
    top: 47%;
    left: 79%;
    width: 20%;
    height: 45%;
    transform: rotate(18deg);
  }
}