@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;
}
body {
    background-color: #f7f1e3; /* cream-white */

    background-image:
        linear-gradient(rgba(255, 154, 23, 0.25) 3px, transparent 2px),
        linear-gradient(90deg, rgba(255, 170, 60, 0.25) 3px, transparent 2px);

    background-size: 50px 50px;

    animation: moveGrid 12s linear infinite;
}

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

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
}


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


/* ITEMS CLICKABLES EFECTOS */

.imgtxt span, .nintendo span {
  text-align: center;
  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, .nintendo:hover span, .nintendo:focus span {
  opacity: 1;
}

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

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

/*  ITEMS */ 

.ovni {
  transform: rotate(10deg);
  position: absolute;
    top: 466px;   /* ajusta estos valores */
    left: 140px;  /* ajusta estos valores */
    z-index: 10;
}


/* TIRTIAS */

.sonictiritas {
    position: absolute;
    top: 500px;
    left: -200px;
    z-index: 10;
}

.sonictiritas > img:first-child {
    transition: transform 0.25s ease;
}

.sonictiritas .bandage {
    z-index: 9;
    position: absolute;
    top: 40px;
    right: -50px;

    opacity: 0;
    transform: rotate(-20deg) translateY(20px);

    transition: all 0.25s ease;
    pointer-events: none;
}

.sonictiritas:hover > img:first-child {
    transform: rotate(-15deg);
}

.sonictiritas:hover .bandage {
    opacity: 1;
    transform: rotate(120deg) translateY(-30px);
}


/* PERFUME */


.perfume {
  transform: rotate(-10deg);
  position: absolute;
    bottom: 100px;   /* ajusta estos valores */
    left: -10px;  /* ajusta estos valores */
    z-index: 10;
}

.perfume span{
  transform: rotate(10deg);
  top: 40px;
  left: 5px;
  font-size: 1.9rem;
}

/* PELOTA */
.ball {
  position: absolute;
    bottom: 100px;   /* ajusta estos valores */
    right: -10px;  /* ajusta estos valores */
    z-index: 10;
}

.ball span{
  font-size: 1.8rem;
}

.ball  {
    display: inline-block;
}

.ball.jump  {
    animation: jump 0.5s ease;
}

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


/* SKETCHBOOK */
.sketchbook {
  position: absolute;
  transform: rotate(15deg);
    bottom: -100px;   /* ajusta estos valores */
    right: -250px;  /* ajusta estos valores */
    z-index: 10;
}



/* BATERÍA PORTÁTIL*/
.poweradd {
  position: absolute;
    top: 50px;   /* ajusta estos valores */
    left: -250px;  /* ajusta estos valores */
    z-index: 10;
}

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


/* FLECHA INDEX*/

.arrow {
    position: fixed;
    left: 20px;
    top: 5px;
     z-index: 9999;
}

.arrow img {
    transform: rotate(60deg);
    transition: transform 0.2s ease;
     filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.3));
}

.arrow img:hover {
    transform: rotate(60deg) scale(1.1);
}


/* NINTENDO 3DS */
.nintendo {
    position: fixed;
    top: 90px;
    right: 70px;
    width: 300px;
    height: 300px; /* adjust */
    background-image: url("https://file.garden/ai_j0FB-2xOPAAOo/assets/backpack/nds1.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 20;
}

.nintendo:hover {
    background-image: url(https://file.garden/ai_j0FB-2xOPAAOo/assets/backpack/nds2.png);
}

.nintendo {
    position: fixed;
    top: 90px;
    right: 70px;
    width: 300px;
    height: 300px;
    background-image: url("https://file.garden/ai_j0FB-2xOPAAOo/assets/backpack/nds1.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 999;
    background-size: contain ;
    display: inline-block;
    background-position: center;
}

.nintendo span {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: white;
    text-align: center;

    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);
}

.nintendo:hover span {
    opacity: 1;
}


/* WIRE HEADPHONES */
.wireheadphones {
  position: absolute;
    bottom: 110px;   /* ajusta estos valores */
    left: -250px;  /* ajusta estos valores */
    z-index: 10;
}

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

/* VBALLS  */
.vballkeychains {
  position: absolute;
    top: 60px;   /* ajusta estos valores */
    left: -20px;  /* ajusta estos valores */
    z-index: 10;
}

.vballkeychains span{
  font-size: 1.8rem;
}

/* OSWALDO  */
.oswaldo {
  position: absolute;
    top: 60px;   /* ajusta estos valores */
    right: 110px;  /* ajusta estos valores */
    z-index: 10;
}

.oswaldo span{
  font-size: 1.8rem;
}

/* PENGU  */
.pengu {
  position: absolute;
    top: 160px;   /* ajusta estos valores */
    right: -51px;  /* ajusta estos valores */
    z-index: 10;
}

.pengu span{
  font-size: 1.8rem;
}