/* DNA Helix Animation */

.dna-helix {

    position: relative;

    width: 200px;

    height: 400px;

    margin: 0 auto;

    perspective: 1200px;

    transform-style: preserve-3d;

}

.base-pair {

    position: absolute;

    width: 100%;

    height: 20px;

    animation: rotate 8s linear infinite;

    transform-style: preserve-3d;

}

.base {

    position: absolute;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    color: white;

    text-shadow: 0 0 3px rgba(0,0,0,0.5);

    box-shadow: 0 0 15px rgba(0,0,0,0.2);

}

.left-base {

    left: 35px;

    background: #FF0066;

    animation: pulse 3s ease-in-out infinite;

    filter: brightness(1.1);

}

.right-base {

    right: 35px;

    background: #00B7FF;

    animation: pulse 3s ease-in-out infinite;

    filter: brightness(1.1);

}

.base-connector {

    position: absolute;

    left: 50%;

    width: 90px;

    height: 3px;

    background: linear-gradient(90deg, 

        rgba(255, 0, 102, 0.8), 

        rgba(255, 255, 255, 0.3) 50%,

        rgba(0, 183, 255, 0.8)

    );

    transform: translateX(-50%);

    box-shadow: 0 0 8px rgba(0,0,0,0.15);

}

@keyframes rotate {

    0% { transform: rotateY(0deg) translateZ(20px); }

    100% { transform: rotateY(360deg) translateZ(20px); }

}

@keyframes pulse {

    0% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }

    50% { transform: scale(1.15); opacity: 1; filter: brightness(1.3); }

    100% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }

}