@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&display=swap");
@keyframes loaderAnimation {
  0% {
    border-radius: 100%;
    transform: rotate(0deg); }
  25% {
    transform: rotate(90deg); }
  50% {
    border-radius: 0%;
    transform: rotate(180deg); }
  75% {
    transform: rotate(270deg); }
  100% {
    border-radius: 100%;
    transform: rotate(360deg); } }
@keyframes currentItem {
  0% {
    top: -12px; }
  50% {
    top: -6px; }
  100% {
    top: -12px; } }
/* Number of elements (one less than in Haml) */
/* Animation duration in seconds */
/* Radius of a circle in percent */
/* The percent of the radius that each dot moves in an animation */
/* The keyframe at which the dots reach full size */
/* Max of total size scaled to in animation */
/* Divides dots into circles */
.spinner-container {
  filter: blur(15px);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100vw;
  height: 100vw;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  transition: 0.3s all;
  opacity: 0.5; }
  .spinner-container:before {
    content: "";
    display: block;
    margin-top: 100%; }
  .spinner-container.loading {
    filter: blur(3px);
    opacity: 1; }

.dot {
  width: 8%;
  height: 8%;
  position: absolute;
  left: 46%;
  top: 46%;
  opacity: 0.7; }
  .dot .inner {
    width: 100%;
    height: 100%;
    animation: move 4s linear infinite; }
    .dot .inner::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: scale 4s linear infinite; }

.dot:nth-of-type(1) {
  transform: rotate(-25.7142857143deg); }
  .dot:nth-of-type(1) .inner {
    animation-delay: -0.0714285714s; }
    .dot:nth-of-type(1) .inner::after {
      animation-delay: -0.0714285714s; }

.dot:nth-of-type(2) {
  transform: rotate(-51.4285714286deg); }
  .dot:nth-of-type(2) .inner {
    animation-delay: -0.1428571429s; }
    .dot:nth-of-type(2) .inner::after {
      animation-delay: -0.1428571429s; }

.dot:nth-of-type(3) {
  transform: rotate(-77.1428571429deg); }
  .dot:nth-of-type(3) .inner {
    animation-delay: -0.2142857143s; }
    .dot:nth-of-type(3) .inner::after {
      animation-delay: -0.2142857143s; }

.dot:nth-of-type(4) {
  transform: rotate(-102.8571428571deg); }
  .dot:nth-of-type(4) .inner {
    animation-delay: -0.2857142857s; }
    .dot:nth-of-type(4) .inner::after {
      animation-delay: -0.2857142857s; }

.dot:nth-of-type(5) {
  transform: rotate(-128.5714285714deg); }
  .dot:nth-of-type(5) .inner {
    animation-delay: -0.3571428571s; }
    .dot:nth-of-type(5) .inner::after {
      animation-delay: -0.3571428571s; }

.dot:nth-of-type(6) {
  transform: rotate(-154.2857142857deg); }
  .dot:nth-of-type(6) .inner {
    animation-delay: -0.4285714286s; }
    .dot:nth-of-type(6) .inner::after {
      animation-delay: -0.4285714286s; }

.dot:nth-of-type(7) {
  transform: rotate(-180deg); }
  .dot:nth-of-type(7) .inner {
    animation-delay: -0.5s; }
    .dot:nth-of-type(7) .inner::after {
      animation-delay: -0.5s; }

.dot:nth-of-type(8) {
  transform: rotate(-205.7142857143deg); }
  .dot:nth-of-type(8) .inner {
    animation-delay: -0.5714285714s; }
    .dot:nth-of-type(8) .inner::after {
      animation-delay: -0.5714285714s; }

.dot:nth-of-type(9) {
  transform: rotate(-231.4285714286deg); }
  .dot:nth-of-type(9) .inner {
    animation-delay: -0.6428571429s; }
    .dot:nth-of-type(9) .inner::after {
      animation-delay: -0.6428571429s; }

.dot:nth-of-type(10) {
  transform: rotate(-257.1428571429deg); }
  .dot:nth-of-type(10) .inner {
    animation-delay: -0.7142857143s; }
    .dot:nth-of-type(10) .inner::after {
      animation-delay: -0.7142857143s; }

.dot:nth-of-type(11) {
  transform: rotate(-282.8571428571deg); }
  .dot:nth-of-type(11) .inner {
    animation-delay: -0.7857142857s; }
    .dot:nth-of-type(11) .inner::after {
      animation-delay: -0.7857142857s; }

.dot:nth-of-type(12) {
  transform: rotate(-308.5714285714deg); }
  .dot:nth-of-type(12) .inner {
    animation-delay: -0.8571428571s; }
    .dot:nth-of-type(12) .inner::after {
      animation-delay: -0.8571428571s; }

.dot:nth-of-type(13) {
  transform: rotate(-334.2857142857deg); }
  .dot:nth-of-type(13) .inner {
    animation-delay: -0.9285714286s; }
    .dot:nth-of-type(13) .inner::after {
      animation-delay: -0.9285714286s; }

.dot:nth-of-type(14) {
  transform: rotate(-360deg); }
  .dot:nth-of-type(14) .inner {
    animation-delay: -1s; }
    .dot:nth-of-type(14) .inner::after {
      animation-delay: -1s; }

.dot:nth-of-type(15) {
  transform: rotate(-385.7142857143deg); }
  .dot:nth-of-type(15) .inner {
    animation-delay: -1.0714285714s; }
    .dot:nth-of-type(15) .inner::after {
      animation-delay: -1.0714285714s; }

.dot:nth-of-type(16) {
  transform: rotate(-411.4285714286deg); }
  .dot:nth-of-type(16) .inner {
    animation-delay: -1.1428571429s; }
    .dot:nth-of-type(16) .inner::after {
      animation-delay: -1.1428571429s; }

.dot:nth-of-type(17) {
  transform: rotate(-437.1428571429deg); }
  .dot:nth-of-type(17) .inner {
    animation-delay: -1.2142857143s; }
    .dot:nth-of-type(17) .inner::after {
      animation-delay: -1.2142857143s; }

.dot:nth-of-type(18) {
  transform: rotate(-462.8571428571deg); }
  .dot:nth-of-type(18) .inner {
    animation-delay: -1.2857142857s; }
    .dot:nth-of-type(18) .inner::after {
      animation-delay: -1.2857142857s; }

.dot:nth-of-type(19) {
  transform: rotate(-488.5714285714deg); }
  .dot:nth-of-type(19) .inner {
    animation-delay: -1.3571428571s; }
    .dot:nth-of-type(19) .inner::after {
      animation-delay: -1.3571428571s; }

.dot:nth-of-type(20) {
  transform: rotate(-514.2857142857deg); }
  .dot:nth-of-type(20) .inner {
    animation-delay: -1.4285714286s; }
    .dot:nth-of-type(20) .inner::after {
      animation-delay: -1.4285714286s; }

.dot:nth-of-type(21) {
  transform: rotate(-540deg); }
  .dot:nth-of-type(21) .inner {
    animation-delay: -1.5s; }
    .dot:nth-of-type(21) .inner::after {
      animation-delay: -1.5s; }

.dot:nth-of-type(22) {
  transform: rotate(-565.7142857143deg); }
  .dot:nth-of-type(22) .inner {
    animation-delay: -1.5714285714s; }
    .dot:nth-of-type(22) .inner::after {
      animation-delay: -1.5714285714s; }

.dot:nth-of-type(23) {
  transform: rotate(-591.4285714286deg); }
  .dot:nth-of-type(23) .inner {
    animation-delay: -1.6428571429s; }
    .dot:nth-of-type(23) .inner::after {
      animation-delay: -1.6428571429s; }

.dot:nth-of-type(24) {
  transform: rotate(-617.1428571429deg); }
  .dot:nth-of-type(24) .inner {
    animation-delay: -1.7142857143s; }
    .dot:nth-of-type(24) .inner::after {
      animation-delay: -1.7142857143s; }

.dot:nth-of-type(25) {
  transform: rotate(-642.8571428571deg); }
  .dot:nth-of-type(25) .inner {
    animation-delay: -1.7857142857s; }
    .dot:nth-of-type(25) .inner::after {
      animation-delay: -1.7857142857s; }

.dot:nth-of-type(26) {
  transform: rotate(-668.5714285714deg); }
  .dot:nth-of-type(26) .inner {
    animation-delay: -1.8571428571s; }
    .dot:nth-of-type(26) .inner::after {
      animation-delay: -1.8571428571s; }

.dot:nth-of-type(27) {
  transform: rotate(-694.2857142857deg); }
  .dot:nth-of-type(27) .inner {
    animation-delay: -1.9285714286s; }
    .dot:nth-of-type(27) .inner::after {
      animation-delay: -1.9285714286s; }

.dot:nth-of-type(28) {
  transform: rotate(-720deg); }
  .dot:nth-of-type(28) .inner {
    animation-delay: -2s; }
    .dot:nth-of-type(28) .inner::after {
      animation-delay: -2s; }

.dot:nth-of-type(29) {
  transform: rotate(-745.7142857143deg); }
  .dot:nth-of-type(29) .inner {
    animation-delay: -2.0714285714s; }
    .dot:nth-of-type(29) .inner::after {
      animation-delay: -2.0714285714s; }

.dot:nth-of-type(30) {
  transform: rotate(-771.4285714286deg); }
  .dot:nth-of-type(30) .inner {
    animation-delay: -2.1428571429s; }
    .dot:nth-of-type(30) .inner::after {
      animation-delay: -2.1428571429s; }

.dot:nth-of-type(31) {
  transform: rotate(-797.1428571429deg); }
  .dot:nth-of-type(31) .inner {
    animation-delay: -2.2142857143s; }
    .dot:nth-of-type(31) .inner::after {
      animation-delay: -2.2142857143s; }

.dot:nth-of-type(32) {
  transform: rotate(-822.8571428571deg); }
  .dot:nth-of-type(32) .inner {
    animation-delay: -2.2857142857s; }
    .dot:nth-of-type(32) .inner::after {
      animation-delay: -2.2857142857s; }

.dot:nth-of-type(33) {
  transform: rotate(-848.5714285714deg); }
  .dot:nth-of-type(33) .inner {
    animation-delay: -2.3571428571s; }
    .dot:nth-of-type(33) .inner::after {
      animation-delay: -2.3571428571s; }

.dot:nth-of-type(34) {
  transform: rotate(-874.2857142857deg); }
  .dot:nth-of-type(34) .inner {
    animation-delay: -2.4285714286s; }
    .dot:nth-of-type(34) .inner::after {
      animation-delay: -2.4285714286s; }

.dot:nth-of-type(35) {
  transform: rotate(-900deg); }
  .dot:nth-of-type(35) .inner {
    animation-delay: -2.5s; }
    .dot:nth-of-type(35) .inner::after {
      animation-delay: -2.5s; }

.dot:nth-of-type(36) {
  transform: rotate(-925.7142857143deg); }
  .dot:nth-of-type(36) .inner {
    animation-delay: -2.5714285714s; }
    .dot:nth-of-type(36) .inner::after {
      animation-delay: -2.5714285714s; }

.dot:nth-of-type(37) {
  transform: rotate(-951.4285714286deg); }
  .dot:nth-of-type(37) .inner {
    animation-delay: -2.6428571429s; }
    .dot:nth-of-type(37) .inner::after {
      animation-delay: -2.6428571429s; }

.dot:nth-of-type(38) {
  transform: rotate(-977.1428571429deg); }
  .dot:nth-of-type(38) .inner {
    animation-delay: -2.7142857143s; }
    .dot:nth-of-type(38) .inner::after {
      animation-delay: -2.7142857143s; }

.dot:nth-of-type(39) {
  transform: rotate(-1002.8571428571deg); }
  .dot:nth-of-type(39) .inner {
    animation-delay: -2.7857142857s; }
    .dot:nth-of-type(39) .inner::after {
      animation-delay: -2.7857142857s; }

.dot:nth-of-type(40) {
  transform: rotate(-1028.5714285714deg); }
  .dot:nth-of-type(40) .inner {
    animation-delay: -2.8571428571s; }
    .dot:nth-of-type(40) .inner::after {
      animation-delay: -2.8571428571s; }

.dot:nth-of-type(41) {
  transform: rotate(-1054.2857142857deg); }
  .dot:nth-of-type(41) .inner {
    animation-delay: -2.9285714286s; }
    .dot:nth-of-type(41) .inner::after {
      animation-delay: -2.9285714286s; }

.dot:nth-of-type(42) {
  transform: rotate(-1080deg); }
  .dot:nth-of-type(42) .inner {
    animation-delay: -3s; }
    .dot:nth-of-type(42) .inner::after {
      animation-delay: -3s; }

.dot:nth-of-type(43) {
  transform: rotate(-1105.7142857143deg); }
  .dot:nth-of-type(43) .inner {
    animation-delay: -3.0714285714s; }
    .dot:nth-of-type(43) .inner::after {
      animation-delay: -3.0714285714s; }

.dot:nth-of-type(44) {
  transform: rotate(-1131.4285714286deg); }
  .dot:nth-of-type(44) .inner {
    animation-delay: -3.1428571429s; }
    .dot:nth-of-type(44) .inner::after {
      animation-delay: -3.1428571429s; }

.dot:nth-of-type(45) {
  transform: rotate(-1157.1428571429deg); }
  .dot:nth-of-type(45) .inner {
    animation-delay: -3.2142857143s; }
    .dot:nth-of-type(45) .inner::after {
      animation-delay: -3.2142857143s; }

.dot:nth-of-type(46) {
  transform: rotate(-1182.8571428571deg); }
  .dot:nth-of-type(46) .inner {
    animation-delay: -3.2857142857s; }
    .dot:nth-of-type(46) .inner::after {
      animation-delay: -3.2857142857s; }

.dot:nth-of-type(47) {
  transform: rotate(-1208.5714285714deg); }
  .dot:nth-of-type(47) .inner {
    animation-delay: -3.3571428571s; }
    .dot:nth-of-type(47) .inner::after {
      animation-delay: -3.3571428571s; }

.dot:nth-of-type(48) {
  transform: rotate(-1234.2857142857deg); }
  .dot:nth-of-type(48) .inner {
    animation-delay: -3.4285714286s; }
    .dot:nth-of-type(48) .inner::after {
      animation-delay: -3.4285714286s; }

.dot:nth-of-type(49) {
  transform: rotate(-1260deg); }
  .dot:nth-of-type(49) .inner {
    animation-delay: -3.5s; }
    .dot:nth-of-type(49) .inner::after {
      animation-delay: -3.5s; }

.dot:nth-of-type(50) {
  transform: rotate(-1285.7142857143deg); }
  .dot:nth-of-type(50) .inner {
    animation-delay: -3.5714285714s; }
    .dot:nth-of-type(50) .inner::after {
      animation-delay: -3.5714285714s; }

.dot:nth-of-type(51) {
  transform: rotate(-1311.4285714286deg); }
  .dot:nth-of-type(51) .inner {
    animation-delay: -3.6428571429s; }
    .dot:nth-of-type(51) .inner::after {
      animation-delay: -3.6428571429s; }

.dot:nth-of-type(52) {
  transform: rotate(-1337.1428571429deg); }
  .dot:nth-of-type(52) .inner {
    animation-delay: -3.7142857143s; }
    .dot:nth-of-type(52) .inner::after {
      animation-delay: -3.7142857143s; }

.dot:nth-of-type(53) {
  transform: rotate(-1362.8571428571deg); }
  .dot:nth-of-type(53) .inner {
    animation-delay: -3.7857142857s; }
    .dot:nth-of-type(53) .inner::after {
      animation-delay: -3.7857142857s; }

.dot:nth-of-type(54) {
  transform: rotate(-1388.5714285714deg); }
  .dot:nth-of-type(54) .inner {
    animation-delay: -3.8571428571s; }
    .dot:nth-of-type(54) .inner::after {
      animation-delay: -3.8571428571s; }

.dot:nth-of-type(55) {
  transform: rotate(-1414.2857142857deg); }
  .dot:nth-of-type(55) .inner {
    animation-delay: -3.9285714286s; }
    .dot:nth-of-type(55) .inner::after {
      animation-delay: -3.9285714286s; }

@keyframes move {
  to {
    transform: translateX(400%); } }
@keyframes scale {
  /* Scale */
  0%, 100% {
    transform: scale(0); }
  30% {
    transform: scale(0.55); }
  /* Colors */
  /* Offset to not stop transforms */
  0.001% {
    background: #e83030; }
  10.001% {
    background: #e89f30; }
  20.001% {
    background: #c3e830; }
  30.001% {
    background: #55e830; }
  40.001% {
    background: #30e87a; }
  50.001% {
    background: #30e8e8; }
  60.001% {
    background: #307ae8; }
  70.001% {
    background: #5530e8; }
  80.001% {
    background: #c330e8; }
  90.001% {
    background: #e8309f; }
  99.999% {
    background: #e83030; } }
body {
  background: #000000;
  margin: 0;
  padding: 0;
  font-family: Montserrat; }
  @media (max-width: 767px) {
    body {
      padding: 0 8px; } }

* {
  box-sizing: border-box; }

.container {
  border: 1px solid #000000;
  background: #ffffff;
  padding: 30px;
  margin: 0 auto;
  width: 480px;
  color: #000000;
  max-width: 100%;
  border-radius: 4px; }
  @media (max-width: 767px) {
    .container {
      padding: 18px; } }

.game__logo {
  padding-top: 48px; }
  .game__logo__icon {
    margin: 0 auto;
    background: #fff;
    border-radius: 6px;
    display: flex;
    justify-self: center;
    padding: 15px;
    width: 104px; }
    .game__logo__icon img {
      margin: 0 auto;
      display: block;
      height: 56px;
      width: 74px; }
.game__screen {
  pointer-events: none;
  opacity: 0;
  filter: blur(10px);
  transition: .5s all;
  position: fixed;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(3);
  max-width: 100%;
  max-height: 100vh; }
  .game__screen.active {
    pointer-events: all;
    opacity: 1;
    filter: none;
    transform: translateY(-50%) translateX(-50%) scale(1); }

.equation {
  display: flex;
  margin: 24px auto 32px auto;
  max-width: 320px;
  justify-content: center;
  align-items: stretch; }
  .equation__item {
    font-size: 40px;
    font-weight: bold;
    width: 60px;
    text-align: center;
    align-self: center;
    justify-content: center; }
    .equation__item--operator {
      width: 40px; }
    .equation__item--result {
      width: 80px; }
    .equation__item input {
      border: 1px solid #d6d6d6;
      font-size: 40px;
      font-weight: bold;
      width: 100%;
      text-align: center;
      border-radius: 6px;
      padding: 4px; }

.settings__item + .settings__item {
  margin-top: 24px; }
.settings__item__header {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px; }
.settings__item__options label {
  display: block;
  cursor: pointer; }
  .settings__item__options label + label {
    margin-top: 8px; }

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: 0.3s all;
  z-index: 100; }
  .loader.active {
    opacity: 1; }

.button {
  text-align: center;
  padding-top: 24px; }
  .button button, .button a {
    display: inline-block;
    margin: 0 auto;
    padding: 8px 24px;
    border: 2px solid #ffffff;
    background: #11c9ed;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-family: Montserrat;
    text-decoration: none; }
    .button button:hover, .button a:hover {
      background: #0fb5d5; }

.track {
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
  margin-top: 16px; }
  .track__item {
    flex: 0 0 10px;
    border-radius: 100%;
    height: 10px;
    background: #ffffff;
    border: 1px solid #b3b3b3;
    transition: 0.4s all; }
    .track__item.current {
      transform: scale(2);
      z-index: 100;
      position: relative;
      border: 1px solid #333333; }
      .track__item.current:after {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 5px;
        height: 5px;
        background: orange;
        z-index: 3; }
      .track__item.current:before {
        content: '';
        background: #ffffff;
        top: -12px;
        width: 10px;
        height: 5px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        position: absolute; }
    .track__item.correct {
      background: #28bd07;
      border-color: #1e8c05; }
    .track__item.incorrect {
      background: #d70000;
      border-color: #a40000; }

.btn-particles {
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 50%;
  color: #eee;
  font-family: monospace;
  z-index: 5;
  /* 	filter: url(#gooeyness); */
  pointer-events: none; }

.shape {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: scale(0.8);
  z-index: 5000; }

.totalScore {
  text-align: center; }
  .totalScore__header {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px; }
  .totalScore__points .points {
    display: block; }
    .totalScore__points .points span {
      font-size: 32px;
      margin: 0 2px; }
      .totalScore__points .points span + span {
        font-size: 16px; }
  .totalScore__answers {
    margin-top: 6px; }
    .totalScore__answers__show {
      margin-bottom: 16px; }
      .totalScore__answers__show a {
        text-decoration: underline;
        font-size: 13px;
        color: #0c8da5; }
    .totalScore__answers__list {
      overflow: hidden;
      max-height: 600px;
      transition: 0.5s all;
      /** JS: https://codepen.io/jorgemaiden/pen/YgGZMg */ }
      .totalScore__answers__list:not(.active) {
        max-height: 0; }
      .totalScore__answers__list__item {
        padding: 8px 12px;
        margin-bottom: 2px; }
        .totalScore__answers__list__item .operator {
          display: inline-block;
          width: 16px;
          height: 14px; }
          .totalScore__answers__list__item .operator:after, .totalScore__answers__list__item .operator:before {
            width: 3px;
            height: 3px;
            opacity: 0.8; }
          .totalScore__answers__list__item .operator--multiplication:before {
            content: unset; }
          .totalScore__answers__list__item .operator--division:after {
            bottom: 0; }
          .totalScore__answers__list__item .operator--division:before {
            top: 38%; }
        .totalScore__answers__list__item--success {
          background: #efe;
          color: green; }
        .totalScore__answers__list__item--error {
          background: #fee;
          color: red; }
        .totalScore__answers__list__item .wrong {
          text-decoration: line-through;
          margin-right: 5px; }
        .totalScore__answers__list__item .correct {
          font-weight: bold;
          color: green; }

.score,
.rounds-count {
  display: none; }

.operator {
  height: 100%; }
  .operator--multiplication, .operator--division {
    width: 7px;
    display: block;
    margin: 0 auto;
    position: relative; }
    .operator--multiplication:before, .operator--multiplication:after, .operator--division:before, .operator--division:after {
      content: '';
      border-radius: 100%;
      background: #000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-50%); }
  .operator:after {
    width: 7px;
    height: 7px;
    top: 50%; }
  .operator--division {
    height: 36px; }
    .operator--division:after, .operator--division:before {
      width: 7px;
      height: 7px; }
    .operator--division:before {
      top: 35%; }
    .operator--division:after {
      bottom: 10%;
      top: unset; }

/* https://codepen.io/istiaktridip/pen/BZqaOd TICK OK */
/* https://codepen.io/osublake/pen/avbPON EXTRA */
/* https://codepen.io/Souleste/pen/wvvjZvx STARS ON BUTTON CLICK */
/* https://codepen.io/ZachSaucier/pen/PoVQOP SPIRAL */
/* https://codepen.io/ZachSaucier/pen/rNGVKvK PARTICLES */

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