@charset "utf-8";

html {
	min-height: -webkit-fill-available;
}

body {
	background-image: url("./Image/background.png"), linear-gradient(348.1deg, #E98B10 -1.02%, #FFC673 17.43%, #F8981B 35.89%, #FBB958 71.83%, #E98B10 83%);
	color: #333;
}

.container {
	margin: 0 auto;
	flex-wrap: nowrap;
}

h1 {
	margin: 0;
	font-size: 36px;
	font-weight: 500;
	text-align: center;
	color: currentColor;
}

h3 {
	font-size: 18px;
	margin: 0;
	padding: 0;
	text-align: center;
}

p {
	color: white;
	text-align: center;
	font-size: 16px;
	/* line-height: 150%; */
}

pre {
	font-size: 120%;
	word-break: normal;
	white-space: pre-line;
}

.start {
	width: 100%;
	/* height: 90vh; */
	display: flex;
	align-items: center;
	text-align: center;
	flex-direction: column;
	justify-content: space-evenly;
}


#img {
	max-width: 90%;
	position: relative;
}

.result {
	margin: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

.result-panel {
	display: flex;
	flex-direction: column;
	align-items: center;

	background: #FFF0D3;
	border-radius: 16px;
	box-shadow: 0 4px 16px #0000001a;

	max-width: 500px;
	width: 90%;

	padding: 5%;
	margin-bottom: 24px;
}

.result-text {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: -webkit-fill-available;
	min-height: 6vh;
	padding: 10px 0;

	color: #FF7F0A;
}

.result-table {
	margin: 0 auto;
}

#today_img {
	width: 2px;
	max-width: 100%;
	background-position: center;
}

@keyframes swing {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	20% {
		transform: translate(-5px, 0) rotate(-30deg);
	}

	40% {
		transform: translate(5px, 0) rotate(30deg);
	}

	60% {
		transform: translate(-5px, 0) rotate(-30deg);
	}

	80% {
		transform: translate(5px, 0) rotate(30deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

.swing-animation {
	animation: swing 0.6s ease forwards;
}

.dropbtn {
	background-color: white;
	color: black;
	padding: 6px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
}

.dropbtn:hover,
.dropbtn:focus {
	background-color: white;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px #00000033;
	z-index: 1;
}

.dropdown-content a {
	color: black;
	text-decoration: none;
	display: block;
}

.dropdown a:hover {
	background-color: #ddd;
}

select {
	overflow: auto;
}

.show {
	display: block;
}

.icon-cat {
	width: 24px;
	height: 24px;
	margin-right: 5px;
}

table {
	display: flex;
	justify-content: center;
	width: 100%;
	/* 邊框合併 */
	border-collapse: collapse;
	border: none;
	color: #5D5D5D;
}


tbody tr {
	display: flex;
	min-height: 15vh;
}

tbody {
	flex: 1;
}

td {
	/* 顯示上邊線 */
	border-top: 3px double #0000001A;
	/* 顯示下邊線 */
	border-bottom: none;
	/* 不顯示左邊線 */
	border-left: none;
	/* 不顯示右邊線 */
	border-right: none;
	/* border: none; */
	padding: 6px;
}

td div:not([id]) {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	text-align: left;
	color: #FF9D32;
}

td:not([id]) {
	/* font-weight: bold; */
	text-align: right;
	flex: 1;
}

td.img {
	flex: 1;
	text-align: center;
	align-content: center;
}

td.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	gap: 8px;
	flex: 2;
	color: #5D5D5D;
}

td.img img {
	min-width: 40px;
	max-width: 120px;
	width: 20vw;
}