.editor-visual-editor {
	margin-top: 0;
/* Adjust the value to your preference */
	padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 48px;
/* Adjust this value based on your needs */
	word-wrap: normal;
	white-space: normal;
}

.wp-block-comments {
	display: None;
}

body {
	font-family: 'Microsoft JhengHei', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Microsoft JhengHei', sans-serif;
}

body {
	background-image: url('https://taicatw.net/wp-content/uploads/2024/10/e5ba95e59c961-1.jpg');
	background-repeat: no-repeat;
	background-position: bottom;
/* or adjust to your needs */
	background-size: contain;
/* or cover, depending on your desired effect */
}

.card {
	position: relative;
	width: 300px;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	transition: all .3s ease;
}

.card:hover {
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.card-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.card-content {
	position: absolute;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
/* Semi-transparent background */
	color: white;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
}

.card h3 {
	margin: 0;
	font-size: 18px;
	font-family: 'Arial', sans-serif;
}

.card p {
	font-size: 14px;
	margin: 5px 0 0;
}

.carousel {
	width: 100%;
/* Full width */
	max-width: 600px;
/* Limit maximum width */
	overflow: hidden;
/* Hides items outside the visible area */
	position: relative;
	margin: 0 auto;
/* Center the carousel */
}

.carousel-track {
	display: flex;
/* Align items in a row */
	transition: transform .5s ease-in-out;
/* Smooth slide effect */
}

.carousel-item {
	min-width: 100%;
/* Each item takes up the full width of the carousel */
	box-sizing: border-box;
}

.carousel-item img {
	width: 100%;
/* Ensure images take full width */
	height: auto;
/* Maintain aspect ratio */
	display: block;
	margin: 0 auto;
/* Center the images */
}

/* Optional: Styling for buttons */
.carousel-controls {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
}

.carousel-controls button {
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
}

.carousel-controls button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

const track = document.querySelector(.carousel-track);
  const slides = document.querySelectorAll(.carousel-item);
  const prevButton = document.querySelector(.carousel-prev);
  const nextButton = document.querySelector(.carousel-next);
  
  let currentSlide = 0;
  const totalSlides = slides.length;

  // Ensure track width is calculated dynamically based on the number of items
  track.style.width = `$ {
}

%`; // Set track width as a percentage of the number of items
  slides.forEach(slide => {
}	
}

);

  // Function to move to the next slide
  function goToSlide(slideIndex) {
}

// Event listeners for buttons
  nextButton.addEventListener(click, () => {
}

);

  prevButton.addEventListener(click, () => {
}

);

  // Automatic sliding every 3 seconds
  setInterval(() => {
}