#NikImg {
    user-select: none;
    -webkit-user-drag: none;
    position: relative;
    top: -5%;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    /* background-color: red; */
}
#IntEle {
    object-fit: contain;
    display: flex;
    z-index: 0;
    width: 35%;
    /* min-width: 220px; */
    max-height: 90%;
    height: 70%;
    position: fixed;
    align-content: center;
    justify-content: center;
    right: 9%;
    top: 5%;
    bottom: 5%;
    transform: translateY(10%);
    object-fit:contain;
    /* background-color: pink; */
}
#IntEle2 {
    z-index: 0;
    /* width: 35%; */
    /* min-width: 220px; */
    /* max-height: 90%; */
    height: 100%;
    width: 100%;
    top: 0%;
    left:1%;
    right: 1%;;
    position: absolute;
    align-self: center;
    justify-self: center;
    /* aspect-ratio: auto 1/1; */
    transform: translateY(10%);
    object-fit:contain;
    display: flex;
    /* background-color: white; */
}
#NikHome {
    display: flex;
    position: relative;
    user-select: none;
    width: 100%;
    height: auto;
    /* height: 100%; */
    /* bottom: 0.5%;
    top: 0.5%; */
    /* object-fit: contain; */
    /* align-self: center;
    justify-self: center; */
    object-position: 50% 50%;
    aspect-ratio: 1;
    /* background-color: yellow; */
}



#NikShadow {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    box-shadow: 1px 1px 35px black;
    position: absolute;
    bottom: 10%;
    width: 90%;
    justify-self: center;
    left: 6%;
    right: 0%;
    height: 10%;
    z-index: -1;
}


/* * Interactable */

#IntPet {
    position: absolute;
    /* background-color: rgb(255, 0, 0); */
    width: 20%;
    height: 9%;
    left: 68%;
    top: 12%;
    cursor: grab;
    z-index: 2;
}
#IntBoop {
    position: absolute;
    /* background-color: rgb(0, 17, 255); */
    width: 8%;
    height: 3%;
    left: 67%;
    top: 28%;
    cursor: grab;
    z-index: 2;
    cursor: not-allowed;
}
#IntPaw {
    position: absolute;
    /* background-color: rgb(0, 205, 64); */
    width: 30%;
    height: 30%;
    left: 38%;
    top: 53%;
    cursor: grab;
    z-index: 2;
}

#IntPaw2 {
    position: absolute;
    /* background-color: rgb(0, 255, 64); */
    width: 20%;
    height: 30%;
    left: 15%;
    top: 52%;
    z-index: 2;
}
/* #IntBoop:active ~ #BoopImg {
    visibility: visible;
} */

/* * Interacted */

#IntPet:active {
    outline: 3px dashed rgba(0, 0, 0, 0.029);
    cursor: grabbing;
    left: 66%;
    width: 25%;
    transform: scale(1.5) scaleY(2.6);
}

#IntPet:active ~ #BubbleImg {
    visibility: visible;
}

#IntPet:hover ~ #NikImg {
    content: url('NikLookUp.webp');
}

#IntPet:active ~ #NikImg {
    content: url('NikPet.webp');
}


#IntPaw:hover {
    /* cursor: url('Sparkles.png') 18 18, auto; */
    cursor: grab;
}
#IntPaw:active {
    cursor: grabbing;
}

#IntPaw:active ~ #WBubbleImg {
    visibility: visible;
}

#IntPaw:active ~ #NikImg {
    content: url(NikTouched.webp);
}

#BubbleImg {
    position: fixed;
    width: 38%;
    top:0%;
    left: 15%;
    visibility: hidden;
}
#BoopImg {
    position: fixed;
    width: 38%;
    top:10%;
    visibility: hidden;
    rotate: -15deg;
}
#WBubbleImg {
    position: fixed;
    width: 38%;
    top:0%;
    left:15%;
    visibility: hidden;
}