@charset "utf-8";
/* CSS Document */
 .container {
            display: flex;
            justify-content: space-around;
        }
        .btn-container {
            position: relative;
            margin-bottom: 20px;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
			text-shadow: 0px 0px 3px white, 0px 0px 3px white, 0px 0px 3px white;
        }
        .message {
            display: none;
            position: relative;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            background-color: aquamarine;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            white-space: nowrap;
			margin-top: -10px;
			width: 150px; /* 设置容器的宽度 */
            word-wrap: break-word; /* 对长单词进行折断换行 */
            white-space: normal; /* 允许文本内容在必要时自动换行，默认情况下大多数元素都会自动换行 */
            overflow-wrap: break-word; /* 防止内容溢出容器，在必要时强制换行，特别是在有连续无空格字母或CJK字符时 */
        }

 table {
    width: 100%;
    max-width: 350px;
    margin: auto;
    border-collapse: collapse;
    font-size: 14px;
  }
  
  th,
  td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
	background-color: #f2f2f2;
	width: 120px;
  }

  th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
	width: 120px;
  }

   .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            padding-top: 100px; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

.ody {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
	text-shadow: 1px 1px 0.2px white, 1px 1px 0.2px white, 1px 1px 0.2px white;
        }
.ody2 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
	top: 300px;
        }
.ody3 {
            display: flex;
            justify-content: center;
            align-items: center;
	bottom: -5px;
            margin: 0;
            padding: 0;
	text-shadow: 1px 1px 0.2px white, 1px 1px 0.2px white, 1px 1px 0.2px white;
        }
.ody4 {
            display: flex;
            justify-content: center;
            align-items: center;
	bottom: 20px;
            margin: 0;
            padding: 0;
	text-shadow: 1px 1px 0.2px white, 1px 1px 0.2px white, 1px 1px 0.2px white;
        }
        .button {
            width: 200px;
            height: 50px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 18px;
        }
.button2 {
            width: 200px;
            height: 40px;
            background-color: aquamarine;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 18px;
	text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
	position: absolute;
	left: 25%;
        }
.button3 {
            width: 200px;
            height: 50px;
            background-color: aquamarine;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 18px;
        }
body{
	max-width: 600px;
	margin: 0 auto;
}


 dialog {
        position: relative; 
        border: 1px solid #ccc;
        padding: 1em;
        background-color: white;
        width: fit-content;
        max-width: 80%;
        box-shadow: 6px 8px 10px rgba(220, 173, 248, 1);
    }

    dialog::backdrop {
        background-color: rgba(163, 163, 236, 1);
    }

   .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        
        img.modal-image {
            height: 350px;
			width: 300px;
        }
@media only screen and (max-width: 768px) {
    .modal-content {
      width: 90%;
      margin: 10% auto;
    }
  }

  #myImage {
            transition: all 1s ease-in-out;
        }
.wyybfa{
	width: 140px;
	height: 160px;
	display: block;
}

 #food {
            position: relative; /* 图片需要定位以便移动 */
            transition: all 1s ease; /* 添加过渡效果 */
        }
 #food2 {
            position: relative;
            transition: all 1s ease;
        }