:root {
  --side: #D4AF37;
  --side-b: #594a18;
/*  --side: #D4AF37;*/
  --side: #FFB302;
  --side-dark: #FFB302;
  --coin-size: 12em;
  --coin-face-eagle: url('https://www.vvsu.ru/i/img-apply.png?v=1');
  --coin-face-tails: url('https://www.vvsu.ru/i/img-quest.png?v=1');
}


@media (max-width:500px) {
    :root {
	  --coin-size: 9em;
    }
}

@media (max-width:750px) {
    :root {
	  --coin-size: 8em;
    }
}

@media ((max-width: 1024px) and (orientation: landscape)) {
    :root {
	  --coin-size: 8em;
    }
}


html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #fff;


}

.coin {
  transition: filter 0.5s ease-in-out 0s;
  height: var(--coin-size);
  width: var(--coin-size);
  margin: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  pointer-events: all !important;
/*  filter: drop-shadow(0px 0px 4px #333);*/
}



.coin::before {
  content: '';
  display: block;
  position: relative;
  height: var(--coin-size);
  width: var(--coin-size);
  border-radius: 50%;
  background-color: var(--face);
  background-size: 100% 100%;
  background-position: center;
  animation-fill-mode: forwards;
  cursor: pointer;
}

.eagle-ani::before {
  background-image: var(--coin-face-eagle);
  animation: spin-eagle 1s linear;
  animation-fill-mode: forwards;
}

.tails-ani::before {
  background-image: var(--coin-face-tails);
  animation: spin-tails 1s linear;
  animation-fill-mode: forwards;
}

@keyframes spin-eagle {
  0% {
    filter: brightness(1) drop-shadow(0px 0px 4px #333);
    width: var(--coin-size);
    box-shadow:
      0 0 0 var(--side-dark);
    animation-timing-function: ease-in;
  }
  
  49.999% {
    filter: brightness(1.5) drop-shadow(0px 0px 4px var(--side));
    width: 0.1em;
    box-shadow:
      0.05rem 0 0 var(--side),
      0.1rem 0 0 var(--side),
      0.15rem 0 0 var(--side),
      0.2rem 0 0 var(--side),
      0.25rem 0 0 var(--side),
      0.3rem 0 0 var(--side),
      0.35rem 0 0 var(--side),
      0.4rem 0 0 var(--side),
      0.45rem 0 0 var(--side),
      0.5rem 0 0 var(--side),
      0.55rem 0 0 var(--side),
      0.6rem 0 0 var(--side),
      0.65rem 0 0 var(--side),
      0.7rem 0 0 var(--side),
      0.75rem 0 0 var(--side);
    transform: translateX(-0.375rem);
    background-image: var(--coin-face-eagle);
    animation-timing-function: linear;
  }
  
  50.001% {
    filter: brightness(1.5) drop-shadow(0px 0px 4px var(--side));
    width: 0.1em;
    box-shadow:
      -0.05rem 0 0 var(--side),
      -0.1rem 0 0 var(--side),
      -0.15rem 0 0 var(--side),
      -0.2rem 0 0 var(--side),
      -0.25rem 0 0 var(--side),
      -0.3rem 0 0 var(--side),
      -0.35rem 0 0 var(--side),
      -0.4rem 0 0 var(--side),
      -0.45rem 0 0 var(--side),
      -0.5rem 0 0 var(--side),
      -0.55rem 0 0 var(--side),
      -0.6rem 0 0 var(--side),
      -0.65rem 0 0 var(--side),
      -0.7rem 0 0 var(--side),
      -0.75rem 0 0 var(--side);
    transform: translateX(0.375rem);
    background-image: var(--coin-face-tails);
    animation-timing-function: ease-out;
  }


  100% {
    filter: brightness(1) drop-shadow(0px 0px 4px #333);
    width: var(--coin-size);
    background-image: var(--coin-face-tails);
    box-shadow:
      0 0 0 var(--side-dark);

  }
}


@keyframes spin-tails {
  0% {
    filter: brightness(1) drop-shadow(0px 0px 4px #333);
    width: var(--coin-size);
    box-shadow:
      0 0 0 var(--side-dark);
    animation-timing-function: ease-in;
  }
  
  49.999% {
    width: 0.1em;
    box-shadow:
      0.05rem 0 0 var(--side),
      0.1rem 0 0 var(--side),
      0.15rem 0 0 var(--side),
      0.2rem 0 0 var(--side),
      0.25rem 0 0 var(--side),
      0.3rem 0 0 var(--side),
      0.35rem 0 0 var(--side),
      0.4rem 0 0 var(--side),
      0.45rem 0 0 var(--side),
      0.5rem 0 0 var(--side),
      0.55rem 0 0 var(--side),
      0.6rem 0 0 var(--side),
      0.65rem 0 0 var(--side),
      0.7rem 0 0 var(--side),
      0.75rem 0 0 var(--side);
    transform: translateX(-0.375rem);
    animation-timing-function: linear;
    background-image: var(--coin-face-tails);
    filter: brightness(1.5) drop-shadow(0px 0px 4px var(--side));
  }
  
  50.001% {
    filter: 
	brightness(1.5) drop-shadow(0px 0px 4px var(--side));
    width: 0.1em;
    box-shadow:
      -0.05rem 0 0 var(--side),
      -0.1rem 0 0 var(--side),
      -0.15rem 0 0 var(--side),
      -0.2rem 0 0 var(--side),
      -0.25rem 0 0 var(--side),
      -0.3rem 0 0 var(--side),
      -0.35rem 0 0 var(--side),
      -0.4rem 0 0 var(--side),
      -0.45rem 0 0 var(--side),
      -0.5rem 0 0 var(--side),
      -0.55rem 0 0 var(--side),
      -0.6rem 0 0 var(--side),
      -0.65rem 0 0 var(--side),
      -0.7rem 0 0 var(--side),
      -0.75rem 0 0 var(--side);
    transform: translateX(0.375rem);
     animation-timing-function: ease-out;
    background-image: var(--coin-face-eagle);
  }
  
  100% {
    filter: brightness(1) drop-shadow(0px 0px 4px #333);
    width: var(--coin-size);
    box-shadow:
      0 0 0 var(--side-dark);
    background-image: var(--coin-face-eagle);     
  }
}


.coin-placeholder {
   margin-top: -15em;
   z-index: 10000;
   position: sticky;
   bottom: 5em;
   margin-right: 1em;
   display: flex;
   justify-content: end;
   pointer-events: none;
}

.coin:hover {
    filter:
	brightness(1.2);
}