@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .container .star {
    animation: space 8s ease-in-out infinite, forward 16s linear infinite;
    background: none;
  }
  .container .star:first-child {
    animation-delay: 0s;
    background: url("../img/star1.png");
  }
  .container .star:nth-child(1) {
    animation-delay: -1s;
    background: url("../img/star2.png");
  }
  .container .star:nth-child(2) {
    animation-delay: -2s;
    background: url("../img/star3.png");
  }
  .container .star:nth-child(3) {
    animation-delay: -3s;
    background: url("../img/star4.png");
  }
  .container .star:nth-child(4) {
    animation-delay: -4s;
    background: url("../img/star5.png");
  }
  .container .star:nth-child(5) {
    animation-delay: -5s;
    background: url("../img/star6.png");
  }
  .container .star:nth-child(6) {
    animation-delay: -6s;
    background: url("../img/star7.png");
  }
  .container .star:last-child {
    animation-delay: -7s;
    background: url("../img/star8.png");
  }
}
@media screen and (max-width: 768px) {
  .container {
    overflow: auto;
  }
  .main__menu {
    height: 96px;
    width: 96px;
  }
  .main__button {
    -webkit-tap-highlight-color: transparent;
    height: 96px;
    width: 96px;
  }
  .main__button span,
  .main__button span::before,
  .main__button span::after {
    height: 2px;
    width: 36px;
    transform: translate(70%, 43px);
  }
  .main__button span::before {
    transform: translateY(-12px);
  }
  .main__button span::after {
    transform: translateY(12px);
  }
  .main__tools {
    -webkit-tap-highlight-color: transparent;
    top: -20px;
    left: -50%;
  }
  .main__tools span:before {
    font-size: 2.5rem;
  }
  .main__counter {
    top: 82px !important;
    left: 82% !important;
  }
  .main__wrapper {
    gap: 0.5rem;
    max-width: 90vw;
  }
  .main__field, .main__btn {
    min-width: 90vw;
  }
  .main__error {
    top: 16%;
  }
  .main__list li {
    flex-direction: column;
  }
  .main__list .list__link .link__long {
    width: 100%;
  }
  .picker {
    width: 100%;
  }
  .picker a, .picker button {
    width: 24px;
    height: 24px;
  }
  .taskbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }
  .typetest {
    padding: 16px;
    margin-top: 24px;
    min-width: 300px;
  }
  .typetest__info {
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
  .typetest select {
    font-size: 2rem;
    height: 48px;
    width: 150px;
    padding: 8px 24px;
  }
  .typetest select option {
    font-size: 1.5rem;
  }
  .typetest__title {
    order: 1;
    font-size: 2rem;
    margin-bottom: 16px;
  }
  .typetest__subtitle {
    display: none;
  }
  .typetest__record {
    order: 2;
    font-size: 2rem;
  }
  .typetest__timer, .typetest__current {
    font-size: 2.2rem;
  }
  .typetest__content {
    font-size: 1.5rem;
    padding: 0;
  }
  .typetest__board {
    flex-direction: column;
    align-items: center;
  }
}