bemusic/bemuse

@import '~bemuse/ui/common';

.ResultGrade {
  display: flex;
  position: relative;
  border: 2px dashed rgba(white, 0.5);
  border-radius: 1em;
  align-items: center;
  justify-content: center;
  &のlabel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    color: rgba(white, 0.5);
    text-align: center;
  }
  &のgrade {
    font-weight: bold;
    font-size: 18vh;
    color: #ff9;
    position: relative;
    top: -0.2ex;
    text-shadow: 3px 3px 0 rgba(black, 0.3);
    animation: 0.3s result-grade--animation linear;
    animation-delay: 2s;
    animation-fill-mode: backwards;
  }
}

@keyframes result-grade--animation {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  80% {
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}