.cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.card-game {
    background: transparent;
    padding: 0.3rem;
}

.speed {
    min-width: 5rem;
    max-width: 10rem;
    box-sizing: border-box;
    transition: transform 100ms ease-in;
}

.speed:hover {
    transform-origin: center;
    transform: scale(1.2);
    cursor: pointer;
}

.selected-card {
    /* box-shadow: 0 0 0 10px white; */
    transform: scale(1.2);
}

.selected-incorrect {
    animation: shakeAnimation 500ms ease forwards;
}

.used-card {
    opacity: 0.4;
    transform: none!important;
}

.used-card:hover {
  cursor: default!important;
  transform: none!important;
}

.alert-igem {
    display: none;
    /* opacity: 0; */
    position: fixed;
    top: 3rem;
    width: 100%;
    text-align: center;
    font-family: 'wikiFont';
    font-weight: bold;
    font-size: 2vw;
    z-index: 1000;
    color: #1e1e1e;
    /* background: white; */
    border: 1px solid transparent;
    animation: showAlert 700ms ease-in-out forwards;

}

.alert-msg-success {
    background-color: #89e6bc;
    border-color: #badbcc;
}

.alert-msg-error {
    background-color: #d68c92;
    border-color: #f5c2c7;
}

.show-alert {
    animation: showAlert 1s ease-in-out forwards;
}



@keyframes showAlert {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

    100% {
		opacity: 0;
	}
}

@keyframes shakeAnimation {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(8deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(10deg);
	}

	80% {
		transform: rotate(-8deg);
	}

	90% {
		transform: rotate(8deg);
	}
}

/* SVG styles */

/* Speed */
#speedBoard .cls-1 {
    fill: #ffe086;
  }

  #speedBoard .cls-1, #speedBoard .cls-2, #speedBoard .cls-3, #speedBoard .cls-4, #speedBoard .cls-5, #speedBoard .cls-6, #speedBoard .cls-7, #speedBoard .cls-8, #speedBoard .cls-9 {
    stroke-width: 0px;
  }

  #speedBoard .cls-10, #speedBoard .cls-11, #speedBoard .cls-5, #speedBoard .cls-12, #speedBoard .cls-13, #speedBoard .cls-14 {
    fill: none;
  }

  #speedBoard .cls-10, #speedBoard .cls-11, #speedBoard .cls-15, #speedBoard .cls-16, #speedBoard .cls-12, #speedBoard .cls-13, #speedBoard .cls-17, #speedBoard .cls-18 {
    stroke-miterlimit: 10;
  }

  #speedBoard .cls-10, #speedBoard .cls-11, #speedBoard .cls-16, #speedBoard .cls-13, #speedBoard .cls-17, #speedBoard .cls-18 {
    stroke: #fff;
  }

  #speedBoard .cls-10, #speedBoard .cls-15, #speedBoard .cls-16, #speedBoard .cls-17 {
    stroke-width: .85px;
  }

  #speedBoard .cls-19 {
    clip-path: url(#clippath-20);
  }

  #speedBoard .cls-20 {
    clip-path: url(#clippath-11);
  }

  #speedBoard .cls-21 {
    clip-path: url(#clippath-16);
  }

  #speedBoard .cls-11 {
    stroke-width: 2.19px;
  }

  #speedBoard .cls-11, .cls-12, .cls-14 {
    stroke-linecap: round;
  }

  #speedBoard .cls-2 {
    fill: #171717;
  }

  #speedBoard .cls-22 {
    clip-path: url(#clippath-2);
  }

  #speedBoard .cls-23 {
    clip-path: url(#clippath-13);
  }

  #speedBoard .cls-24 {
    clip-path: url(#clippath-25);
  }

  #speedBoard .cls-25 {
    clip-path: url(#clippath-15);
  }

  #speedBoard .cls-26 {
    clip-path: url(#clippath-6);
  }

  #speedBoard .cls-4, #speedBoard .cls-6 {
    fill: #439ed8;
  }

  #speedBoard .cls-27 {
    clip-path: url(#clippath-26);
  }

  #speedBoard .cls-15, #speedBoard .cls-8 {
    fill: #fff;
  }

  #speedBoard .cls-15, #speedBoard .cls-14 {
    stroke: #1e1e1e;
  }

  #speedBoard .cls-28 {
    clip-path: url(#clippath-7);
  }

  #speedBoard .cls-29 {
    clip-path: url(#clippath-21);
  }

  #speedBoard .cls-16, #speedBoard .cls-18 {
    fill: #4c4c4d;
  }

  #speedBoard .clickable_fill {
      fill: #1e1e1e;
    }

  #speedBoard .cls-30 {
    clip-path: url(#clippath-1);
  }

  #speedBoard .cls-31 {
    clip-path: url(#clippath-4);
  }

  #speedBoard .cls-32 {
    clip-path: url(#clippath-27);
  }

  #speedBoard .cls-6 {
    fill-rule: evenodd;
  }

  #speedBoard .cls-12 {
    stroke: #439ed8;
    stroke-width: 2.08px;
  }

  #speedBoard .cls-7 {
    fill: #0068ad;
  }

  #speedBoard .cls-33 {
    clip-path: url(#clippath-12);
  }

  #speedBoard .cls-13, .cls-18 {
    stroke-width: .82px;
  }

  #speedBoard .cls-34 {
    clip-path: url(#clippath-24);
  }

  #speedBoard .cls-35 {
    clip-path: url(#clippath-22);
  }

  #speedBoard .cls-17, #speedBoard .cls-9 {
    fill: #1e1e1e;
  }

  #speedBoard .cls-36 {
    clip-path: url(#clippath-9);
  }

  #speedBoard .cls-37 {
    clip-path: url(#clippath);
  }

  #speedBoard .cls-14 {
    stroke-linejoin: round;
    stroke-width: 1.02px;
  }

  #speedBoard .cls-38 {
    clip-path: url(#clippath-19);
  }

  #speedBoard .cls-39 {
    clip-path: url(#clippath-3);
  }

  #speedBoard .cls-40 {
    clip-path: url(#clippath-8);
  }

  #speedBoard .cls-41 {
    clip-path: url(#clippath-18);
  }

  #speedBoard .cls-42 {
    clip-path: url(#clippath-14);
  }

  #speedBoard .cls-43 {
    clip-path: url(#clippath-17);
  }

  #speedBoard .cls-44 {
    clip-path: url(#clippath-5);
  }

  #speedBoard .cls-45 {
    clip-path: url(#clippath-10);
  }

  #speedBoard .cls-46 {
    clip-path: url(#clippath-23);
  }

  #speedBoard .cls-47 {
    clip-path: url(#clippath-28);
  }