@import url(https://fonts.googleapis.com/css?family=Nunito);
.lastNumber,
.randomNumber {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 2rem;
  margin-top: 4rem;
}

.numbers {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.numberCircle {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 18px Arial, sans-serif;
  margin: 1rem;
}

span.special {
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em;
}

span.red {
  background: red;
}

span.grey {
  background: #cccccc;
  color: #ffffff;
}

span.green {
  background: #5ea226;
}

span.blue {
  background: #5178d0;
}

span.pink {
  background: #ef0bd8;
}

span.orange {
  background: #ffa500;
}

.lotto-numbers,
.lotto-numbers-joker {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* gap: 0.5rem; */
}

div.lotto-number {
  color: red;
  padding: 0.5rem;
  margin: 0.5rem;
  text-align: center;
  border: 1px solid purple;
  border-radius: 50%;
  width: 3rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .lotto-numbers {
    grid-template-columns: repeat(9, 1fr);
  }

  .lotto-numbers-joker {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (max-width: 827px) {
  .lotto-numbers-joker {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 768px) {
  .lotto-numbers {
    grid-template-columns: repeat(5, 1fr);
  }

  .lotto-numbers-joker {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 576px) {
  .lotto-numbers {
    grid-template-columns: repeat(3, 1fr);
  }

  .lotto-numbers-joker {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 511px) {
  .lotto-numbers-joker {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 375px) {
  .lotto-numbers {
    grid-template-columns: repeat(2, 1fr);
  }

  .lotto-numbers-joker {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 312px) {
  .lotto-numbers {
    grid-template-columns: repeat(1, 1fr);
  }

  .lotto-numbers-joker {
    grid-template-columns: repeat(1, 1fr);
  }
}