@font-face {
  font-family: "Cordata"; 
  src: url('https://file.garden/ai_j0FB-2xOPAAOo/assets/SHPinscher-Regular.otf') format('opentype');
}

body {
	color: black;
	font-family: "Cordata", monospace;
}

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}


/* ITEMS CLICKABLES EFECTOS */

.imgtxt span, .imgtxtcajon span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 2.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}

.imgtxt:hover span, .imgtxt:focus span, .imgtxtcajon:hover span, .imgtxtcajon:focus span {
  opacity: 1;
}

.imgtxt:hover img, .imgtxt:focus img {
  transform: rotate(2deg);
}
	

.relative {
    position: relative;
    width: 1200px;
    height: 600px;
}


/* ESCRITORIO */
.desk {
  position: absolute;
    inset: 0;
    top: 150px;   /* ajusta estos valores */
    left: 200px;  /* ajusta estos valores */
    z-index: 10;
}

/* ESTANTERIA */
.estanteria {
  position: absolute;
    top: 250px;   /* ajusta estos valores */
    left: -330px;  /* ajusta estos valores */
    z-index: 10;
}

/* TV */
.tv {
  position: absolute;
    top: 205px;   /* ajusta estos valores */
    left: 610px;  /* ajusta estos valores */
    z-index: 10;
}


.tv span{
  font-size: 3.9rem;
}

/* PASTA */

.pasta {
  position: absolute;
    top: 300px;   /* ajusta estos valores */
    left: 410px;  /* ajusta estos valores */
    z-index: 10;
}



.video {
  position: absolute;
    top: 237px;   /* ajusta estos valores */
    left: 670px;  /* ajusta estos valores */
    z-index: 10;
}

/* CEREBRO */
.brain {
  position: absolute;
    top: 85px;   /* ajusta estos valores */
    left: -67px;  /* ajusta estos valores */
    z-index: 10;
}

/* PINCELES */
.pinceles {
  position: absolute;
    top: 145px;   /* ajusta estos valores */
    left: -150px;  /* ajusta estos valores */
    z-index: 9999999                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ;
}

.pinceles span {
  z-index: 999999;
  font-size: 1.6rem
}

/* BEAR / OSO */
.bear {
  transform: scaleX(-1);
  position: absolute;
    top: 145px;   /* ajusta estos valores */
    left: -320px;  /* ajusta estos valores */
    z-index: 10;
}

.bear :hover img{
  transform: rotate(-4deg);
}

.bear span{
  transform: scaleX(-1);
  top: 25px;
  left: 70px;
}


/* CASITA */
.house {
  position: absolute;
    top: 260px;   /* ajusta estos valores */
    left: -250px;  /* ajusta estos valores */
    z-index: 10;
}

.house span{
  font-size: 1.9rem;
}

/* ÁRBOLES */
.tree {
  position: absolute;
    top: 310px;   /* ajusta estos valores */
    left: -306px;  /* ajusta estos valores */
    z-index: 10;
}

.tree2 {
  position: absolute;
    top: 310px;   /* ajusta estos valores */
    left: -160px;  /* ajusta estos valores */
    z-index: 10;
}


/* MOCHILA */
.mochila {
  position: absolute;
    top: 488px;   /* ajusta estos valores */
    left: 818px;  /* ajusta estos valores */
    z-index: 10;
    rotate: -10deg;
}

.mochila span{
  rotate: 10deg;
}

/* CAJÓN */
.cajon {
  position: absolute;
    top: 362px;   /* ajusta estos valores */
    left: 269.5px;  /* ajusta estos valores */
    z-index: 10;
}

.cajon span{
    top: 40px;   /* ajusta estos valores */
    left: 60px;  /* ajusta estos valores */
    z-index: 10;
}

.imgtxtcajon:hover img, .imgtxtcajon:focus img {
  transform:translateX(-7px) translateY(7px)
}

.imgtxtcajon:hover img,
.imgtxtbrain:focus img {
  transform: translateX(-7px) translateY(7px);
  filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
}

/* PAPELERA*/
.trash {
  position: absolute;
    top: 490px;   /* ajusta estos valores */
    left: 140px;  /* ajusta estos valores */
    z-index: 10;
}

/* CANASTA */

.canasta {
  position: absolute;
    top: 380px;   /* ajusta estos valores */
    left: 175px;  /* ajusta estos valores */
    z-index: 10;
}

/* PINGU */
.penguin {
  position: absolute;
    top: 515px;   /* ajusta estos valores */
    left: -330px;  /* ajusta estos valores */
    z-index: 10;
}


.penguin {
    cursor: pointer;
}

.jump {
    animation: jump 0.3s ease;
}

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

/* PÓSTER */
.poster {
  position: absolute;
    top: -50px;   /* ajusta estos valores */
    left: 50px;  /* ajusta estos valores */
    z-index: 10;
}

.poster span{
  font-size: 3.9rem;
}

/* LIBRETAS */
.libretas {
  position: absolute;
    top: 267px;   /* ajusta estos valores */
    left: -10px;  /* ajusta estos valores */
    z-index: 10;
}

.libretas span{
  font-size: 1.9rem;
}

/* NINTENDO */
.nintendo {
  position: absolute;
    top: 380px;   /* ajusta estos valores */
    left: -10px;  /* ajusta estos valores */
    z-index: 10;
}

.nintendo span{
  font-size: 2.8rem;
}

/* MUSICA BOOMBOX */
.boombox {
  position: absolute;
    top: 490px;   /* ajusta estos valores */
    left: -120px;  /* ajusta estos valores */
    z-index: 10;
}

.boombox span{
  font-size: 4.1rem;
}


/* ANTS */
.ants {
  position: absolute;
   transform: scaleX(-1);
    top: 710.3px;   /* ajusta estos valores */
    left: 67px;  /* ajusta estos valores */
    z-index: 10;
}

.ants2 {
  position: absolute;
    transform:rotate(-90deg) ;
    top: 645px;   /* ajusta estos valores */
    left: -55px;  /* ajusta estos valores */
    z-index: 10;
}

/* CORAZON */
.heart {
  position: absolute;
    z-index: 9;
    transform: rotate(-20deg);
    top: 670px;   /* ajusta estos valores */
    left: -16px;  /* ajusta estos valores */
}

.heart span{
  transform: rotate(20deg);
  left: 20px;
  top: 10px;
}

/* WINDOW */
.window {
  position: absolute;
    top: -90px;   /* ajusta estos valores */
    left: 1200px;  /* ajusta estos valores */
}

.window span{
  font-size: 5.1rem;
}

/* DOOR */
.door {
  position: absolute;
    bottom: 127px;   /* ajusta estos valores */
    left: -280px;  /* ajusta estos valores */
    z-index: 20;
}

.door span{
  font-size: 2.1rem;
}



/* moving background */

body {
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: moveGrid 10s linear infinite;
}

@keyframes moveGrid {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 40px;
    }
}