@import url('https://fonts.googleapis.com/css2?family=Rubik+Burned&family=Sue+Ellen+Francisco&display=swap');

/* -------------------- BODY -------------------- */

body{
    margin:0;
    min-height:100vh;
    overflow:hidden;
    background-color:#131313;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
}

/* -------------------- FONDOS -------------------- */

.bg0{
    background:#131313;
}

.bgtaller{
   background:#131313;
}

/* -------------------- CONTENEDORES -------------------- */

.container-fluid{
    position:relative;
    width:100%;
    height:100vh;
    padding:0;
}

a{
    text-decoration:none;
    color:inherit;
}

/* -------------------- TEXTO -------------------- */

.txt{

    position:absolute;

    margin:0;

    color:white;
    font-size:40px;

    user-select:none;

    transition:.3s ease;

    text-shadow:
        -3px -3px 0 #000,
         3px -3px 0 #000,
        -3px  3px 0 #000,
         3px  3px 0 #000;
}

.txt:hover{

    transform:scale(1.35);

    animation:arcoiris 6s linear infinite;

    z-index:999;

}


.txt-oculto{
    color:transparent;
    text-shadow:none;
}


/* -------------------- FUENTES -------------------- */

.f-sue{
  font-family: "Sue Ellen Francisco", cursive;
  font-weight: 400;
  font-style: normal;

}

.f-rubik{

    font-family:"Rubik Burned", cursive;

}

/* -------------------- POSICIONES -------------------- */

.pos-celular{

    top:63%;
    left:30%;
    transform:rotate(-8deg);

}

.pos-libro{
    position:absolute;
    top:45%;
    left:68%;
    transform:rotate(6deg);

}

.pos-pc{
    position:absolute;
    top:45%;
    left:48%;
    transform:rotate(-12deg);
    font-size:70px;

}

.pos-escritorio{

    top:5%;
    left:46%;
    transform:rotate(4deg);
      font-size:50px;

}

.pos-basura{

    top:80%;
    left:65%;
    transform:rotate(4deg);
     font-size:20px;

}

/* pantalla inicial */

.pos-enter{

    top:60%;
    left:30%;
    transform:rotate(4deg);

}

/* -------------------- TOOLTIP -------------------- */

.txt:hover::after{

    content:attr(data-autor);

    position:absolute;

    left:50%;
    top:100%;

    transform:translateX(-50%);

    margin-top:10px;

    padding:8px 12px;

    background:black;

    color:white;

    border-radius:8px;

    font-size:18px;

    font-family:monospace;

    white-space:nowrap;

}

/* -------------------- ANIMACIÓN -------------------- */

@keyframes arcoiris{

    0%   { color:#ff0000; }
    16%  { color:#ff8000; }
    33%  { color:#ffff00; }
    50%  { color:#00ff00; }
    66%  { color:#00ffff; }
    83%  { color:#0000ff; }
    100% { color:#ff00ff; }

}

/* -------------------- IMAGEN -------------------- */
.img-esc{
    position:absolute;

    top:50%;
    left:50%;

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

    width:900px;
    max-width:90vw;
}


.img-celu{
    position:absolute;

    top:50%;
    left:50%;

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

    width:300px;
    max-width:90vw;
}


.img-libro{
    position:absolute;

    top:50%;
    left:50%;

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

    width:1500px;

}
/* -------------------- DIBUJOS BASURA -------------------- */

.item-trash{
    position:absolute;
    display:block;
    transition:.25s ease;
    cursor:pointer;
}

.item-trash:hover{
    transform:scale(1.03) rotate(0deg);
    z-index:999;
}

/* Tooltip */

.item-trash:hover::after{

    content:attr(data-autor);

    position:absolute;

    left:50%;
    top:100%;

    transform:translateX(-50%);

    margin-top:10px;

    padding:8px 12px;

    background:black;
    color:white;

    border-radius:8px;

    font-size:18px;
    font-family:monospace;

    white-space:nowrap;

    z-index:9999;
}

/* Imagen */

.img-trash{
    display:block;
    width:100%;
    height:auto;
}

/* Posiciones */

.trash1{
    width:420px;
    top:5%;
    left:20%;
    transform:rotate(-8deg);
}

.trash2{
    width:300px;
    top:10%;
    left:55%;
    transform:rotate(6deg);
}

.trash3{
    width:350px;
    top:48%;
    left:35%;
    transform:rotate(-4deg);
}

.trash4{
    width:270px;
    top:55%;
    left:62%;
    transform:rotate(9deg);
}


/* -------------------- ICONOS -------------------- */

.icon-libro{
    position:absolute;

    top:90%;
    left:47%;

    width:120px;
}

.icon-pc{
    position:absolute;

    top:88%;
    left:92%;

    width:120px;
     z-index:1;

}

.icon-celular{
    position:absolute;

    top:85%;
    left:47%;

    width:120px;
     z-index:1;

}

.icon-cel-pc{
    position:absolute;

    top:88%;
    left:1%;

    width:120px;
     z-index:1;

}

.icon-cel-libro{
    position:absolute;

    top:5%;
    left:93%;

    width:120px;
     z-index:1;

}

.icon-cel-trash{
    position:absolute;

    top:5%;
    left:93%;

    width:120px;
     z-index:1;

}




.icon-puerta{
    position:absolute;

    top:90%;
    left:49%;

    width:50px;
}

.icon-emoji{
    position:absolute;

    top:20%;
    left:12%;

    width:90px;
}

#miImagen{
    display:block;
    margin:auto;
    transform-origin:center center;
    transition:transform 0.1s ease;
    cursor:grab;
    user-select:none;
}

.nota{
    position:absolute;
    font-family:"Sue Ellen Francisco", cursive;
    color:#2d2d2d;
    line-height:1.2;
    max-width:240px;
     font-size:42px;
}

.nota1{
    top:22%;
    left:17%;
    transform:rotate(-2deg);
}

.nota2{
    top:65%;
    left:75%;
    transform:rotate(3deg);
}

.nota3{
    top:60%;
    left:15%;
    transform:rotate(-5deg);
}

.nota4{
    top:15%;
    left:60%;
}

.nota5{
    top:20%;
    left:60%;
}

.nota6{
    top:75%;
    left:55%;
    transform:rotate(1deg);
}

.nota7{
    top:15%;
    left:35%;
}

.nota8{
    top:20%;
    left:35%;
}