.rhino {
    position: absolute;
    width: 15%;
    top: 60%;
    left: 18%;
}

.squirrel {
    position: absolute;
    width: 15%;
    top: 63%;
    left: 71%;
}

.playtime {
    position: absolute;
    top: 67%;
    left: 54%;
    transform: translate(-50%, -50%);
    font-size: 5vw;
    color: white;
}

.circle {
    position: absolute;
    width: 42%;
    top: 7%;
    left: 51%;
    animation: rotthis 10s linear infinite;
}

@keyframes rotthis {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.stand {
    position: absolute;
    width: 15%;
    top: 45%;
    left: 64.5%;
}

.counter {
    position: absolute;
    width: 23%;
    top: 41%;
    left: 15.5%;
}

[class*="box"] {
    top: 19%;
    left: 59%;
    position: absolute;
    width: 26.5%;
}

.box1 {
    animation: spin1 10s linear infinite;
    /*transform: rotate(9deg) translate(175%,175%) rotate(-9deg);*/
}

.box2 {
    animation: spin2 10s linear infinite;
    /*transform: rotate(81deg) translate(175%,175%) rotate(-81deg);*/
}

.box3 {
    animation: spin3 10s linear infinite;
    /*transform: rotate(153deg) translate(175%,175%) rotate(153deg);*/
}

.box4 {
    animation: spin4 10s linear infinite;
    /*transform: rotate(225deg) translate(175%,175%) rotate(225deg);*/
}

.box5 {
    animation: spin5 10s linear infinite;
    /*transform: rotate(297deg) translate(175%,175%) rotate(297deg);*/
}

@keyframes spin1 {
  0% {
      transform: rotate(9deg) translate(54%,54%) rotate(-9deg);
  }
  100% {
      transform: rotate(369deg) translate(54%,54%) rotate(-369deg);
  }
}

@keyframes spin2 {
  0% {
      transform: rotate(81deg) translate(54%,54%) rotate(-81deg);
  }
  100% {
      transform: rotate(441deg) translate(54%,54%) rotate(-441deg);
  }
}

@keyframes spin3 {
  0% {
    transform: rotate(153deg) translate(54%,54%) rotate(-153deg);
  }
  100% {
      transform: rotate(513deg) translate(54%,54%) rotate(-513deg);
  }
}

@keyframes spin4 {
  0% {
    transform: rotate(225deg) translate(54%,54%) rotate(-225deg);
  }
  100% {
      transform: rotate(585deg) translate(54%,54%) rotate(-585deg);
  }
}

@keyframes spin5 {
  0% {
    transform: rotate(297deg) translate(54%,54%) rotate(-297deg);
  }
  100% {
      transform: rotate(657deg) translate(54%,54%) rotate(-657deg);
  }
}

.headerblock {
  font-family: sniglet;
  font-size: 4vw;
  background: #E4FFE0;
  color: #4a4a4a;
}

.dogqu {
  position: absolute;
  width: 38%;
  transform: translate(-50%,-50%);
  top: 58%;
  left: 43%;
}

.bigblock {
    position: absolute;
    width: 90%;
    transform: translate(-50%,-50%);
    top: 11%;
    left: 43%;
}

[class*="ani"] {
    position: absolute;
    transform: translate(-50%, -50%);
}

.animani-goat1 {
    width: 24%;
    left: 13%;
    bottom: -16%;
}

.animani-goat2 {
    width: 24%;
    left: 31%;
    bottom: -16%;
}

.animani-goat3 {
    width: 24%;
    left: 50%;
    bottom: -16%;
}

.animani-goat4 {
    width: 24%;
    left: 69%;
    bottom: -16%;
}

.animani-turt1 {
    width: 15%;
    left: 31%;
    bottom: -7%;
}

.animani-turt2 {
    width: 15%;
    left: 50%;
    bottom: -12%;
}

.animani-she1 {
    width: 20%;
    left: 7%;
    bottom: -16%;
}

.animani-she2 {
    width: 20%;
    left: 24%;
    bottom: -16%;
}

.animani-she3 {
    width: 20%;
    left: 42%;
    bottom: -16%;
}

.animani-she4 {
    width: 20%;
    left: 59%;
    bottom: -16%;
}

.animani-she5 {
    width: 20%;
    left: 76%;
    bottom: -16%;
}


.animani-dog1 {
    width: 10%;
    left: 7%;
    bottom: -11%;
}

.animani-dog2 {
    width: 10%;
    left: 18%;
    bottom: -11%;
}

.animani-dog3 {
    width: 10%;
    left: 29%;
    bottom: -11%;
}

.animani-dog4 {
    width: 10%;
    left: 41%;
    bottom: -11%;
}

.animani-dog5 {
    width: 10%;
    left: 53%;
    bottom: -11%;
}

.animani-dog6 {
    width: 10%;
    left: 64%;
    bottom: -11%;
}

.animani-dog7 {
    width: 10%;
    left: 76%;
    bottom: -11%;
}


.animani-rabb1 {
    width: 7%;
    left: 5%;
    bottom: -7%;
}

.animani-rabb2 {
    width: 7%;
    left: 13%;
    bottom: -7%;
}

.animani-rabb3 {
    width: 7%;
    left: 21%;
    bottom: -7%;
}

.animani-rabb4 {
    width: 7%;
    left: 29%;
    bottom: -7%;
}

.animani-rabb5 {
    width: 7%;
    left: 37%;
    bottom: -7%;
}

.animani-rabb6 {
    width: 7%;
    left: 45%;
    bottom: -7%;
}

.animani-rabb7 {
    width: 7%;
    left: 54%;
    bottom: -7%;
}

.animani-rabb8 {
    width: 7%;
    left: 62%;
    bottom: -7%;
}

.animani-rabb9 {
    width: 7%;
    left: 70%;
    bottom: -7%;
}

.animani-rabb10 {
    width: 7%;
    left: 78%;
    bottom: -7%;
}



#flexcontainer {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: -17%;
  bottom: 0%;
  background: #FAECC7;
  width: 17%;
  height: 90%;
  justify-content: center;
  padding: 0% 5% 0% 3%;
}

#flexcontainer > div {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: aqua;
  margin: 4%;
  font-size: 6vmin;
  color: white;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
  #flexcontainer {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: -17%;
    bottom: 0%;
    background: #FAECC7;
    width: 17%;
    height: 87%;
    justify-content: center;
    padding: 2% 4% 2% 2%;
}
  #flexcontainer > div {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: aqua;
    margin: 17% 13%;
    font-size: 6vmin;
    color: white;
  }
}

#flexcontainer > div:nth-of-type(1) {
  background: #F34B7F;
}

#flexcontainer > div:nth-of-type(2) {
  background: #F9A960;
}

#flexcontainer > div:nth-of-type(3) {
  background: #22D2C5;
}

#flexcontainer > div:nth-of-type(4) {
  background: #D6E63A;
}

.forhover{
  cursor: pointer;
}

.forhover:hover{
  filter: hue-rotate(35deg);
}

.corans{
 background: green !important;
}

.incans{
  background: red !important;
}

.btnNavigationSong {
    position: absolute;
    width: 50%;
    display: grid;
    top: 40%;
    height: 39%;
    left: 16%;
}

.playAgainDiv {
    top: 15%;
    float: left;
    left: 0%;
    width: 25%;
}

.mainMenuDiv {
    top: 15%;
    float: left;
    left: 0%;
    width: 25%;
}

.learnAgainDiv {
    top: 15%;
    float: left;
    left: 0%;
    width: 25%;
}

.commonNavBtn {
    height: auto;
}

.messagediv {
    position: absolute;
    top: 9%;
    left: 1%;
    width: 50%;
    font-size: 5vw;
    color: #1b4781;
}

.correct_sign {
    position: absolute;
    width: 39%;
    left: 111%;
    top: 30%;
}
@media (min-aspect-ratio: 4/3){
  .playtime{
    font-size: 7vh;
  }
  .headerblock,.messagediv{
    font-size: 6vh;
  }
}