/* =====================================
      QUARTO VIRTUAL
====================================== */

body {
    margin: 0;
    background: #000;
    overflow: hidden;
    font-family: Verdana, Arial, sans-serif;
    cursor: crosshair;
}

/* =====================================
      ESTRELAS
====================================== */

#stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(#66ffff 1px, transparent 1px),
        radial-gradient(#ffff99 1px, transparent 1px);
    background-size:
        180px 180px,
        260px 260px,
        320px 320px;
    animation: starsMove 120s linear infinite;
    opacity: .45;
}

/* =====================================
      QUARTO
====================================== */

#room {
    position: relative;
    width: 1100px;
    height: 700px;
    margin: 40px auto;
}

/* imagem do quarto */
#background {
    width: 100%;
    display: block;
    border: 4px solid white;
    box-shadow:
        0 0 40px cyan,
        0 0 90px blue;
}

/* =====================================
      OBJETOS
====================================== */

.object {
    position: absolute;
    transition: .25s;
}

.object img {
    display: block;
    user-select: none;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Isso faz a imagem caber no espaço */
    border-radius: 4px; /* Opcional */
}

.object:hover {
    transform:
        scale(1.08)
        rotate(-2deg);
    filter:
        drop-shadow(0 0 20px cyan)
        brightness(1.15);
}

/* =====================================
      TAMANHOS DOS OBJETOS (ADICIONE ISSO!)
====================================== */

.computer {
    width: 170px;
    height: 120px;
    top: 70px;
    left: 700px;
}

.guitar {
    width: 90px;
    height: 230px;
    top: 20px;
    left: 180px;
}

.camera {
    width: 120px;
    height: 120px;
    top: 430px;
    left: 60px;
}

.books {
    width: 140px;
    height: 140px;
    top: 180px;
    left: 870px;
}

.vhs {
    width: 130px;
    height: 90px;
    top: 470px;
    left: 610px;
}

.toys {
    width: 120px;
    height: 120px;
    top: 520px;
    left: 260px;
}

.airplane {
    width: 150px;
    height: 70px;
    top: 100px;
    left: 930px;
}

/* =====================================
      TOOLTIP
====================================== */

#tooltip {
    position: fixed;
    background: black;
    color: #00ffcc;
    border: 2px solid cyan;
    padding: 8px 12px;
    font-size: 13px;
    display: none;
    z-index: 9999;
}

/* =====================================
      ANIMAÇÕES
====================================== */

@keyframes starsMove {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 800px;
    }
}

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

.computer {
    animation: float 4s ease-in-out infinite;
}

.camera {
    animation: float 5s ease-in-out infinite;
}

.books {
    animation: float 6s ease-in-out infinite;
}

.toys {
    animation: float 7s ease-in-out infinite;
}