body {
    margin: 0;
    cursor: url('cursor2.png'), auto; /* Cursor personalizado */
    background: url('background.gif') repeat;
    font-family: 'LT Perfume', sans-serif;
}


img, a, .collage-item {
    cursor: url('cursor2.png'), auto;
}
.collage a {
    text-decoration: none;
    cursor: url('cursor2.png'), auto; /* Aplicamos el cursor personalizado a los enlaces */
}
.collage a:hover {
    cursor: url('cursor2.png'), auto; /* Mantener el cursor personalizado */
}
* {
    cursor: url('cursor2.png'), auto; /* Aplica el cursor personalizado a todos los elementos */
}
.container {
    text-align: center;
    padding-top: 30px;
}



.collage {
    position: relative;
    width: 100%;
    height: 490px; /* Ajusta esta altura según sea necesario */
    margin: px 0;
}

.collage-item {
    position: absolute;
}
#titulo {
    top: 30px;
    left: 370px; /* ajustá según tu diseño */
    width: 600px;
}
#armario {
    top: 120px;
    left: 300px;
}

#fotoabu {
    top: 440px;
    left: 350px;
}

#szentek-angyalok {
    top: 250px;
    left: 200px;
}

#cross {
    top: 250px;
    left: 1000px;
}

#cruzchica {
    top: 350px;
    left: 370px;
}

#terayama1 {
    top: 110px;
    left: 600px;
}
#terayama2 {
    top: 250px;
    left: 450px;
}


#art {
    top: 150px;
    left: 800px;
}

#img043 {
    top: 380px;
    left: 600px;
}

#tooth {
    top: 470px;
    left: 860px;
}

#pelo {
    top: 390px;
    left: 930px;
}
/* Nuevas reglas CSS para el estado :hover */
#armario:hover {
    content: url('armario_hover.png');
}
#art:hover {
    content: url('art_hover.png');
}
#szentek-angyalok:hover {
    content: url('szentek-angyalok_hover.png');
}
#img043:hover {
    content: url('img043_hover.png');
}
#terayama1:hover {
    content: url('terayama1_hover.png');
}

#links {
    top: 580px; /* ajustá según tu diseño */
    left: 430px; /* ajustá para centrar */
    white-space: nowrap; /* esto evita que se bajen de línea */
}

.link-item {
    margin: 0 15px;
    text-decoration: none;
    color: black;
    font-size: 30px;
}

.link-item:hover {
    text-decoration: underline;
}

/* Añadir estilo para que los enlaces no tengan subrayado y el cursor se vea como un puntero */
.collage a {
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .collage {
        transform: scale(0.5);
        transform-origin: top left;
        height: 700px;
    
    }
    
}