.petri-dish {
  width: 44vmin; /* Adjust width as needed */
  height: 44vmin; /* Adjust height as needed */
  border-radius: 50%; /* Creates a circular shape */
  background-color: #C0C0C0; /* Light gray background */
  border: 1vmin solid #040f0f; /* Gray border */
  position: relative; /* Allows positioning of inner elements */
}

.dot {
  background-color: #993955; /* White inner circle */
  width: 2vmin; /* Adjust width as needed */
  height: 2vmin; /* Adjust height as needed */
  border-radius: 50%; /* Creates a circular shape */
  position: relative; /* Absolute positioning within the dish */
  z-index: 3;
}

.inhib {
  background-color: #E0AFA0; /* White inner circle */
  width: 44vmin; /* Adjust width as needed */
  height: 44vmin; /* Adjust height as needed */
  border-radius: 50%; /* Creates a circular shape */
  position: relative; /* Absolute positioning within the dish */
  z-index: 1;
}

.inhib::after {
  content: ""; /* Empty content for pseudo-element */
  position: absolute; /* Absolute positioning within the dish */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center positioning */
  background-color: #C0C0C0; /* White inner circle */
  width: 18vmin; /* Adjust width as needed */
  height: 18vmin; /* Adjust height as needed */
  border-radius: 50%; /* Creates a circular shape */
}

.radius-right {
  background-color: #040f0f; /* Adjust line color */
  transform: rotate(90deg); /* Horizontal line */
  height: 0.5vmin; /* Adjust height for horizontal line */
  width: 9vmin; /* Adjust width for horizontal line */
  position: relative; /* Absolute positioning within the dish */
  top: 0%;
  left: 4.5vmin;
  transform: translate(0%, 0%); /* Center positioning */
  z-index: 2;
}

.radius-right::after { /* Horizontal line */
  content: "";
  position: absolute;
  left: 100%;
  transform: translate(0%, -33%); /* Center positioning */
  width: 0vmin; /* Adjust width for horizontal line */
  height: 1.5vmin; /* Set height for thin line */
  border-right: #040f0f solid 0.5vmin; /* Solid border for horizontal line */
}

.radius-up {
  background-color: #040f0f; /* Adjust line color */
  height: 9vmin; /* Adjust height for horizontal line */
  width: 0.5vmin; /* Adjust width for horizontal line */
  position: relative; /* Absolute positioning within the dish */
  top: 4.5vmin;
  left: 0%;
  transform: translate(0%, -100%); /* Center positioning */
  z-index: 2;
}

.radius-up::after { /* Horizontal line */
  content: "";
  position: absolute;
  transform: translate(-50%, -100%); /* Center positioning */
  width: 1.5vmin; /* Adjust width for horizontal line */
  height: 0vmin; /* Set height for thin line */
  border-top: #040f0f solid 0.5vmin; /* Solid border for horizontal line */
}
  
.inhib2 {
  background-color: #E0AFA0; /* White inner circle */
  width: 44vmin; /* Adjust width as needed */
  height: 44vmin; /* Adjust height as needed */
  border-radius: 50%; /* Creates a circular shape */
  position: relative; /* Absolute positioning within the dish */
  z-index: 1;
}

.inhib2::after {
  content: ""; /* Empty content for pseudo-element */
  position: absolute; /* Absolute positioning within the dish */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center positioning */
  background-color: #A1BA89; /* White inner circle */
  width: 12vmin; /* Adjust width as needed */
  height: 12vmin; /* Adjust height as needed */
  border-radius: 50%; /* Creates a circular shape */
}

.radius2-right {
  background-color: #040f0f; /* Adjust line color */
  transform: rotate(90deg); /* Horizontal line */
  height: 0.5vmin; /* Adjust height for horizontal line */
  width: 6vmin; /* Adjust width for horizontal line */
  position: relative; /* Absolute positioning within the dish */
  top: 0%;
  left: 3vmin;
  transform: translate(0%, 0%); /* Center positioning */
  z-index: 2;
}

.radius2-right::after { /* Horizontal line */
  content: "";
  position: absolute;
  left: 100%;
  transform: translate(0%, -33%); /* Center positioning */
  width: 0vmin; /* Adjust width for horizontal line */
  height: 1.5vmin; /* Set height for thin line */
  border-right: #040f0f solid 0.5vmin; /* Solid border for horizontal line */
}

.radius2-up {
  background-color: #040f0f; /* Adjust line color */
  height: 6vmin; /* Adjust height for horizontal line */
  width: 0.5vmin; /* Adjust width for horizontal line */
  position: relative; /* Absolute positioning within the dish */
  top: 3vmin;
  left: 0%;
  transform: translate(0%, -100%); /* Center positioning */
  z-index: 2;
}

.radius2-up::after { /* Horizontal line */
  content: "";
  position: absolute;
  transform: translate(-50%, -100%); /* Center positioning */
  width: 1.5vmin; /* Adjust width for horizontal line */
  height: 0vmin; /* Set height for thin line */
  border-top: #040f0f solid 0.5vmin; /* Solid border for horizontal line */
}