@font-face{
    font-family:"cool";
    src:url("https://files.catbox.moe/141rvu.ttf") format("truetype");
}
@font-face {
    font-family: "rascal";
    src: url("https://file.garden/Z61J-TerTUbr0Yw4/fonts/RASCAL__.TTF") format("truetype");
}

@font-face {
  font-family: "pc98";
  src: url("https://files.catbox.moe/i0ns2d.ttf");
}

body{

    margin:0;
    width:100vw;
    height:100vh;

    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#ffdbe0;
    background-image:url("https://littl3nana.neocities.org/images/IMG_6132.JPG");
    background-size:15%;

    font-family:"cool";
    color:#fe84b3;

    cursor:url(https://64.media.tumblr.com/c7e560152c5ca73532b1aee775a30cae/tumblr_inline_mzo3kdb7md1r63cto.png),auto;
}

#float{

    position:absolute;

    top:25px;
    left:30px;
  line-height: 70px;
    animation:floating 3s ease-in-out infinite;
}

@keyframes floating{

0%{transform:translateY(0);}
50%{transform:translateY(15px);}
100%{transform:translateY(0);}

}

h2{

  font-size:40px;

text-shadow:
-1px 0 #fff,
0 1px #fff,
1px 0 #fff,
0 -1px #fff;

color:#ffbfe2;

filter:
drop-shadow(-1px 1px 1px white)
drop-shadow(-1px -1px 1px white)
drop-shadow(1px 2px 2px white)
drop-shadow(1px -2px 2px #FFA6D8);

}

.diff{

color:#dbeead;

}
.photobooth{

position:relative;

width:1100px;
height:700px;

}

.frame{

transform:scaleX(1.2);

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:contain;

z-index:1;

pointer-events:none;

}


.gallery{

position:absolute;

inset:0;

z-index:2;

}


.foto{

position:absolute;

}


/* Rosa */
.foto1{

width:150px;
left:750px;
top:180px;
}

/* Conejo */
.foto2{

width:180px;
left:650px;
top:120px;
}

/* Reja */
.foto3{

width:180px;
left:170px;
top:270px;

}

/* Dientes */
.foto4{

width:180px;
left:120px;
top:100px;
}

/* Gato */
.foto5{

width:150px;
left:290px;
top:200px;
}

/* Trebol */
.foto6{

width:150px;
left:530px;
top:410px;
}

/* Carpeta */
.foto7{

width:180px;
left:777px;
top:60px;
}

/* Cassette */
.foto8 {
    width: 160px;
    left: 480px;
    top: 320px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.foto8.playing {
    animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}
#musicPopup {
    position: absolute;

    left: 580px;
    top: 250px;
    
   opacity:0;
    transition:.3s;

    pointer-events:none;
    z-index:999;

}

#musicPopup.show {
    opacity: 1;
}

#musicPopup img{
    width:180px;   /* tamaño de la burbuja */
    display:block;
       height: auto;
}

#musicPopup span{

    position:absolute;

    top:65px;
    left:45%;

    transform:translateX(-50%);

    width:90px;

    font-family: "pc98";

    font-size:12px;

    color:#3D0A0A;

    line-height:1.2;
}

/* Alas */

.wings{

position:absolute;

inset:0;

z-index:3;

pointer-events:none;

}

.left-wing,
.right-wing{

position:absolute;

width:150px;

top:180px;

}

.left-wing{

left:-150px;

transform-origin:right center;

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

}

.right-wing{

right:-150px;

transform-origin:left center;

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

}

@keyframes flapLeft{

0%,100%{

transform:rotate(-8deg);

}

50%{

transform:rotate(-18deg);

}

}

@keyframes flapRight{

0%,100%{

transform:rotate(8deg);

}

50%{

transform:rotate(18deg);

}

}

/* -------------------------- */
.dot-angel {
    position: absolute;
    right: 5px;
    top: 200px;
    font-size: 8px;
    line-height: 1;
    white-space: pre;
}
.menu{

position:absolute;

right:260px;

top:150px;

display:flex;

gap:40px;

z-index:5;
 
font-family: "cool";
 
font-size:30px;

}

.menu a{

text-decoration:none;
  
color: rgba(255,255,255,0.15);
  
text-shadow:
1px 1px 0 rgba(255,255,255,0.35),
-1px -1px 0 rgba(0,0,0,0.15);
  
transition:.2s;

}

.menu a:hover{

transform:scale(1.08);

}

.footer{

position:absolute;

bottom:20px;

right:30px;

font-family: "rascal";
 
font-size:22px;

text-align:right;
 
line-height:1.3;

}

.footer a{

color:#B1E7A9;
text-decoration:none;
font-family: "rascal";
line-height: 1.3rem;  
font-size: 22px;
}