div.at-container {
    display: flex;
  
  }
  
  #header {
    color: #4f2037;
    font-weight: bold;
    font-size: 3vw;
    justify-content: center;
    text-decoration-color: #4f2037;
    position: relative;
    align-items: center;
    margin-left: 15%;
    padding-top: 2%;
  }
  
  button {
    padding: 10px 20px;
    background-color: rgb(228, 109, 155);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2vw;
    margin-bottom: 20px;
    margin-top: 10px; /* Adjust the top margin as needed */
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  
  
  /* chamber img */
  img.centered {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
  
  }
  
  
  
  /* waste water */
  .color-overlay {
    position: absolute;
    top: 26.5%;
    left: 27.3%;
    width: 16.7%;
    height: 45%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    z-index: 1;
    background-color: rgb(73, 65, 31);
    
  }
  
  /* catholyte pottassium permaganate */
  .color-overlay1 {
    position: absolute;
    top: 26.5%;
    left: 44%;
    width: 18.5%;
    height: 45%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:#660066;
    opacity: 0.5;
    z-index: 1;
    display: none;
  }
  
  /*water catholyte*/
  .color-overlay3 {
    position: absolute;
    top: 26.5%;
    left: 44%;
    width: 18.5%;
    height: 45%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #DEF4FC;
    opacity: 0.6;
    z-index: 1;
    display: none;
  }
  
  /* agar */
  .color-overlay2 {
    position: absolute;
    top: 6%;
    left: 44%;
    width: 2.3%;
    height: 65.6%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #c5b46e;
    opacity: 0.5;
    z-index: 1;
  }
  /*biofilm low*/
  
  .biofilm-overlay {
    position: absolute;
    left: 38.8%;
    width: 0.8%;
    height: 8%;
    background-color: #1c620b;
    border-radius: 50%;
  }
  
  .biofilm-overlay1 {
    top: 27%;
  }
  
  .biofilm-overlay2 {
    top: 35%;
  }
  
  .biofilm-overlay3 {
    top: 43%;
  }
  
  .biofilm-overlay4 {
    top: 51%;
  }
  .biofilm-overlayMedium1 {
     top: 27.5%;
     left:38%;
  }
  
  .biofilm-overlayMedium2 {
    top: 35%;
    left:38%;
  }
  
  .biofilm-overlayMedium3 {
    top: 43%;
     left:38%;
  }
  
  .biofilm-overlayMedium4 {
    top: 26%;
     left:37.2%;
  }
  .biofilm-overlayMedium5 {
    top: 50%;
     left:38%;
  }
  .biofilm-overlayMedium6 {
    top: 42%;
     left:37.2%;
  }
  .biofilm-overlayMedium7 {
    top: 33.2%;
      left:37.2%;
  }
  .biofilm-overlayMedium8 {
    top: 51%;
     left:37.2%;
  }
  .biofilm-overlayMedium9 {
    top: 51%;
     left:37.2%;
  }
  .biofilm-overlayHigh1 {
    top: 27%;
     left:36.4%;
  }
  
  .biofilm-overlayHigh2 {
    top: 35%;
   left:36.4%;
  }
  
  .biofilm-overlayHigh3 {
    top: 43%;
    left:36.4%;
  }
  
  .biofilm-overlayHigh4 {
    top: 51%;
    left:36.4%;
  }
  .biofilm-overlayHigh5 {
    top: 53%;
    left:35.6%;
  }
  .biofilm-overlayHigh6 {
    top: 36%;
    left:35.6%;
  }
  .biofilm-overlayHigh7 {
    top: 28%;
    left:35.6%;
  }
  .biofilm-overlayHigh8 {
    top: 44.2%;
    left:35.6%;
  }
  /* overlay1 and two text */
  .overlay-text1 {
  
    font-size: 1.5vw;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px;
    width: 80%;
    text-align: center;
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translate(-50%, -50%);
  
  }
  
  
  .overlay-text2 {
    font-size: 1.5vw;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px;
    width: 80%;
    text-align: center;
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  
  
  
  
  
  
  .commonAnode-container {
    position: absolute;
    top: 22%;
    left: 39.5%;
    width: 3%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8;
  }
  
  .commonAnode-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  
  .commonAnodeFar-container{
    position: absolute;
    top: 22%;
    left: 30.5%;
    width: 3%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8;
  }
  .commonAnodeFar-container img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  
  .commonAnodeNear-container {
    position: absolute;
    top: 22%;
    left: 40.8%;
    width: 3%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8;
  }
  
  .commonAnodeNear-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  /**/
  
  .commonAnodeDistance4X-container {
    position: absolute;
    top: 22%;
    left: 27%;
    width: 18%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8;
  }
  
  .commonAnodeDistance4X-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  
  .commonAnodeDistance2X-container {
    position: absolute;
    top: 22%;
    left: 32%;
    width: 8%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8;
  }
  
  .commonAnodeDistance2X-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
   display:none;
  }
  .commonCathode-container {
    position: absolute;
    top: 22%;
    left: 48.2%;
    width: 3%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8
  }
  
  .commonCathode-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  /*cathode far*/
  .commonCathodeFar-container{
    position: absolute;
    top: 22%;
    left: 56.2%;
    width: 3%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8
  }
  .commonCathodeFar-container img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
   /* display: none;*/
  }
  
  .commonCathodeNear-container {
    position: absolute;
    top: 22%;
    left: 46.5%;
    width: 3%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8
  }
  
  .commonCathodeNear-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  
  
  .commonCathodeDistance2X-container {
    position: absolute;
    top: 22%;
    left: 48%;
    width: 8%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8
  }
  
  .commonCathodeDistance2X-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display:none;
  }
  
  .commonCathodeDistance4X-container {
    position: absolute;
    top: 22%;
    left: 44%;
    width: 18%;
    height: 42%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.8
  }
  
  .commonCathodeDistance4X-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
   display:none;
  }
  .stand_image {
  
    position: absolute;
    display: inline;
    top: -10%;
    left: 29.4%;
    width: 75%;
    height: 80%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
  
  
  }
  
  #stand-image {
    position: absolute;
    width:50.2%;
    height: 35%;
    object-fit: cover;
    top:-4.5%;
    left:-4.5%;
  
  }
  
  /*BULB css*/
  .bulb_image {
    top: -10%;
    left: 4.6%;
    align-items: center;
    justify-content: center;
    text-align: center;
  
  }
  
  #bulbOff-image {
    top: 0;
    width: 5%;
    height: 25%;
    left: 42.2%;
    top: -25.7%;
    filter: grayscale(100%);
    position: absolute;
  
  }
  
  
  #bulbOn-image {
    width: 5%;
    height: 25%;
    left: 42.2%;
    top: -25.7%;
    position: absolute;
    filter: brightness(120%);
    
  }
  /*biofilm*/
  #bulbOnLow-image {
    width: 5%;
    height: 25%;
    left: 42.2%;
    top: -25.7%;
    position: absolute;
    filter: brightness(110%);
    
  }
  #bulbOnMedium-image{
    width: 5%;
    height: 25%;
    left: 42.2%;
    top: -25.7%;
    position: absolute;
    filter: brightness(100%);
  }
  #bulbOnHigh-image{
    width: 5%;
    height: 25%;
    left: 42.2%;
    top: -25.7%;
    position: absolute;
    filter: brightness(90%);
    
  }
  #bulbOn2X-image{
    width: 5%;
    height: 25%;
    left: 42.2%;
    top: -25.7%;
    position: absolute;
    filter: brightness(120%);
    
  }
  
  
  #bulbOn4X-image{
    width: 5%;
    height: 25%;
    left: 42.2%;
    top: -25.7%;
    position: absolute;
    filter: brightness(180%);
    
  }
  .wire_image {
    position: absolute;
    top: -2.9%;
    left: 36.7%;
    width: 10%;
    height: 30%;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
  
  }
  #wire-image {
    position: absolute;
    width: 100%;
    height: 100%;
  
  }
  .wireFar_image{
    position: absolute;
    top: -1.0%;
    left: 27.7%;
    width: 10%;
    height: 28%;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
  
  }
  #wireFar-image{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .wireNear_image {
    position: absolute;
    top: -2.9%;
    left: 38%;
    width: 10%;
    height: 30%;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
  
  }
  #wireNear-image {
    position: absolute;
    width: 100%;
    height: 100%;
  
  }
  .wireDistance2x_image {
    position: absolute;
    top: -2.9%;
    left: 31.6%;
    width: 10%;
    height: 30%;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
  
  }
  #wireDistance2x-image{
    position: absolute;
    width: 100%;
    height: 100%;
  
  }
  .wireDistance4x_image {
    position: absolute;
    top: -2.9%;
    left: 31.6%;
    width: 10%;
    height: 30%;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
  
  }
  #wireDistance4x-image{
    position: absolute;
    width: 100%;
    height: 100%;
  
  }
  .wire2_image {
    position: absolute;
    top: -2.9%;
    left: 38.5%;
    width: 20%;
    height: 30%;
    align-items: center;
    justify-content: center;
  
  
  }
  #wire2-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  
  }
  .wire2Near_image {
    position: absolute;
    top: -2.9%;
    left: 37%;
    width: 20%;
    height: 30%;
    align-items: center;
    justify-content: center;
  
  
  }
  #wire2Near-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  
  }
  .wire2Far_image {
    position: absolute;
    top: -2.8%;
    left: 46.5%;
    width: 20%;
    height: 30%;
    align-items: center;
    justify-content: center;
  
  
  }
  
  #wire2Far-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  
  }
  .wire2Distance2x_image {
    position: absolute;
    top: -2.9%;
    left: 41%;
    width: 20%;
    height: 30%;
    align-items: center;
    justify-content: center;
  
  
  }
  #wire2Distance2x-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  
  }
  .wire2Distance4x_image {
    position: absolute;
    top: -2.9%;
    left: 42%;
    width: 20%;
    height: 30%;
    align-items: center;
    justify-content: center;
  
  
  }
  #wire2Distance4x-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  
  }
  /* Menu Alignment*/
  .main-container {
    position: absolute;
    top: 20%;
    left: 1%;
    width: 80%;
    height: 20%;
  
  }
  
  
  label {
    display: inline-block;
    padding: 0.6em;
    border: 1px solid #ccc;
    text-align: left;
    background-color: #f7f0f0;
    font-weight: bold;
    width: 25%;
    font-size: 1.5vw;
  }
  
  
  .custom-select {
    width: 30%;
    padding: 0.6em;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 1.5vw;
    font-weight: bold;
    background-color: rgb(228, 109, 155);
  }
  
  
  .image-container {
    position: absolute;
    display: inline-block;
    top: 55%;
    
  }
  
  .custom-select option:checked {
    background-color: #ddd;
  }
  
  
  .electron {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymove 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display: none;
  }
  
  .electron::before {
    content: "e-";
    display: block;
    text-align: center;
  }
  
  
  #electron1 {
    left: 40%;
    top: -1%;
    animation-delay: 0s; 
   
  }
  
  #electron2 {
    left: 40%;
    top: -1%;
    animation-delay: 2s; 
  }
  
  #electron3 {
    left: 40%;
    top: -1%;
    animation-delay: 3s; 
  }
  @keyframes mymove {
    0% {
      left: 38%;
    }
    100% {
      left: 52%;
      visibility: hidden;
      opacity:0.1;
    
    }
  }
  .electronNearTop {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveNearTop 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display:none;
  }
  
  .electronNearTop::before {
    content: "e-";
    display: block;
    text-align: center;
  }
  
  
  #electron22 {
    left: 40%;
    top: -1%;
    animation-delay: 0s; 
   
  }
  
  #electron23 {
    left: 40%;
    top: -1%;
    animation-delay: 2s; 
  }
  
  #electron24 {
    left: 40%;
    top: -1%;
    animation-delay: 3s; 
  }
  @keyframes mymoveNearTop {
    0% {
      left: 39%;
    }
    100% {
      left: 50%;
      visibility: hidden;
      opacity:0.1;
    
    }
  }
  .electronFar {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: moveTop 30s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display: none;
  }
  .electronFar::before {
    content: "e-";
    display: block;
    text-align: center;
  }
  #electron10 {
    left: 30%;
    top: -1%;
    animation-delay: 0s; 
   
  }
  
  #electron11 {
    left: 40%;
    top: -1%;
    animation-delay: 2s; 
  }
  
  #electron12 {
    left: 30%;
    top: -1%;
    animation-delay: 3s; 
  }
  
  @keyframes moveTop {
    0% {
      left: 29%;
      
    }
    100% {
      left: 60%;
     
      opacity:0;
    
    }
  }
  .electronNearLeft {
    width: 1%;
    height:4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveNearleft 2s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
     display:none;
  }
  
  .electronNearLeft::before {
    content: "e-";
    display: block;
    text-align: center;
  } 
  
  #electron25 {
    left: 42%;
    top: 30%;  
    animation-delay: 1s; 
  }
  
  #electron26 {
    left:42%;
    top: 30%;   
    animation-delay: 2s; 
  }
  
  #electron27 {
    left:42%;
    top: 30%;   
    animation-delay: 3s;
  }
  
  @keyframes mymoveNearleft {
    0% {
      top: 60%; 
    }
    100% {
      top: 20%;  
       visibility: hidden;
       opacity:0.1;
    }
  }
  .electronNearRight {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;           
    font-weight: bold;
    position: absolute;
    animation: mymoveNearRight 2s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
     display:none;
  }
  
  .electronNearRight::before {
     content: "e-";
    display: block;
    text-align: center;
  }
  
  #electron28 {
    left: 47.5%;
    bottom:30%;  
    animation-delay: 1s; 
  }
  
  #electron29 {
   left: 47.5%;
    bottom: 40%; 
    animation-delay: 2s; 
  }
  
  #electron30 {
  left: 47.5%;
   bottom:30%;
    animation-delay: 3s; 
  }
  
  @keyframes mymoveNearRight  {
    0% {
      top: 20%; 
    }
    100% {
      top: 60%; 
      opacity:0.1;
    }
  }
  .electronFarLeft {
    width: 1%;
    height:4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveFarleft 15s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display: none;
  }
  
  .electronFarLeft::before {
    content: "e-";
    display: block;
    text-align: center;
  } 
  
  #electron13 {
    left: 31.5%;
    top: 30%;  
    animation-delay: 1s; 
  }
  
  #electron14 {
    left: 31.5%;
    top: 30%;   
    animation-delay: 3s; 
  }
  
  #electron15 {
    left: 31.5%;
    top: 30%;   
    animation-delay: 5s;
  }
  
  @keyframes mymoveFarleft {
    0% {
      top: 60%; 
    }
    100% {
      top: 20%;  
       visibility: hidden;
       opacity:0.1;
    }
  }
  
  
  .electron1 {
    width: 1%;
    height:4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymove1 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display: none;
  }
  
  .electron1::before {
    content: "e-";
    display: block;
    text-align: center;
  } 
  
  #electron4 {
    left: 40.25%;
    top: 30%;  
    animation-delay: 1s; 
  }
  
  #electron5 {
    left: 40.2%;
    top: 30%;   
    animation-delay: 3s; 
  }
  
  #electron6 {
    left: 40.2%;
    top: 30%;   
    animation-delay: 5s;
  }
  
  @keyframes mymove1 {
    0% {
      top: 60%; 
    }
    100% {
      top: 20%;  
       visibility: hidden;
       opacity:0.1;
    }
  }
  
  
  .electron2 {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymove2 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display: none;
  }
  
  .electron2::before {
     content: "e-";
    display: block;
    text-align: center;
  }
  
  #electron7 {
    left: 48.9%;
    bottom:30%;  
    animation-delay: 0s; 
  }
  
  #electron8 {
    left: 48.9%;
    bottom: 40%; 
    animation-delay: 2s; 
  }
  
  #electron9 {
    left: 48.9%;
   bottom:30%;
    animation-delay: 4s; 
  }
  
  @keyframes mymove2 {
    0% {
      top: 20%; 
    }
    100% {
      top: 60%; 
      opacity:0.1;
    }
  }
  
  .electronFarRight {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveFarRight 10s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display: none;
  }
  
  .electronFarRight::before {
     content: "e-";
    display: block;
    text-align: center;
  }
  
  #electron16 {
    left: 57%;
    bottom:30%;  
    animation-delay: 1s; 
  }
  
  #electron17 {
    left: 57%;
    bottom: 40%; 
    animation-delay: 3s; 
  }
  
  #electron18 {
    left: 57%;
   bottom:30%;
    animation-delay: 5s; 
  }
  
  @keyframes mymoveFarRight {
    0% {
      top: 20%; 
    }
    100% {
      top: 60%; 
      opacity:0.1;
    }
  }
  @media screen and (max-width: 768px) {
    .electron {
      width: 2%;
      height: 10%;
      font-size: 0.5em;
      text-align: center;
    }
    
  }
  @media screen and (max-width: 768px) {
    .electron1 {
      width: 2%;
      height: 10%;
      font-size: 0.5em;
      text-align: center;
    }
  }
  
  
  @media screen and (max-width: 768px) {
    .electron2 {
      width: 2%;
      height: 10%;
      font-size: 0.5em;
      text-align: center;
    }
    
  }
  /*electron distance 2X*/
  .electronDistance2XTop {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveDistance2XTop 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display:none;
  }
  
  .electronDistance2XTop::before {
    content: "e-";
    display: block;
    text-align: center;
  }
  
  
  #electron31 {
    left: 40%;
    top: -1%;
    animation-delay: 0s; 
   
  }
  
  #electron32 {
    left: 40%;
    top: -1%;
    animation-delay: 2s; 
  }
  
  #electron33 {
    left: 40%;
    top: -1%;
    animation-delay: 3s; 
  }
  @keyframes mymoveDistance2XTop {
    0% {
      left: 33%;
    }
    100% {
      left: 54%;
      visibility: hidden;
      opacity:0.1;
    
    }
  }
  
  .electronDistance2XLeft {
    width: 1%;
    height:4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveDistance2Xleft 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display:none;
  }
  
  .electronDistance2XLeft::before {
    content: "e-";
    display: block;
    text-align: center;
  } 
  
  #electron34 {
    left: 35.5%;
    top: 30%;  
    animation-delay: 1s; 
  }
  
  #electron35 {
    left: 35.5%;
    top: 30%;   
    animation-delay: 3s; 
  }
  
  #electron36 {
    left: 35.5%;
    top: 30%;   
    animation-delay: 5s;
  }
  
  @keyframes mymoveDistance2Xleft {
    0% {
      top: 60%; 
    }
    100% {
      top: 20%;  
       visibility: hidden;
       opacity:0.1;
    }
  }
  
  .electronDistance2XRight {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;           
    font-weight: bold;
    position: absolute;
    animation: mymoveDistance2XRight 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
     display:none;
  }
  
  .electronDistance2XRight::before {
     content: "e-";
    display: block;
    text-align: center;
  }
  
  #electron37 {
    left: 51.8%;
    bottom:30%;  
    animation-delay: 1s; 
  }
  
  #electron38 {
   left: 51.8%;
    bottom: 40%; 
    animation-delay: 2s; 
  }
  
  #electron39 {
  left: 51.8%;
   bottom:30%;
    animation-delay: 3s; 
  }
  
  @keyframes mymoveDistance2XRight  {
    0% {
      top: 20%; 
    }
    100% {
      top: 60%; 
      opacity:0.1;
    }
  }
  /*electron distance 4X*/
  .electronDistance4XTop {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveDistance4XTop 2s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display:none;
  }
  
  .electronDistance4XTop::before {
    content: "e-";
    display: block;
    text-align: center;
  }
  
  
  #electron40 {
    left: 40%;
    top: -1%;
    animation-delay: 0s; 
   
  }
  
  #electron41 {
    left: 40%;
    top: -1%;
    animation-delay: 2s; 
  }
  
  #electron42 {
    left: 40%;
    top: -1%;
    animation-delay: 3s; 
  }
  @keyframes mymoveDistance4XTop {
    0% {
      left: 33%;
    }
    100% {
      left: 54%;
      visibility: hidden;
      opacity:0.1;
    
    }
  }
  .electronDistance4XLeft {
    width: 1%;
    height:4.9%;
    border-radius: 50%;
    background-color: yellow;
    font-weight: bold;
    position: absolute;
    animation: mymoveDistance4Xleft 2s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    display:none;
  }
  
  .electronDistance4XLeft::before {
    content: "e-";
    display: block;
    text-align: center;
  } 
  
  #electron43 {
    left: 35.5%;
    top: 30%;  
    animation-delay: 1s; 
  }
  
  #electron44 {
    left: 35.5%;
    top: 30%;   
    animation-delay: 2s; 
  }
  
  #electron45 {
    left: 35.5%;
    top: 30%;   
    animation-delay: 3s;
  }
  
  @keyframes mymoveDistance4Xleft {
    0% {
      top: 60%; 
    }
    100% {
      top: 20%;  
       visibility: hidden;
       opacity:0.1;
    }
  }
  .electronDistance4XRight {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: yellow;           
    font-weight: bold;
    position: absolute;
    animation: mymoveDistance4XRight 2s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
     display:none;
  }
  
  .electronDistance4XRight::before {
     content: "e-";
    display: block;
    text-align: center;
  }
  
  #electron46 {
    left: 51.8%;
    bottom:30%;  
    animation-delay: 1s; 
  }
  
  #electron47 {
   left: 51.8%;
    bottom: 40%; 
    animation-delay: 2s; 
  }
  
  #electron48 {
  left: 51.8%;
   bottom:30%;
    animation-delay: 3s; 
  }
  
  @keyframes mymoveDistance4XRight  {
    0% {
      top: 20%; 
    }
    100% {
      top: 60%; 
      opacity:0.1;
    }
  }
  .proton {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: rgb(240, 240, 233);
    font-weight: bold;
    position: absolute;
    animation: mymoveproton 5s linear infinite;
    z-index: 2;
    display: flex;
    font-size: 0.5em;
    display: none;
     
  }
  
  .proton::before {
    content: "H+";
    display: block;
    text-align: center;
  }
  
  
  #proton1 {
    left: 45%;
    top: 50%;
    animation-delay: 0s; 
   
  }
  
  
  @keyframes mymoveproton {
    0% {
      left: 40%;
      
    }
    100% {
      left: 50%;
      visibility: hidden;
      opacity:0;
    
    }
  }
  
  
  .protonNear {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: rgb(240, 240, 233);
    font-weight: bold;
    position: absolute;
    animation: mymoveprotonNear 5s linear infinite;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.5em;
    display: none;
  }
  
  .protonNear::before {
    content: "H+";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #proton3 {
    left: 45%;
    top: 50%;
    animation-delay: 0s;
  }
  
  @keyframes mymoveprotonNear {
    0% {
      left: 42%;
    }
    100% {
      left: 47%;
      opacity: 0;
    }
  }
  
  .protonFar {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: rgb(240, 240, 233);
    font-weight: bold;
    position: absolute;
    animation: mymoveprotonFar 15s linear infinite;
    z-index: 2;
    display: flex;
    font-size: 0.5em;
    display: none;
     
  }
  
  .protonFar::before {
    content: "H+";
    display: block;
    text-align: center;
  }
  
  
  #proton2 {
    left: 45%;
    top: 50%;
    animation-delay: 0s; 
   
  }
  
  
  @keyframes mymoveprotonFar {
    0% {
      left: 32%;
      
    }
    100% {
      left: 55%;
      opacity:0;
    
    }
  }
  .protonDistance2X {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: rgb(240, 240, 233);
    font-weight: bold;
    position: absolute;
    animation: mymoveprotonDistance2X  5s linear infinite;
    z-index: 2;
    display: flex;
    font-size: 0.5em;
    display: none;
     
  }
  
  .protonDistance2X::before {
    content: "H+";
    display: block;
    text-align: center;
  }
  
  
  #proton4 {
    left: 45%;
    top: 50%;
    animation-delay: 0s; 
   
  }
  
  
  @keyframes mymoveprotonDistance2X {
    0% {
      left: 40%;
      
    }
    100% {
      left: 50%;
      visibility: hidden;
      opacity:0;
    
    }
  }
  .protonDistance4X {
    width: 1%;
    height: 4.9%;
    border-radius: 50%;
    background-color: rgb(240, 240, 233);
    font-weight: bold;
    position: absolute;
    animation: mymoveprotonDistance4X  2s linear infinite;
    z-index: 2;
    display: flex;
    font-size: 0.5em;
    display: none;
     
  }
  
  .protonDistance4X::before {
    content: "H+";
    display: block;
    text-align: center;
  }
  
  
  #proton5 {
    left: 45%;
    top: 50%;
    animation-delay: 0s; 
   
  }
  
  
  @keyframes mymoveprotonDistance4X {
    0% {
      left: 35%;
      
    }
    100% {
      left: 50%;
      visibility: hidden;
      opacity:0;
    
    }
  }
  @media screen and (max-width: 768px) {
    .proton {
      width: 2%;
      height: 10%;
      font-size: 0.5em;
      text-align: center;
    }
    
  }
  
  @media (max-width: 768px) {
     #header {
      font-size: 5vw;
    }
     label {
      width: 30%;
      font-size: 1.8vw;
      top:20%;
    }
  
    .custom-select {
      width: 40%;
      font-size: 1.8vw;
    }
    .image-container {
      position: absolute;
      display: inline-block;
      top: 55%;
     
    }
    .main-container {
    position: absolute;
    top: 20%;
    left: 1%;
    width: 80%;
    height: 25%;
    
  
  }
  
  }
  
  
  
   @media (min-width: 1025px) {
        #header {
      font-size: 2vw;
    }
     label {
      width: 15%;
      font-size: 1vw;
      top:20%;
    }
  
    .custom-select {
      width: 24%;
      font-size: 1vw;
    }
    .image-container {
      position: absolute;
      display: inline-block;
      top: 55%;
      left:20%;
    }
    .main-container {
    position: absolute;
    top: 20%;
    left: 1%;
    width: 80%;
    height: 22%;
  
  }
  
    
   }