* {
  box-sizing: border-box;
}

body {
  border: 2px solid transparent;
  background: url(imgs/pexels-scottwebb-137032.jpg);
  background-size: cover;
  height: 100vh;
}


div {
  border: 1px solid transparent;
}


#wrapper {
    display:flex;
  border: 1px solid transparent;
  height: 95vh;
  width: 60vh;
  margin: auto;
}

#arm {
  padding-top: 25%; 
  width: 20vh;

}
#img-arm {
  max-width: 100%;
  height: 4vh;
  transition: transform 0.1s ease;
  
}
  
}

#arm:hover{
  
cursor: pointer;
}

#arm:active {
  transform: rotate(30deg)
}
.clicked {
  background-color: transparent;
}


#machine {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.machine-part {
  border: 2px solid transparent;
  height: 33%;
} 

#top{
  height: 30%;
}

#middle {
  height: 30%;
  position: relative;
}

#slot-container {
  display: flex; /* or inline-flex */
  border: 2px solid transparent ;
  margin: left 20px;color: #bc5088; ;
  position: absolute;
  width: 100%;
  height: 110%;
  top: 0px;
  padding: 40px;
  pointer-events: none; 
}

.slot1, .slot2, .slot3{
  width: 33%;
  height: 75%;          /* your requested 75% height */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: auto; /* enable interaction with slot contents */
  overflow: hidden;
  background-size: cover !important

}

.slot1 { background: #ff6b6b; }   
.slot2 { background: #ffd166; }   
.slot3 { background: #6bd7a9; }   

.slot1 img, .slot2 img, .slot3 img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  pointer-events: none;
}



 

.slot{
  border: 2px solid yellow;
  width: 33%;
}


#bottom{
  height: 50%;
}

.machine-part img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}