body {
    display: block;
    margin: 0 auto;
    padding: 0;
    background-image: url(../assets/backgrounds/greenpaper.png);
}

.grid {
    width: 1366px;
    height: 800px;
    display: grid;
    justify-content: space-evenly;
    margin: 0 auto;
    grid-template-columns: repeat(9,minmax(136px,1fr));
    grid-auto-rows: minmax(66px,1fr);
}

.shelf, .oracle, .moon, .fishbowl, .table, .box, .books, .art, .phone, .camera, .computer, .radio, .movie, .floppydisks, .popcorn {
    z-index: 1;
}

.shelf {
    grid-area: 1/1/6/4;
    transform: translate(-35%, -6%);
}

.oracle {
    grid-area: 1/1/1/1;
    transform: translate(40%, 20%);
}

.moon {
    grid-area: 1/2/1/2;
    transform: translate(20%, 30%)
}

.fishbowl {
    grid-area: 1/3/1/3;
    transform: translate(0%, 34%)

}

.corkboard {
    grid-area: 1/4/3/8;
    transform: translate(25%,10%)
}

.table {
    grid-area: 6/4/4/8;
    transform: translate(10%, -66%) scale(.9,1.2)
}

.box {
    grid-area: 6/2/5/2;
    transform: translate(-30%,-8%)
}

.books {
    grid-area: 3/3/4/3;
    transform: translate(-10%, 15%)
}

.door {
    grid-area: 1/8/6/10;
    z-index: 2;
    transform: translate(-40%, 5%)
}

.art {
    grid-area: 2/1/2/1;
    transform: translate(45%, 25%);
}

.phone {
    grid-area: 2/2/2/2;
    transform: translate(0%, 14%)
}

.camera {
    grid-area: 2/3/2/3;
    transform: translate(20%,28%)
}

.computer {
    grid-area: 3/4/4/8;
    transform: translate(35%, -4%) scale(1,0.85)
}

.radio {
    grid-area: 3/2/3/1;
    transform: translate(20%, 12%)
}

.movie {
    grid-area: 5/2/4/2;
    transform: translate(-40%, -5%)
}


.item-16 {
    grid-area: 5/1/4/1;
}


.item-17 {
    grid-area: 5/1/5/1;
}


.item-18 {
    grid-area: 4/2/3/2;
}

.floppydisks {
    grid-area: 4/3/5/3;
    transform: translate(-20%, 10%)
}

.popcorn {
    grid-area: 5/3/6/4;
    transform: translate(20%, -5%)
}

.rug {
    grid-area: 7/1/6/10;
    width: fit-content;
    transform:
        skew(50deg) 
        rotate(90deg) 
        scale(1,5) 
        translate(-35%, -130%);
}

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

.imgtxt span {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-family: "Susu-Jahe",fallback,sans-serif;
    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 {
    opacity: 2;
}

.imgtxt:hover img, .imgtxt:focus img {
    filter: hue-rotate(300deg)
}