h3 {
			margin-top: 10px;
			margin-bottom: 5px;
		}

		.chapter {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.text {
			max-width: 600px;
			text-align: justify;
			margin: 10px;
		}

		.note {
			flex-shrink: 0;
			max-width: 200px;
			text-align: justify;
			margin: 10px;
			font-style: italic;
			word-break: normal
		}

		figure.zoom {
			background-position: 50% 50%;
			position: relative;
			width: 100%;
			overflow: hidden;
			cursor: zoom-in;
		}

		#zoom img:hover {
			opacity: 0;
		}

		#zoom img {
			transition: opacity 0.5s;
			display: block;
			width: 100%;
			overflow: hidden;
		}

		#slider-Container {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
		}

		#sliderLable {
			width: 80px;
		}

		#slider {
			width: calc(100% - 80px);
			margin-top: 10px;
		}

		#sizeSlider {
			width: 100%;
			margin-bottom: 20px;
			accent-color: var(--navbarColorDark);
		}

		hr {
			border-color: var(--navbarColorDark);
		}

		#imgContainer {
			position: relative;
			width: fit-content;
			margin: auto;
		}

		#imgContainer:hover {
			.imgTxt {
				display: none;
			}
		}

		#txt1 {
			position: absolute;
			top: 30px;
			left: 30px;
			color: red;
			font-size: 34px;
			font-weight: bold;
		}

		#txt2 {
			position: absolute;
			top: 30px;
			right: 30px;
			color: red;
			font-size: 34px;
			font-weight: bold;
		}

		#txt3 {
			position: absolute;
			bottom: 15px;
			left: 180px;
			color: red;
			font-size: 34px;
			font-weight: bold;
		}

		.maph2 {
			color: red;
		}
		@media (max-width: 600px) {
			.chapter {
				flex-direction: column-reverse;
				align-items: flex-start;
			}

			.note {
				max-width: 100%;
			}

			.text {
				max-width: 100%;
			}
		}