.molecule {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    animation: float 2s infinite alternate ease-in-out;
}
.atom {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #1E90FF, #034269);
    border-radius: 50%;
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.3), inset -3px -3px 8px rgba(255, 255, 255, 0.5);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: Arial, sans-serif;
}
/* H+ Ion (Updated Blue Shade) */
.h-plus {
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #01070b, #2874A6);
    border-radius: 50%;
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.3), inset -3px -3px 8px rgba(255, 255, 255, 0.5);
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: Arial, sans-serif;
    animation: float 2s infinite alternate ease-in-out;
}
.o2{
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #FF6347, #8B0000);
}

/* Electron */
.electron {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    position: absolute;
    background: radial-gradient(circle at 30% 30%, #FFD700, #FFA500);
    border-radius: 50%;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    font-family: Arial, sans-serif;
    animation: float 2s infinite alternate ease-in-out;
}
.atom:first-child {
    transform: translateX(8px);
}
.atom:last-child {
    transform: translateX(-8px);
}
.hydrogen {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #1E90FF, #034269);
    border-radius: 50%;
    box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
    position: absolute;  /* Ensure it can be moved inside molecule */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: Arial, sans-serif;
}
.oxygen {
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #FF6347, #8B0000);
    border-radius: 50%;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: Arial, sans-serif;
}
/* Use nth-child() to correctly target hydrogen atoms */
.molecule .hydrogen:nth-child(1) {
    left: -10px;
    top: -20px;
    transform: rotate(-20deg);
    z-index: -20;
}
.molecule .hydrogen:nth-child(2) {
    right: -15px;
    top: -20px;
    transform: rotate(20deg);
    z-index: 20;
}