html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

* {
    cursor: url("cursor.png") 16 16, auto !important;
}
body {
    background: url("background.png") center center / cover no-repeat fixed;
}
#boton-menu {
    width: 700px;

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    cursor: pointer;
}
#boton-menu {
    width: 700px;

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    cursor: pointer;

    transition: transform 0.3s ease;
}

#boton-menu:hover {
    transform: translate(-50%, -50%) scale(1.05);
}


#libro {
    position: fixed;

    width: 1400px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

#monarca {
    position: fixed;

    width: 260px;

    top: 86%;
    left: 15%;

    transform: translate(-50%, -50%) rotate(40deg);
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

#monarca:hover {
    animation: vibrar 0.1s infinite;
}

@keyframes vibrar {
    0% {
        transform: translate(-50%, -50%) rotate(-20deg) translateX(0);
    }

    25% {
        transform: translate(-50%, -50%) rotate(-20deg) translateX(-2px);
    }

    50% {
        transform: translate(-50%, -50%) rotate(-20deg) translateX(2px);
    }

    75% {
        transform: translate(-50%, -50%) rotate(-20deg) translateY(-2px);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-20deg) translateY(2px);
    }
}

#banner {
    position: fixed;

    width: 88px;

    top: 80%;
    left: 33%;

    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));

}

#banner:hover {
    transform: translate(-50%, -50%) scale(1.08);
}



#visitas {
    position: fixed;

    width: 60px;

    top: 79.5%;
    left: 27%;

    transform: translate(-50%, -50%);

    transition: transform 0.2s ease;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));

}

#visitas:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

#santuario {
    position: fixed;

    width: 170px;

    top: 12%;
    left: 46%;

    transform: translate(-50%, -50%);

    transition: transform 0.2s ease;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4));
}

#santuario:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

#librosanto {
    position: fixed;

    width: 1300px;

    top: 55%;
    left: 50%;

    transform: translate(-50%, -50%);
}

#astrolabio {
    position: fixed;

    width: 100px;

    top: 25%;
    left: 94%;

    transform: translate(-50%, -50%);
     filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 1));
}
#astrolabio:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

#escritura {
    position: fixed;

    width: 130px;

    top: 45%;
    left: 69%;

    transform: translate(-50%, -50%);

    transition: transform 0.2s ease;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

#escritura:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

#arte {
    position: fixed;

    width: 130px;

    top: 50%;
    left: 69%;

    transform: translate(-50%, -50%);

    transition: transform 0.2s ease;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

#arte:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

#recursos {
    position: fixed;

    width: 130px;

    top: 55%;
    left: 69%;

    transform: translate(-50%, -50%);

    transition: transform 0.2s ease;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

#recursos:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

#pasatiempos {
    position: fixed;

    width: 130px;

    top: 60%;
    left: 69%;

    transform: translate(-50%, -50%);

    transition: transform 0.2s ease;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

#pasatiempos:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

#extras {
    position: fixed;

    width: 130px;

    top: 65%;
    left: 69%;

    transform: translate(-50%, -50%);

    transition: transform 0.2s ease;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
}

#extras:hover {
    transform: translate(-50%, -50%) scale(1.08);
}