.selector-circle {
    background-image: url("../img/question_mark.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    box-shadow: .1vw .1vw 0.5vw #000;
    z-index: 1;
}

    .selector-circle:hover,
    .selector-circle:active,
    .selector-circle:focus {
        --webkit-appearance: none;
        outline: none;
        border-width: 0;
    }

    .solved {
        box-shadow: none;
        background-size: contain;
        border-radius: 0;
    }

    #selectorGiraffe {
        left: 14vw;
        top: calc(50vh - 24vw);
    }

        #selectorGiraffe.solved {
            background-image: url("../img/orange_diamond.png");
        }

    #selectorPenguin {
        left: 24vw;
        top: calc(50vh - 11vw);
    }

        #selectorPenguin.solved {
            background-image: url("../img/blue_trapezoid.png");
        }

    #selectorKangaroo {
        left: 53vw;
        top: calc(50vh - 19.5vw);
    }

        #selectorKangaroo.solved {
            background-image: url("../img/purple_pentagon.png");
        }

    #selectorElephant {
        left: 72vw;
        top: calc(50vh - 27vw);
    }

        #selectorElephant.solved {
            background-image: url("../img/red_oval.png");
        }

    #selectorZebra {
        left: 84vw;
        top: calc(50vh - 10.5vw);
    }

        #selectorZebra.solved {
            background-image: url("../img/yellow_moon.png");
        }

    #selectorLion {
        left: 79vw;
        top: calc(50vh + 15vw);
    }

        #selectorLion.solved {
            background-image: url("../img/green_octagon.png");
        }

    .pulseNew {
      box-shadow: 0 0 0 rgba(255,227,217, 1);
      animation: pulseNew 1s infinite;
    }


    @-webkit-keyframes pulseNew {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,227,217, 0.4);
      }
      70% {
          -webkit-box-shadow: 0 0 0 2vmin rgba(255,227,217, 0);
      }
      100% {
          -webkit-box-shadow: 0 0 0 0 rgba(255,227,217, 0);
      }
    }

    @keyframes pulseNew {
      0% {
        -moz-box-shadow: 0 0 0 0 rgba(255,227,217, 0.4);
        box-shadow: 0 0 0 0 rgba(255,227,217, 0.4);
      }
      70% {
          -moz-box-shadow: 0 0 0 2vmin rgba(255,227,217, 0);
          box-shadow: 0 0 0 2vmin rgba(255,227,217, 0);
      }
      100% {
          -moz-box-shadow: 0 0 0 0 rgba(255,227,217, 0);
          box-shadow: 0 0 0 0 rgba(255,227,217, 0);
      }
    }

@media (min-aspect-ratio: 1150/767) {
    .selector-circle {
        width: 8.5vh;
        height: 8.5vh;
        box-shadow: .1vh .1vh 0.5vh #000;
    }

        #selectorGiraffe {
            left: calc(50vw - 52.5vh);
            top: 13.5vh;
        }

        #selectorPenguin {
            left: calc(50vw - 39vh);
            top: 33vh;
        }

        #selectorKangaroo {
            left: calc(50vw - -4vh);
            top: 21vh;
        }

        #selectorElephant {
            left: calc(50vw + 34vh);
            top: 9.19vh;
        }

        #selectorZebra {
            left: calc(50vw + 52vh);
            top: 34vh;
        }

        #selectorLion {
            left: calc(50vw + 44vh);
            top: 74vh;
        }
}