body {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-family: Arial, sans-serif;
			background-color: #F9F7F5;
			color: #333;
			padding: 20px;
			box-sizing: border-box;
		}

		form {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFF;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
			max-width: 500px;
			width: 100%;
		}

		.word-container {
          	margin-top:20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFF;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
			max-width: 500px;
			width: 100%;
		}

		h1 {
			margin: 0 0 20px 0;
			font-size: 28px;
			text-align: center;
		}

		label {
			margin-right: 10px;
			font-size: 16px;
		}

		input[type="number"] {
			padding: 10px;
			border-radius: 5px;
			border: none;
			background-color: #F0F0F0;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			font-size: 16px;
			color: #333;
			margin-bottom: 10px;
			box-sizing: border-box;
			max-width: 180px;
			text-align: center;
			text-transform: uppercase;
		}
		input[type="text"] {
			padding: 10px;
			border-radius: 5px;
			border: none;
			background-color: #F0F0F0;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			font-size: 16px;
			color: #333;
			margin-bottom: 10px;
			box-sizing: border-box;
			max-width: 40px;
			text-align: center;
			text-transform: uppercase;
		}

		input[type="text"]::placeholder {
			text-transform: none;
		}

		input[type="text"]:focus {
			outline: none;
			box-shadow: 0 0 3px #008CBA;
		}
		input[type="search"] {
			padding: 10px;
			border-radius: 5px;
			border: none;
			background-color: #F0F0F0;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			font-size: 16px;
			color: #333;
			margin-bottom: 10px;
			box-sizing: border-box;
			text-align: center;
			text-transform: uppercase;
		}
		#wordInput::placeholder {
		  width: 200px !important; /* Задайте нужную ширину */
		}

		button[type="submit"] {
			padding: 10px 20px;
			background-color: #008CBA;
			color: #FFF;
			border: none;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.2s;
		}

		button[type="submit"]:hover {
			background-color: #006F8B;
		}

		#letterFields {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 20px;
		}
		.wordletter {
			padding: 10px;
			border-radius: 5px;
			border: none;
			background-color: #F0F0F0;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			font-size: 16px;
			color: #333;
			margin-bottom: 10px;
			box-sizing: border-box;
			max-width: 180px;
			text-align: center;
			text-transform: uppercase;
		}
/* Стили для горизонтального меню */
.horizontal-menu {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.horizontal-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.horizontal-menu li {
  margin-right: 10px;
}

.horizontal-menu a {
  text-decoration: none;
  color: #000;
}

/* Дополнительные стили для правого выравнивания гамбургера */
.horizontal-menu .hamburger {
  margin-left: auto; /* Сдвигаем гамбургер вправо */
}

/* Стили для гамбургер-меню на мобильных устройствах */
@media (max-width: 768px) {
  .horizontal-menu ul {
    display: none;
  }

  .horizontal-menu .hamburger {
    display: block;
    cursor: pointer;
  }

  .horizontal-menu .hamburger-icon {
    width: 25px;
    height: 3px;
    background-color: #000;
    margin-bottom: 5px;
  }

  .horizontal-menu .menu-dropdown {
    display: none;
    padding: 10px;
  }

  .horizontal-menu .show-menu {
    display: block;
  }
}