#won {
  bottom: 2rem;
  height: 80px; }

#memory {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  #memory > .memory-flip-card {
    font-size: 8px;
    width: 230px;
    height: 230px;
    margin: 0.3rem;
    background-color: transparent;
    perspective: 1000px;
    opacity: 1;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out; }
    #memory > .memory-flip-card > .inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d; }
      #memory > .memory-flip-card > .inner > .front {
        cursor: pointer;
        background-color: #333;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center; }
        #memory > .memory-flip-card > .inner > .front.style-one {
          background-image: url("../media/frog512x512.png"); }
        #memory > .memory-flip-card > .inner > .front.style-two {
          background-image: url("../media/altogether-logo.png"); }
          #memory > .memory-flip-card > .inner > .front.style-two.bg-black, #memory > .memory-flip-card > .inner > .front.style-two.bg-blue {
            background-image: url("../media/altogether-logo-inverted.png"); }
      #memory > .memory-flip-card > .inner > .back {
        font-size: 8px;
        transform: rotateY(180deg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center; }
      #memory > .memory-flip-card > .inner > .front, #memory > .memory-flip-card > .inner > .back {
        -webkit-user-select: none;
        /* Safari */
        -ms-user-select: none;
        /* IE 10 and IE 11 */
        user-select: none;
        /* Standard syntax */
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
    #memory > .memory-flip-card.found {
      opacity: 0.7; }
      #memory > .memory-flip-card.found > .inner > .back {
        border: solid 1px #bcce43; }
    #memory > .memory-flip-card.active > .inner, #memory > .memory-flip-card.found > .inner {
      transform: rotateY(180deg); }

@media (min-width: 750px) {
  #memory > .card {
    font-size: 20px; }
    #memory > .card > .inner > .back {
      font-size: 20px; } }

/*# sourceMappingURL=Memory.css.map */
