.coin {
    position : absolute;
    left     : 0px;
    top      : 150px;
    width    : 250px;
    height   : 250px;
   background-image:url('./images/coin.png');
   background-size: contain;
 background-repeat: no-repeat;
    /* border   : 1px solid black; */

}

.coinFace {
    position : absolute;
    left     : -100px;
    top      : -320px;
    width    : 250px;
    height   : 250px;
   background-image:url('./images/BrainRocket_Coin_Logo.svg');
   background-size: contain;
 background-repeat: no-repeat;
 animation: rotation 1s infinite linear;

    /* border   : 1px solid black; */

}

.brainCoinFace {
  position : absolute;
  left     : calc(100%/2 - 500px);
  top      : calc(100%/2 - 150px);
  width    : 550px;
  height   : 550px;
  background-image:url('./images/BrainRocket_Coin_Logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  
}

.scaled {
  transform: scale(.4); /* Use this to obtain desired size Equal to scaleX(0.7) scaleY(0.7) */
  transform: scale(.2); /* Use this to obtain desired size Equal to scaleX(0.7) scaleY(0.7) */

}

.plusCoins {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 550px;
  background-color: white;
  background-color: #ffffffed;
  font-size: 18rem;
  text-align: center;
  border-radius: 100%;
  padding-top: 100px;
}

/* On small/mobile screens the full-size 550px coin is positioned off-centre
   (left: calc(50% - 500px)), so most of it falls off-screen and only a sliver
   is visible. Pop a smaller coin centred directly over the question instead. */
@media (max-width: 768px) {
  .brainCoinFace {
    position: fixed;
    left: 50%;
    top: 32%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }
}