
.animated-target {
    position: absolute;
    animation-name: moveIt;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    z-index: 2;
}

#game-board {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--screen-width) ;
    height: var(--screen-height);
}
#game-board-img {
    width: fit-content;
    height: var(--screen-height);
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;
}

#game-board-overlay {
    position: absolute;
}
#instructions1 {
    position: absolute;
    top: 15%;
}
li > img {
    width: calc(.2*var(--screen-width));
}
#next {
    position: absolute ;
    left: 95% ;
    bottom:5% ;
    height: 50px ;
    width: 50px;
    z-index: 10;
    visibility: hidden;
}
ul  {
    list-style-type: none;
}
#score {
    position: relative;

}

#timer {
    color: white ;
}

.target {
    position: absolute;
    -webkit-user-drag: none;
    user-select: none;
}

.target img {
    object-fit: scale-down;
    height: 55px;
    width: auto;
    -webkit-user-drag: none;
    user-select: none;

}


@keyframes moveIt {
    from {
        left: 0;
    }
    to {
        left: 80%;
    }
}

.score-bubble {
    position: absolute;
    width: fit-content;
    height: fit-content;
    z-index: 10;
    padding: 2px 10px;
    font-size: 1.25em;

    user-select: none;
    text-align: center;
}
#play {
    width: 20%;
    height: auto;
}
#success , #result {
    position: absolute;
    left: 400px;
    top: 200px;
    visibility: hidden;
}





