@charset "utf-8";
/* CSS Document */



/*電脑版本*/
@media screen and (min-width:501px){
	html, body {
  		margin: 0;
 	 	padding: 0;
		border: none;
 	 	height: 100%;   /* 讓背景能撐滿整個視窗 */
	}
	h1, h2, h3, p {
 		 margin: 0;  /* 把標題、段落的預設外距清掉 */
  		padding: 0;
	}
	.box{
		width: 600px;
		background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
		border-radius: 10px;
		margin: 0 auto;
		color: aliceblue;
    	position: relative;
	}
	.box img{
		width: 200px;
		height: 200px;
		border-radius: 5px;
	}
	.box p{
		padding-top: 30px;
		font-weight: bold;
	}
	.bottom{
		margin-top:30px;
		width: 99%;
		height: 80px;
	
	}
	.left{
		display: inline-block;
		width: 150px;
		height: 40px;
		background-color: #5cb85c;
		border-color: #4cae4c;
		margin-right: 100px;
		border-radius: 5px;
		line-height: 40px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
	}
	.left:hover{
		background-color:#328732;
		
	}
		.right{
		cursor: pointer;
		display: inline-block;
		width: 150px;
		height: 40px;
		background-color: #c9302c;
		border-color: #ac2925;
		border-radius: 5px;
		line-height: 40px;
		font-size: 16px;
		
	}
	.right:hover{
		border-color:#B11C18;
	}
	h1,h2 {
  		opacity: 0;                /* 預設透明 */
  		transform: translateY(20px); /* 向下偏移一點 */
  		transition: all 0.6s ease; /* 動畫效果 */
	}

	h1.show,h2.show {
 		opacity: 1;
  		transform: translateY(0);  /* 回到原位 */
	}

	#dialog {
  		position: fixed;
  		top: 0; left: 0; right: 0; bottom: 0;
 		background: rgba(0,0,0,0.6);
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		z-index: 9999;
	}

	#dialog-box {
  		background: #fff;
  		padding: 20px 30px;
  		border-radius: 10px;
  		text-align: center;
  		font-size: 18px;
  		box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	}

	#dialog button {
  		margin: 10px;
  		padding: 10px 20px;
  		border: none;
  		border-radius: 6px;
  		cursor: pointer;
	}

	#ok {
  		background: #4CAF50;
  		color: #fff;
	}

	#cancel {
  		background: #f44336;
  		color: #fff;
	}
	.reveal {
  		opacity: 0;
  		transform: translateY(20px);
  		transition: all 0.6s ease;
	}
	.reveal.show {
  		opacity: 1;
 		 transform: translateY(0);
	}

}
/*手机端*/
@media screen and (max-width:500px){
	html, body {
  		margin: 0;
 	 	padding: 0;
		border: none;
 	 	height: 100%;   /* 讓背景能撐滿整個視窗 */
	}
	h1, h2, h3, p {
 		 margin: 0;  /* 把標題、段落的預設外距清掉 */
  		padding: 0;
	}
	.box{
		width: 100%;
		min-height: 100vh;
		background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
		margin: 0 auto;
		color: aliceblue;
    	position: relative;
	}
	.box img{
		width:150px;
		height: 150px;
		border-radius: 5px;
	}
	.box p{
		padding-top: 30px;
		font-weight: bold;
	}
	.bottom{
		margin-top:3%;
		width: 99%;
		height: 80px;
	
	
	}
	.left{
		display: inline-block;
		width: 40%;
		height: 40px;
		background-color: #5cb85c;
		border-color: #4cae4c;
		margin-right: 10%;
		border-radius: 5px;
		line-height: 40px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
	}
	.left:hover{
		background-color:#328732;
		
	}
		.right{
		cursor: pointer;
		display: inline-block;
		width: 40%;
		height: 40px;
		background-color: #c9302c;
		border-color: #ac2925;
		border-radius: 5px;
		line-height: 40px;
		font-size: 16px;
		
	}
	.right:hover{
		border-color:#B11C18;
	}
	h1,h2 {
  		opacity: 0;                /* 預設透明 */
  		transform: translateY(20px); /* 向下偏移一點 */
  		transition: all 0.6s ease; /* 動畫效果 */
	}

	h1.show,h2.show {
 		opacity: 1;
  		transform: translateY(0);  /* 回到原位 */
	}
		#dialog {
  		position: fixed;
  		top: 0; left: 0; right: 0; bottom: 0;
 		background: rgba(0,0,0,0.6);
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		z-index: 9999;
	}

	#dialog-box {
  		background: #fff;
  		padding: 20px 30px;
  		border-radius: 10px;
  		text-align: center;
  		font-size: 18px;
  		box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	}

	#dialog button {
  		margin: 10px;
  		padding: 10px 20px;
  		border: none;
  		border-radius: 6px;
  		cursor: pointer;
	}

	#ok {
  		background: #4CAF50;
  		color: #fff;
	}

	#cancel {
  		background: #f44336;
  		color: #fff;
	}
	.reveal {
  		opacity: 0;
  		transform: translateY(20px);
  		transition: all 0.6s ease;
	}
	.reveal.show {
  		opacity: 1;
 		 transform: translateY(0);
	}
	

}