/* Reset some default styles */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

	body {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background-color: #f0f0f0;
	}

	#wrapper {
        margin: 25px;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

	h2 {
    	font-size: 28px;
    	color: #333;
    	margin-bottom: 20px;
	}

	label, #content, #result {
    	font-size: 16px;
    	color: #555;
    	font-family: Arial, Helvetica, sans-serif;
	}

	#content, #result {
    	resize: none;
    	width: 100%;
    	padding: 10px;
    	line-height: 1.5;
    	border: 1px solid #ccc;
    	border-radius: 5px;
    	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    	background-color: #fff;
    	color: #333;
	}

	#content {
    	height: 500px;
    	overflow-y: auto;
	}

	#result {
    	padding: 10px;
    	border: 1px solid #ccc;
    	border-radius: 5px;
    	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    	color: #333;
    	overflow: hidden; /* Hide the scrollbar */
    	margin-top: 8px;
	}

	label {
    	margin-bottom: 10px;
	}

	button {
    	font-size: 16px;
    	padding: 10px 20px;
    	margin-bottom: 10px;
    	cursor: pointer;
    	background-color: #007BFF;
    	color: #fff;
    	border: none;
    	border-radius: 5px;
    	transition: background-color 0.3s ease;
	}

	button:hover {
    	background-color: #0056b3;
	}

	button:disabled {
    	opacity: 0.5;
    	cursor: not-allowed;
	}

	select {
    	font-size: 16px;
    	margin-right: 20px;
    	cursor: pointer;
    	padding: 10px;
    	border: 1px solid #ccc;
    	border-radius: 5px;
    	background-color: #fff;
    	color: #333;
	}

	#operation {
	    width: 100%;
		display: flex;
    	align-items: center;
    	justify-content: flex-start; /* Left-align the buttons */
    	flex-wrap: wrap;
	}
  
	#clear{
        margin: 0px 5px 3px auto;
    }

	#download{
        margin-top: 7px;
    }

	.voice {
    	background-repeat: no-repeat;
    	background-position: 50% 50%;
    	margin: 5px;
    	padding: 20px; /* 大きさを変更 */
    	border: none;
    	border-radius: 50%;
    	cursor: pointer;
    	background-color: #007BFF;
    	color: #fff;
    	transition: background-color 0.3s ease;
	}

	.voice:hover {
    	background-color: #0056b3;
	}

	.voice:disabled {
    	opacity: 0.5;
    	cursor: not-allowed;
	}

	#read {
    	background-image: url("./icon/read.png"); /* Add the background image path here */
	}

	#pause {
    	background-image: url("./icon/pause.png"); /* Add the background image path here */
	}

	#resume {
    	display: none;
    	background-image: url("./icon/resume.png"); /* Add the background image path here */
	}

	#cancel {
    	background-image: url("./icon/cancel.png"); /* Add the background image path here */
	}