body {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
    margin: 0;
    padding: 0 10px;
    background-color: #000000; /* Начальный цвет фона - черный */
    color: #ffffff; /* Начальный цвет текста - белый */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
  .ascii-art {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    white-space: pre;
    height: 310px;
    max-width: 348px;
    width: 100%;
    line-height: 10px;
    letter-spacing: 0;
    overflow: hidden;
    box-sizing: border-box;
    /* Добавляем анимацию для плавного изменения цвета */
}
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 348px;
    width: 100%;
    flex-direction: column;
    background-color: #000000; /* Начальный цвет фона - черный */
    color: #ffffff; /* Начальный цвет текста - белый */
    box-sizing: border-box;
  }
  
h1, p {
    margin: 10px 0;
    padding: 0;
    text-wrap: pretty;
    text-align: justify;
    max-width: 348px;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}


.buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 348px;
    width: 100%;
    margin-top: 30px;
    background-color: #000000; /* Начальный цвет фона - черный */
    color: #ffffff; /* Начальный цвет текста - белый */
    box-sizing: border-box;
}
button {
    flex: 1;
    color: #ffffff; /* Начальный цвет текста кнопок - белый */
    font-weight: 600;
    padding: 10px;
    border: 2px solid #ffffff; /* Начальный цвет границы кнопок - белый */
    background-color: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s;
    margin-bottom: 40px;
}
.continue-button:hover {
    background-color: #229122;
    color: #a6f8a6;
    border-color: #a6f8a6;
}
.stop-button:hover {
    background-color: #ff8782;
    color: #9e1a1a;
    border-color: #9e1a1a;
}
.popup {
  background-color: #000000; /* Начальный цвет фона попапа - черный */
  color: #ffffff; /* Начальный цвет текста попапа - белый */
  border: 1px solid #ffffff; /* Начальный цвет границы попапа - белый */
  max-width: calc(348px + 40px);
  width: calc(100% - 20px);
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.popup.light-mode {
  background-color: #ffffff; /* Цвет фона попапа в светлом режиме - белый */
  color: #000000; /* Цвет текста попапа в светлом режиме - черный */
  border: 1px solid #000000; /* Цвет границы попапа в светлом режиме - черный */
}

.popup button {
    color: #ffffff; /* Начальный цвет текста кнопки закрытия - белый */
    background-color: #000000; /* Начальный цвет фона кнопки закрытия - черный */
    border: 2px solid #ffffff; /* Начальный цвет границы кнопки закрытия - белый */
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.popup.light-mode button {
    color: #000000; /* Цвет текста кнопки закрытия в светлом режиме - черный */
    background-color: #ffffff; /* Цвет фона кнопки закрытия в светлом режиме - белый */
    border: 2px solid #000000; /* Цвет границы кнопки закрытия в светлом режиме - черный */
}

.popup button:hover {
    background-color: #151515; /* Цвет фона при наведении - светло-серый */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
textarea {
    max-width: 348px;
    width: 100%;
    height: 180px;
    box-sizing: border-box;
}

body.transition, .wrapper.transition, .buttons.transition, .popup.transition {
    transition: background-color 0.5s, color 0.5s;
}

body.light-mode, .wrapper.light-mode, .buttons.light-mode, .popup.light-mode {
    background-color: #ffffff; /* Цвет фона - белый */
    color: #000000; /* Цвет текста - черный */
}

button.light-mode {
    color: #000000; /* Цвет текста кнопок - черный */
    border-color: #000000; /* Цвет границы кнопок - черный */
}

.submit-button {
    flex: 1;
    color: #ffffff; /* Начальный цвет текста кнопки - белый */
    font-weight: 600;
    padding: 10px;
    border: 2px solid #ffffff; /* Начальный цвет границы кнопки - белый */
    background-color: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s;
    margin-bottom: 40px;
}

.submit-button:hover {
    background-color: #229122;
    color: #a6f8a6;
    border-color: #a6f8a6;
}

button.light-mode.submit-button {
    color: #000000; /* Цвет текста кнопки в светлом режиме - черный */
    border-color: #000000; /* Цвет границы кнопки в светлом режиме - черный */
}

button.light-mode.submit-button:hover {
    background-color: #a6f8a6;
    color: #229122;
    border-color: #229122;
}

.hidden {
  display: none;
}
#canvas {
  display: block;
}

.end {
    text-align: center;
}