.mercury-orb-wrapper {
    position: fixed;
    z-index: 100;
    pointer-events: none;
}

@media (min-width: 1025px) {
    .mercury-orb-wrapper {
        top: 12%;
        right: 8%;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .mercury-orb-wrapper {
        top: 15%;
        right: 5%;
    }
}

@media (max-width: 768px) and (min-width: 600px) {
    .mercury-orb-wrapper {
        top: 20%;
        right: 8%;
    }
}

@media (max-width: 599px) {
    .mercury-orb-wrapper {
        top: 28%;
        right: 5%;
    }
}

@media (max-width: 374px) {
    .mercury-orb-wrapper {
        top: 32%;
        right: 3%;
    }
}

.mercury-orb {
    position: relative;
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 40px rgba(150, 170, 200, 0.6)) drop-shadow(0 20px 50px rgba(100, 130, 160, 0.4));
}

@media (max-width: 1024px) {
    .mercury-orb {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 768px) {
    .mercury-orb {
        width: 85px;
        height: 85px;
        filter: drop-shadow(0 0 25px rgba(150, 170, 200, 0.5)) drop-shadow(0 15px 40px rgba(100, 130, 160, 0.3));
    }
}

@media (max-width: 480px) {
    .mercury-orb {
        width: 70px;
        height: 70px;
        filter: drop-shadow(0 0 15px rgba(150, 170, 200, 0.4));
    }
}

@keyframes orbFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

.mercury-orb-wrapper {
    animation: orbFloat 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mercury-orb-wrapper {
        animation: none !important;
    }
}

@media print {
    .mercury-orb-wrapper {
        display: none !important;
    }
}